2 files changed, 104 insertions, 2 deletions
diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js
index b88937bb..235ccfbb 100644
--- a/src/components/settings/settings.js
+++ b/src/components/settings/settings.js
@@ -10,7 +10,11 @@ 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: '',
+      textColorLocal: '',
+      linkColorLocal: ''
     }
   },
   components: {
@@ -21,6 +25,46 @@ const settings = {
       return this.$store.state.users.currentUser
     }
   },
+  mounted() {
+    const rgbstr2hex = (rgb) => {
+      if (rgb[0] === '#')
+        return rgb
+      rgb = rgb.match(/\d+/g)
+      return `#${((Number(rgb[0]) << 16) + (Number(rgb[1]) << 8) + Number(rgb[2])).toString(16)}`
+    }
+    this.bgColorLocal = rgbstr2hex(this.$store.state.config.colors['base00'])
+    this.fgColorLocal = rgbstr2hex(this.$store.state.config.colors['base02'])
+    this.textColorLocal = rgbstr2hex(this.$store.state.config.colors['base05'])
+    this.linkColorLocal = rgbstr2hex(this.$store.state.config.colors['base08'])
+  },
+  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 textRgb = rgb(this.textColorLocal)
+      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,
+          text: textRgb,
+          link: linkRgb
+        }})
+      }
+    }
+  },
   watch: {
     hideAttachmentsLocal (value) {
       this.$store.dispatch('setOption', { name: 'hideAttachments', value })
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index 6a311d55..8d9c3360 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="settings panel panel-default base00-background">
-    <div class="panel-heading base01-background base04">
+    <div class="panel-heading base02-background base04">
       {{$t('settings.settings')}}
     </div>
     <div class="panel-body">
@@ -9,6 +9,42 @@
         <style-switcher></style-switcher>
       </div>
       <div class="setting-item">
+        <h3>Custom theme</h3>
+        <p>Enter hex color codes (#aabbcc) into the text fields.</p>
+        <div class="color-container">
+          <div class="color-item">
+            <label for="bgcolor" class="base04">Background</label>
+            <input id="bgcolor" class="theme-color-in" type="text" v-model="bgColorLocal">
+          </div>
+          <div class="color-item">
+            <label for="fgcolor" class="base04">Foreground</label>
+            <input id="fgcolor" class="theme-color-in" type="text" v-model="fgColorLocal">
+          </div>
+          <div class="color-item">
+            <label for="textcolor" class="base04">Text</label>
+            <input id="textcolor" class="theme-color-in" type="text" v-model="textColorLocal">
+          </div>
+          <div class="color-item">
+            <label for="linkcolor" class="base04">Links</label>
+            <input id="linkcolor" class="theme-color-in" type="text" v-model="linkColorLocal">
+          </div>
+        </div>
+        <div>
+          <div class="panel">
+            <div class="panel-heading" :style="{ 'background-color': fgColorLocal, 'color': textColorLocal }">Preview</div>
+            <div class="panel-body theme-preview-content" :style="{ 'background-color': bgColorLocal, 'color': textColorLocal }">
+              <h4>Content</h4>
+              <br>
+              A bunch of more content and
+              <a :style="{ 'color': linkColorLocal }">a nice lil' link</a>
+              <br>
+              <button class="btn" :style="{ 'background-color': fgColorLocal, 'color': textColorLocal }">Button</button>
+            </div>
+          </div>
+        </div>
+        <button class="btn base02-background base04" @click="setCustomTheme">Submit</button>
+      </div>
+      <div class="setting-item">
         <h2>{{$t('settings.filtering')}}</h2>
         <p>{{$t('settings.filtering_explanation')}}</p>
         <textarea id="muteWords" v-model="muteWordsString"></textarea>
@@ -78,4 +114,26 @@
  .setting-list {
    list-style-type: none;
  }
+
+ .color-container {
+   display: flex;
+ }
+
+ .color-item {
+   max-width: 7em;
+   display:flex;
+   flex-wrap:wrap;
+ }
+
+ .theme-color-in {
+   max-width: 6em;
+   border-radius: 2px;
+   border: 0;
+   padding: 5px;
+   margin: 5px 0 5px 0;
+ }
+
+ .theme-preview-content {
+   padding: 20px;
+ }
 </style>