some initial work for user highlight v2

3 files changed, 13 insertions, 4 deletions

diff --git a/src/components/user_card_content/user_card_content.js b/src/components/user_card_content/user_card_content.js
index 76a5577e..eae436a9 100644
--- a/src/components/user_card_content/user_card_content.js
+++ b/src/components/user_card_content/user_card_content.js
@@ -5,7 +5,7 @@ export default {
   props: [ 'user', 'switcher', 'selected', 'hideBio' ],
   computed: {
     headingStyle () {
-      const color = this.$store.state.config.colors.bg
+      const color = this.$store.state.config.customTheme.colors.bg
       if (color) {
         const rgb = hex2rgb(color)
         const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .5)`
diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js
index 6f046a1d..00b6c552 100644
--- a/src/services/color_convert/color_convert.js
+++ b/src/services/color_convert/color_convert.js
@@ -97,6 +97,15 @@ const alphaBlend = (fg, fga, bg) => {
   }, {})
 }
 
+const invert = (rgb) => {
+  return 'rgb'.split('').reduce((acc, c) => {
+    console.log(rgb[c])
+    acc[c] = 255 - rgb[c]
+    console.log(acc[c])
+    return acc
+  }, {})
+}
+
 const hex2rgb = (hex) => {
   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
   return result ? {
@@ -125,6 +134,7 @@ export {
   rgb2hex,
   hex2rgb,
   mixrgb,
+  invert,
   rgbstr2hex,
   getContrastRatio,
   alphaBlend
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 9388e6f9..907de586 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -40,8 +40,6 @@ const setStyle = (href, commit) => {
       colors[name] = color
     })
 
-    commit('setOption', { name: 'colors', value: colors })
-
     body.removeChild(baseEl)
 
     const styleEl = document.createElement('style')
@@ -74,7 +72,7 @@ const getTextColor = function (bg, text, preserve) {
 }
 
 const setColors = (input, commit) => {
-  const { colorRules, radiiRules } = generatePreset(input)
+  const { colorRules, radiiRules, theme } = generatePreset(input)
   const head = document.head
   const body = document.body
   body.style.display = 'none'
@@ -91,6 +89,7 @@ const setColors = (input, commit) => {
   // commit('setOption', { name: 'colors', value: htmlColors })
   // commit('setOption', { name: 'radii', value: radii })
   commit('setOption', { name: 'customTheme', value: input })
+  commit('setOption', { name: 'colors', value: theme.colors })
 }
 
 const generatePreset = (input) => {