2 files changed, 118 insertions, 7 deletions
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index d265572d..b1359d13 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -2,18 +2,70 @@ export default {
   data () {
     return {
       availableStyles: [],
-      selected: this.$store.state.config.theme
+      selected: this.$store.state.config.theme,
+      bgColorLocal: '',
+      fgColorLocal: '',
+      textColorLocal: '',
+      linkColorLocal: ''
     }
   },
   created () {
     const self = this
-    window.fetch('/static/css/themes.json')
+
+    window.fetch('/static/styles.json')
       .then((data) => data.json())
-      .then((themes) => { self.availableStyles = themes })
+      .then((themes) => {
+        self.availableStyles = themes
+      })
+  },
+  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) {
+        this.$store.dispatch('setOption', {
+          name: 'customTheme',
+          value: {
+            fg: fgRgb,
+            bg: bgRgb,
+            text: textRgb,
+            link: linkRgb
+          }})
+      }
+    }
   },
   watch: {
     selected () {
-      this.$store.dispatch('setOption', { name: 'theme', value: this.selected })
+      this.bgColorLocal = this.selected[1]
+      this.fgColorLocal = this.selected[2]
+      this.textColorLocal = this.selected[3]
+      this.linkColorLocal = this.selected[4]
     }
   }
 }
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index bfd8cf86..f92f7299 100644
--- a/src/components/style_switcher/style_switcher.vue
+++ b/src/components/style_switcher/style_switcher.vue
@@ -1,7 +1,43 @@
 <template>
-  <select v-model="selected" class="style-switcher">
-    <option v-for="style in availableStyles" >{{style}}</option>
-  </select>
+  <div>
+    <p>{{$t('settings.presets')}}</p>
+    <select v-model="selected" class="style-switcher">
+      <option v-for="style in availableStyles" :value="style">{{style[0]}}</option>
+    </select>
+    <p>{{$t('settings.theme_help')}}</p>
+    <div class="color-container">
+      <div class="color-item">
+        <label for="bgcolor" class="base04">{{$t('settings.background')}}</label>
+        <input id="bgcolor" class="theme-color-in" type="text" v-model="bgColorLocal">
+      </div>
+      <div class="color-item">
+        <label for="fgcolor" class="base04">{{$t('settings.foreground')}}</label>
+        <input id="fgcolor" class="theme-color-in" type="text" v-model="fgColorLocal">
+      </div>
+      <div class="color-item">
+        <label for="textcolor" class="base04">{{$t('settings.text')}}</label>
+        <input id="textcolor" class="theme-color-in" type="text" v-model="textColorLocal">
+      </div>
+      <div class="color-item">
+        <label for="linkcolor" class="base04">{{$t('settings.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">{{$t('general.apply')}}</button>
+  </div>
 </template>
 
 <script src="./style_switcher.js"></script>
@@ -10,4 +46,27 @@
  .style-switcher {
    margin-right: 1em;
  }
+
+ .color-container {
+   display: flex;
+   flex-wrap: wrap;
+ }
+
+ .color-item {
+   max-width: 9em;
+   display:flex;
+   flex-wrap:wrap;
+ }
+
+ .theme-color-in {
+   max-width: 8em;
+   border-radius: 2px;
+   border: 0;
+   padding: 5px;
+   margin: 5px 0 5px 0;
+ }
+
+ .theme-preview-content {
+   padding: 20px;
+ }
 </style>