some initial work for user highlight v2

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)`

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

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) => {