First version with naive color extrapolation.

src/components/settings/settings.js

@@ -10,7 +10,10 @@ const settings = {
       muteWordsString: this.$store.state.config.muteWords.join('\n'),
       autoLoadLocal: this.$store.state.config.autoLoad,
       streamingLocal: this.$store.state.config.streaming,
-      hoverPreviewLocal: this.$store.state.config.hoverPreview
+      hoverPreviewLocal: this.$store.state.config.hoverPreview,
+      bgColorLocal: '',
+      fgColorLocal: '',
+      linkColorLocal: ''
     }
   },
   components: {
@@ -21,6 +24,32 @@ const settings = {
       return this.$store.state.users.currentUser
     }
   },
+  methods: {
+    setCustomTheme () {
+      if (!this.bgColorLocal && !this.fgColorLocal && !this.linkColorLocal) {
+        // reset to picked themes
+      }
+      const rgb = (hex) => {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        return result ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16)
+        } : null
+      }
+      const bgRgb = rgb(this.bgColorLocal)
+      const fgRgb = rgb(this.fgColorLocal)
+      const linkRgb = rgb(this.linkColorLocal)
+      if (bgRgb && fgRgb && linkRgb) {
+        console.log('all colors ok')
+        this.$store.dispatch('setOption', { name: 'customTheme', value: {
+          fg: fgRgb,
+          bg: bgRgb,
+          link: linkRgb
+        }})
+      }
+    }
+  },
   watch: {
     hideAttachmentsLocal (value) {
       this.$store.dispatch('setOption', { name: 'hideAttachments', value })

src/components/settings/settings.vue

@@ -8,6 +8,14 @@
         <h2>{{$t('settings.theme')}}</h2>
         <style-switcher></style-switcher>
       </div>
+      <div class="setting-item">
+        <h3>Custom theme</h3>
+        <p>Enter hex color codes (#aabbcc) into the text fields.</p>
+        <input type="text" placeholder="Background" v-model="bgColorLocal">
+        <input type="text" placeholder="Foreground" v-model="fgColorLocal">
+        <input type="text" placeholder="Highlight" v-model="linkColorLocal">
+        <button @click="setCustomTheme">Submit</button>
+      </div>
       <div class="setting-item">
         <h2>{{$t('settings.filtering')}}</h2>
         <p>{{$t('settings.filtering_explanation')}}</p>

src/modules/config.js

@@ -32,7 +32,10 @@ const config = {
           break
         case 'theme':
           const fullPath = `/static/css/${value}`
-          StyleSetter.setStyle(fullPath, commit)
+          StyleSetter.setStyle(fullPath, null, commit)
+          break
+        case 'customTheme':
+          StyleSetter.setStyle(null, value, commit)
       }
     }
   }

src/services/style_setter/style_setter.js

@@ -1,6 +1,6 @@
 import { times } 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,49 @@ 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) => {
+    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.fg.r + col.fg.g + col.fg.b) > (col.bg.r + col.bg.g + col.bg.b)
+    let colors = {}
+
+    times(4, (n) => {
+      const nameLow = `base0${n.toString(16).toUpperCase()}`
+      const nameHigh = `base0${(n + 4).toString(16).toUpperCase()}`
+      if (isDark) {
+        colors[nameLow] = rgb2hex(col.bg.r + 10 * n, col.bg.g + 10 * n, col.bg.b + 10 * n)
+        colors[nameHigh] = rgb2hex(col.fg.r - 10 * n, col.fg.g - 10 * n, col.fg.b - 10 * n)
+      } else {
+        colors[nameLow] = rgb2hex(col.bg.r - 10 * n, col.bg.g - 10 * n, col.bg.b - 10 * n)
+        colors[nameHigh] = rgb2hex(col.fg.r + 10 * n, col.fg.g + 10 * n, col.fg.b + 10 * n)
+      }
+      styleSheet.insertRule(`.${nameLow} { color: ${colors[nameLow]}`, 'index-max')
+      styleSheet.insertRule(`.${nameHigh} { color: ${colors[nameHigh]}`, 'index-max')
+      styleSheet.insertRule(`.${nameLow}-background { background-color: ${colors[nameLow]}`, 'index-max')
+      styleSheet.insertRule(`.${nameHigh}-background { background-color: ${colors[nameHigh]}`, 'index-max')
+    })
+    colors['base08'] = rgb2hex(col.link.r, col.link.g, col.link.b)
+    commit('setOption', { name: 'colors', value: colors })
+    console.log(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')
+    body.style.display = 'initial'
+  }
+  if (col) {
+    setColors()
+  } else {
+    cssEl.addEventListener('load', setDynamic)
+  }
 }
 
 const StyleSetter = {