1 files changed, 54 insertions, 3 deletions
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 59d5a7de..1633c433 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -1,6 +1,6 @@
-import { times } from 'lodash'
+import { times, map } from 'lodash'
 
-const setStyle = (href, commit) => {
+const setStyle = (href, col, commit) => {
   /***
       What's going on here?
       I want to make it easy for admins to style this application. To have
@@ -48,7 +48,58 @@ const setStyle = (href, commit) => {
     styleSheet.insertRule(`.base03-border { border-color: ${colors['base03']}`, 'index-max')
     body.style.display = 'initial'
   }
-  cssEl.addEventListener('load', setDynamic)
+
+  const rgb2hex = (r, g, b) => {
+    [r, g, b] = map([r, g, b], (val) => {
+      val = val < 0 ? 0 : val
+      val = val > 255 ? 255 : val
+      return val
+    })
+    return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`
+  }
+
+  const setColors = () => {
+    const styleEl = document.createElement('style')
+    head.appendChild(styleEl)
+    const styleSheet = styleEl.sheet
+
+    const isDark = (col.text.r + col.text.g + col.text.b) > (col.bg.r + col.bg.g + col.bg.b)
+    let colors = {}
+
+    let mod = 10
+    if (isDark) {
+      mod = mod * -1
+    }
+    colors['base00'] = rgb2hex(col.bg.r, col.bg.g, col.bg.b)                         // background
+    colors['base01'] = rgb2hex(col.bg.r - mod, col.bg.g - mod, col.bg.b - mod)       // hilighted bg
+    colors['base02'] = rgb2hex(col.fg.r, col.fg.g, col.fg.b)                         // panels & buttons
+    colors['base03'] = rgb2hex(col.fg.r - mod, col.fg.g - mod, col.fg.b - mod)       // borders
+    colors['base04'] = rgb2hex(col.text.r + mod, col.text.g + mod, col.text.b + mod) // faint text
+    colors['base05'] = rgb2hex(col.text.r, col.text.g, col.text.b)                   // text
+    colors['base06'] = rgb2hex(col.text.r - mod, col.text.g - mod, col.text.b - mod) // strong text
+    colors['base07'] = rgb2hex(col.text.r - mod * 2, col.text.g - mod * 2, col.text.b - mod * 2)
+    colors['base08'] = rgb2hex(col.link.r, col.link.g, col.link.b)                   // links
+
+    times(9, (n) => {
+      const color = colors[`base0${n}`]
+      styleSheet.insertRule(`.base0${n} { color: ${color}`, 'index-max')
+      styleSheet.insertRule(`.base0${n}-background { background-color: ${color}`, 'index-max')
+    })
+
+    commit('setOption', { name: 'colors', value: colors })
+
+    styleSheet.insertRule(`a { color: ${colors['base08']}`, 'index-max')
+    styleSheet.insertRule(`body { color: ${colors['base05']}`, 'index-max')
+    styleSheet.insertRule(`.base05-border { border-color: ${colors['base05']}`, 'index-max')
+    styleSheet.insertRule(`.base03-border { border-color: ${colors['base03']}`, 'index-max')
+    console.log(styleSheet)
+    body.style.display = 'initial'
+  }
+  if (col) {
+    setColors()
+  } else {
+    cssEl.addEventListener('load', setDynamic)
+  }
 }
 
 const StyleSetter = {