Set colors into config so they can be used for more dynamic styles.

src/modules/config.js

@@ -2,7 +2,8 @@ import { set } from 'vue'
 import StyleSetter from '../services/style_setter/style_setter.js'
 
 const defaultState = {
-  name: 'Pleroma FE'
+  name: 'Pleroma FE',
+  colors: {}
 }
 
 const config = {
@@ -24,7 +25,7 @@ const config = {
           break
         case 'theme':
           const fullPath = `/static/css/${value}`
-          StyleSetter.setStyle(fullPath)
+          StyleSetter.setStyle(fullPath, commit)
       }
     }
   }

src/services/style_setter/style_setter.js

-const setStyle = (href) => {
+import { times } from 'lodash'
+
+const setStyle = (href, commit) => {
   /***
       What's going on here?
       I want to make it easy for admins to style this application. To have
@@ -23,18 +25,26 @@ const setStyle = (href) => {
   const setDynamic = () => {
     const baseEl = document.createElement('div')
     body.appendChild(baseEl)
-    baseEl.setAttribute('class', 'base05')
-    const base05Color = window.getComputedStyle(baseEl).getPropertyValue('color')
-    baseEl.setAttribute('class', 'base08')
-    const base08Color = window.getComputedStyle(baseEl).getPropertyValue('color')
+
+    let colors = {}
+    times(16, (n) => {
+      const name = `base0${n.toString(16).toUpperCase()}`
+      baseEl.setAttribute('class', name)
+      const color = window.getComputedStyle(baseEl).getPropertyValue('color')
+      colors[name] = color
+    })
+
+    commit('setOption', { name: 'colors', value: colors })
+
+    body.removeChild(baseEl)
+
     const styleEl = document.createElement('style')
     head.appendChild(styleEl)
     const styleSheet = styleEl.sheet
-    body.removeChild(baseEl)
 
-    styleSheet.insertRule(`a { color: ${base08Color}`, 'index-max')
-    styleSheet.insertRule(`body { color: ${base05Color}`, 'index-max')
-    styleSheet.insertRule(`.base05-border { border-color: ${base05Color}`, 'index-max')
+    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')
     body.style.display = 'initial'
   }
   cssEl.addEventListener('load', setDynamic)