From ed84c6acc07d7e1848dab0fc2d64061e9a090e8d Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Tue, 14 Nov 2017 01:37:49 +0200
Subject: First version with naive color extrapolation.

---
 src/components/settings/settings.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

(limited to 'src/components/settings/settings.vue')

diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index 6a311d55..9dcb1263 100644
--- a/src/components/settings/settings.vue
+++ b/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>
-- 
cgit v1.2.3-70-g09d2


From 44073e72fdb5d253f48b6f0bb0755da89f7e4ae1 Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Fri, 17 Nov 2017 02:17:36 +0200
Subject: Update theme editor to have 4 colors, rewrite the color setter,
 change a LOT of base16 assignments for better consistency.

---
 src/App.vue                                        |  6 +--
 src/components/conversation/conversation.vue       |  2 +-
 src/components/login_form/login_form.vue           |  4 +-
 src/components/notifications/notifications.vue     |  4 +-
 .../post_status_form/post_status_form.vue          |  6 +--
 src/components/registration/registration.vue       |  4 +-
 src/components/settings/settings.js                | 15 ++++++
 src/components/settings/settings.vue               | 60 ++++++++++++++++++++--
 src/components/timeline/timeline.vue               | 14 ++---
 src/components/user_settings/user_settings.vue     | 10 ++--
 src/services/style_setter/style_setter.js          | 45 +++++++++-------
 11 files changed, 122 insertions(+), 48 deletions(-)

(limited to 'src/components/settings/settings.vue')

diff --git a/src/App.vue b/src/App.vue
index 0d004665..74a18dc7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="app" v-bind:style="style" class="base02-background">
-    <nav class='container base01-background base04' @click="scrollToTop()" id="nav">
+    <nav class='container base02-background base05' @click="scrollToTop()" id="nav">
       <div class='inner-nav' :style="logoStyle">
         <div class='item'>
           <router-link :to="{ name: 'root'}">{{sitename}}</router-link>
@@ -14,8 +14,8 @@
     </nav>
     <div class="container" id="content">
       <div class="panel-switcher">
-        <button @click="activatePanel('sidebar')" class="base01-background base04">Sidebar</button>
-        <button @click="activatePanel('timeline')" class="base01-background base04">Timeline</button>
+        <button @click="activatePanel('sidebar')" class="base02-background base05">Sidebar</button>
+        <button @click="activatePanel('timeline')" class="base02-background base05">Timeline</button>
       </div>
       <div class="sidebar-flexer" :class="{ 'mobile-hidden': mobileActivePanel != 'sidebar'}">
         <div class="sidebar-bounds">
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 3dea4985..c7adba13 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="timeline panel panel-default">
-    <div class="panel-heading base01-background base04 base03-border conversation-heading">
+    <div class="panel-heading base02-background base04 base03-border conversation-heading">
       {{ $t('timeline.conversation') }}
       <span v-if="collapsable" style="float:right;">
         <small><a href="#" @click.prevent="$emit('toggleExpanded')">Collapse</a></small>
diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
index c05488ec..c293d611 100644
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="login panel panel-default base00-background">
     <!-- Default panel contents -->
-    <div class="panel-heading base01-background base04">
+    <div class="panel-heading base02-background base04">
       {{$t('login.login')}}
     </div>
     <div class="panel-body">
@@ -17,7 +17,7 @@
         <div class='form-group'>
           <div class='login-bottom'>
             <div><router-link :to="{name: 'registration'}" v-if='registrationOpen' class='register'>{{$t('login.register')}}</router-link></div>
-            <button :disabled="loggingIn" type='submit' class='btn btn-default base05 base01-background'>{{$t('login.login')}}</button>
+            <button :disabled="loggingIn" type='submit' class='btn btn-default base04 base02-background'>{{$t('login.login')}}</button>
           </div>
         </div>
         <div v-if="authError" class='form-group'>
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 1e5f6975..64624873 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="notifications">
     <div class="panel panel-default base00-background">
-      <div class="panel-heading base01-background base04">
+      <div class="panel-heading base02-background base04">
         <span class="unseen-count" v-if="unseenCount">{{unseenCount}}</span>
         {{$t('notifications.notifications')}}
-        <button @click.prevent="markAsSeen" class="base05 base01-background read-button">{{$t('notifications.read')}}</button>
+        <button @click.prevent="markAsSeen" class="base04 base02-background read-button">{{$t('notifications.read')}}</button>
       </div>
       <div class="panel-body base03-border">
         <div v-for="notification in visibleNotifications" :key="notification" class="notification" :class='{"unseen": !notification.seen}'>
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 33614637..4b9072a4 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -6,7 +6,7 @@
       </div>
       <div style="position:relative;" v-if="candidates">
         <div class="autocomplete-panel base05-background">
-          <div v-for="candidate in candidates" @click="replace(candidate.screen_name + ' ')" class="autocomplete base01">
+          <div v-for="candidate in candidates" @click="replace(candidate.screen_name + ' ')" class="autocomplete base02">
             <img :src="candidate.img"></img>
             <span>
               {{candidate.screen_name}}
@@ -17,8 +17,8 @@
       </div>
       <div class='form-bottom'>
         <media-upload @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="enableSubmit" :drop-files="dropFiles"></media-upload>
-        <button v-if="posting" disabled class="btn btn-default base05 base01-background">{{$t('post_status.posting')}}</button>
-        <button v-else :disabled="submitDisabled" type="submit" class="btn btn-default base05 base01-background">{{$t('general.submit')}}</button>
+        <button v-if="posting" disabled class="btn btn-default base05 base02-background">{{$t('post_status.posting')}}</button>
+        <button v-else :disabled="submitDisabled" type="submit" class="btn btn-default base05 base02-background">{{$t('general.submit')}}</button>
       </div>
       <div class='error' v-if="error">
         Error: {{ error }}
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index 755489d7..adc751a3 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.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('registration.registration')}}
     </div>
     <div class="panel-body">
@@ -39,7 +39,7 @@
             </div>
             -->
             <div class='form-group'>
-              <button :disabled="registering" type='submit' class='btn btn-default base05 base01-background'>{{$t('general.submit')}}</button>
+              <button :disabled="registering" type='submit' class='btn btn-default base05 base02-background'>{{$t('general.submit')}}</button>
             </div>
           </div>
           <div class='terms-of-service' v-html="termsofservice">
diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js
index a1d3aeda..235ccfbb 100644
--- a/src/components/settings/settings.js
+++ b/src/components/settings/settings.js
@@ -13,6 +13,7 @@ const settings = {
       hoverPreviewLocal: this.$store.state.config.hoverPreview,
       bgColorLocal: '',
       fgColorLocal: '',
+      textColorLocal: '',
       linkColorLocal: ''
     }
   },
@@ -24,6 +25,18 @@ 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) {
@@ -39,12 +52,14 @@ const settings = {
       }
       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
         }})
       }
diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue
index 9dcb1263..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">
@@ -11,10 +11,38 @@
       <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 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>
@@ -86,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>
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 18e27c71..ad741e3b 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="timeline panel panel-default" v-if="viewing == 'statuses'">
-    <div class="panel-heading timeline-heading base01-background base04">
+    <div class="panel-heading timeline-heading base02-background base04">
       <div class="title">
         {{title}}
       </div>
-      <button @click.prevent="showNewStatuses" class="base05 base01-background loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError">
+      <button @click.prevent="showNewStatuses" class="base05 base02-background loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError">
         {{$t('timeline.show_new')}} ({{timeline.newStatusCount}})
       </button>
       <div @click.prevent class="base06 error  loadmore-text" v-if="timelineError">
         {{$t('timeline.error_fetching')}}
       </div>
-      <div @click.prevent class="base04 base01-background loadmore-text" v-if="!timeline.newStatusCount > 0 && !timelineError">
+      <div @click.prevent class="base04 base02-background loadmore-text" v-if="!timeline.newStatusCount > 0 && !timelineError">
         {{$t('timeline.up_to_date')}}
       </div>
     </div>
@@ -18,14 +18,14 @@
       <div class="timeline">
         <status-or-conversation v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status"></status-or-conversation>
         <a href="#" v-on:click.prevent='fetchOlderStatuses()' v-if="!timeline.loading">
-          <div class="base01-background base03-border new-status-notification text-center">{{$t('timeline.load_older')}}</div>
+          <div class="base02-background base03-border new-status-notification text-center">{{$t('timeline.load_older')}}</div>
         </a>
-          <div class="base01-background base03-border new-status-notification text-center" v-else>...</div>
+          <div class="base02-background base03-border new-status-notification text-center" v-else>...</div>
       </div>
     </div>
   </div>
   <div class="timeline panel panel-default" v-else-if="viewing == 'followers'">
-    <div class="panel-heading timeline-heading base01-background base04">
+    <div class="panel-heading timeline-heading base02-background base04">
       <div class="title">
         {{$t('user_card.followers')}}
       </div>
@@ -37,7 +37,7 @@
     </div>
   </div>
   <div class="timeline panel panel-default" v-else-if="viewing == 'friends'">
-    <div class="panel-heading timeline-heading base01-background base04">
+    <div class="panel-heading timeline-heading base02-background base04">
       <div class="title">
         {{$t('user_card.followees')}}
       </div>
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index 003ee3bd..74b0ff2a 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_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.user_settings')}}
     </div>
     <div class="panel-body profile-edit">
@@ -10,7 +10,7 @@
         <input class='name-changer base03-border' id='username' v-model="newname" :value="user.screen_name"></input>
         <p>{{$t('settings.bio')}}</p>
         <textarea class="bio base03-border" v-model="newbio"></textarea>
-        <button :disabled='newname.length <= 0' class="btn btn-default base05 base01-background" @click="updateProfile">{{$t('general.submit')}}</button>
+        <button :disabled='newname.length <= 0' class="btn btn-default base05 base02-background" @click="updateProfile">{{$t('general.submit')}}</button>
       </div>
       <div class="setting-item">
         <h3>{{$t('settings.avatar')}}</h3>
@@ -23,7 +23,7 @@
           <input type="file" @change="uploadFile(0, $event)" ></input>
         </div>
         <i class="fa icon-spin4 animate-spin" v-if="uploading[0]"></i>
-        <button class="btn btn-default base05 base01-background" v-else-if="previews[0]" @click="submitAvatar">{{$t('general.submit')}}</button>
+        <button class="btn btn-default base05 base02-background" v-else-if="previews[0]" @click="submitAvatar">{{$t('general.submit')}}</button>
       </div>
       <div class="setting-item">
         <h3>{{$t('settings.profile_banner')}}</h3>
@@ -36,7 +36,7 @@
           <input type="file" @change="uploadFile(1, $event)" ></input>
         </div>
         <i class="fa icon-spin4 animate-spin uploading" v-if="uploading[1]"></i>
-        <button class="btn btn-default base05 base01-background" v-else-if="previews[1]" @click="submitBanner">{{$t('general.submit')}}</button>
+        <button class="btn btn-default base05 base02-background" v-else-if="previews[1]" @click="submitBanner">{{$t('general.submit')}}</button>
       </div>
       <div class="setting-item">
         <h3>{{$t('settings.profile_background')}}</h3>
@@ -47,7 +47,7 @@
           <input type="file" @change="uploadFile(2, $event)" ></input>
         </div>
         <i class="fa icon-spin4 animate-spin uploading" v-if="uploading[2]"></i>
-        <button class="btn btn-default base05 base01-background" v-else-if="previews[2]" @click="submitBg">{{$t('general.submit')}}</button>
+        <button class="btn btn-default base05 base02-background" v-else-if="previews[2]" @click="submitBg">{{$t('general.submit')}}</button>
       </div>
     </div>
   </div>
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 4047c26e..1633c433 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -1,4 +1,4 @@
-import { times } from 'lodash'
+import { times, map } from 'lodash'
 
 const setStyle = (href, col, commit) => {
   /***
@@ -50,6 +50,11 @@ const setStyle = (href, col, commit) => {
   }
 
   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)}`
   }
 
@@ -58,32 +63,36 @@ const setStyle = (href, col, commit) => {
     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)
+    const isDark = (col.text.r + col.text.g + col.text.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')
+    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')
     })
-    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')
+    console.log(styleSheet)
     body.style.display = 'initial'
   }
   if (col) {
-- 
cgit v1.2.3-70-g09d2


From 21b31cf599e3dd619694ca7b6b998494b18af770 Mon Sep 17 00:00:00 2001
From: shpuld <shp@cock.li>
Date: Fri, 17 Nov 2017 17:24:42 +0200
Subject: Move custom theming from settings to style-switcher, remove usage of
 custom .css files, use styles.json instead.

---
 src/components/settings/settings.js              |  46 +-------
 src/components/settings/settings.vue             |  58 ----------
 src/components/style_switcher/style_switcher.js  |  65 +++++++++++-
 src/components/style_switcher/style_switcher.vue |  64 ++++++++++-
 src/modules/config.js                            |   5 +-
 src/services/style_setter/style_setter.js        | 130 +++++++++++++++--------
 static/config.json                               |   2 +-
 static/css/base16-pleroma-dark.css               |   2 +-
 static/styles.json                               |   4 +
 9 files changed, 215 insertions(+), 161 deletions(-)
 create mode 100644 static/styles.json

(limited to 'src/components/settings/settings.vue')

diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js
index 235ccfbb..3f619572 100644
--- a/src/components/settings/settings.js
+++ b/src/components/settings/settings.js
@@ -11,10 +11,6 @@ const settings = {
       autoLoadLocal: this.$store.state.config.autoLoad,
       streamingLocal: this.$store.state.config.streaming,
       hoverPreviewLocal: this.$store.state.config.hoverPreview,
-      bgColorLocal: '',
-      fgColorLocal: '',
-      textColorLocal: '',
-      linkColorLocal: ''
     }
   },
   components: {
@@ -25,46 +21,8 @@ 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 8d9c3360..8fdd09de 100644
--- a/src/components/settings/settings.vue
+++ b/src/components/settings/settings.vue
@@ -8,42 +8,6 @@
         <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>
-        <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>
@@ -114,26 +78,4 @@
  .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>
diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js
index d265572d..8b769494 100644
--- a/src/components/style_switcher/style_switcher.js
+++ b/src/components/style_switcher/style_switcher.js
@@ -1,19 +1,76 @@
+import { map, compose } from 'lodash'
+
 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) => {
+        console.log(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'])
+    console.log(this.$store.state.config.colors['base02'])
+    console.log(this.fgColorLocal)
+    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: {
     selected () {
-      this.$store.dispatch('setOption', { name: 'theme', value: this.selected })
+      console.log(this.selected)
+      this.bgColorLocal = this.selected[1]
+      this.fgColorLocal = this.selected[2]
+      this.textColorLocal = this.selected[3]
+      this.linkColorLocal = this.selected[4]
+      //this.$store.dispatch('setOption', { name: 'theme', value: this.selected })
     }
   }
 }
diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
index bfd8cf86..074b3830 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>
+    <select v-model="selected" class="style-switcher">
+      <option v-for="style in availableStyles" :value="style">{{style[0]}}</option>
+    </select>
+    <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>
 </template>
 
 <script src="./style_switcher.js"></script>
@@ -10,4 +46,26 @@
  .style-switcher {
    margin-right: 1em;
  }
+
+ .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>
diff --git a/src/modules/config.js b/src/modules/config.js
index 1811faa8..9a62905e 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -31,11 +31,10 @@ const config = {
           dispatch('setPageTitle')
           break
         case 'theme':
-          const fullPath = `/static/css/${value}`
-          StyleSetter.setStyle(fullPath, null, commit)
+          StyleSetter.setPreset(value, commit)
           break
         case 'customTheme':
-          StyleSetter.setStyle(null, value, commit)
+          StyleSetter.setColors(value, commit)
       }
     }
   }
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 1633c433..bbb2c510 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -1,6 +1,10 @@
 import { times, map } from 'lodash'
 
-const setStyle = (href, col, commit) => {
+// While this is not used anymore right now, I left it in if we want to do custom
+// styles that aren't just colors, so user can pick from a few different distinct
+// styles as well as set their own colors in the future.
+
+const setStyle = (href, commit) => {
   /***
       What's going on here?
       I want to make it easy for admins to style this application. To have
@@ -49,61 +53,93 @@ const setStyle = (href, col, commit) => {
     body.style.display = 'initial'
   }
 
-  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)}`
-  }
+  cssEl.addEventListener('load', setDynamic)
+}
 
-  const setColors = () => {
-    const styleEl = document.createElement('style')
-    head.appendChild(styleEl)
-    const styleSheet = styleEl.sheet
+const rgb2hex = (r, g, b) => {
+  [r, g, b] = map([r, g, b], (val) => {
+    val = Math.ceil(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 isDark = (col.text.r + col.text.g + col.text.b) > (col.bg.r + col.bg.g + col.bg.b)
-    let colors = {}
+const setColors = (col, commit) => {
+  const head = document.head
+  const body = document.body
+  body.style.display = 'none'
 
-    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')
-    })
+  const styleEl = document.createElement('style')
+  head.appendChild(styleEl)
+  const styleSheet = styleEl.sheet
 
-    commit('setOption', { name: 'colors', value: colors })
+  const isDark = (col.text.r + col.text.g + col.text.b) > (col.bg.r + col.bg.g + col.bg.b)
+  let 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)
+  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 + col.fg.r) / 2, (col.bg.g + col.fg.g) / 2, (col.bg.b + col.fg.b) / 2) // 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 * 2, col.text.g + mod * 2, col.text.b + mod * 2) // 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${8 - n}`]
+    styleSheet.insertRule(`.base0${8 - n} { color: ${color}`, 'index-max')
+    styleSheet.insertRule(`.base0${8 - 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')
+  body.style.display = 'initial'
+}
+
+const hex2rgb = (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 setPreset = (val, commit) => {
+  window.fetch('/static/styles.json')
+    .then((data) => data.json())
+    .then((themes) => {
+      const theme = themes[val] ? themes[val] : themes[0]
+      const bgRgb = hex2rgb(theme[1])
+      const fgRgb = hex2rgb(theme[2])
+      const textRgb = hex2rgb(theme[3])
+      const linkRgb = hex2rgb(theme[4])
+      const col = {
+        bg: bgRgb,
+        fg: fgRgb,
+        text: textRgb,
+        link: linkRgb
+      }
+      console.log(col)
+      setColors(col, commit)
+    })
 }
 
 const StyleSetter = {
-  setStyle
+  setStyle,
+  setPreset,
+  setColors
 }
 
 export default StyleSetter
diff --git a/static/config.json b/static/config.json
index 195ee046..8b596992 100644
--- a/static/config.json
+++ b/static/config.json
@@ -1,6 +1,6 @@
 {
   "name": "Pleroma FE",
-  "theme": "base16-pleroma-dark.css",
+  "theme": "pleroma-dark",
   "background": "/static/bg.jpg",
   "logo": "/static/logo.png",
   "registrationOpen": false
diff --git a/static/css/base16-pleroma-dark.css b/static/css/base16-pleroma-dark.css
index 8190d2a7..e1d46f92 100644
--- a/static/css/base16-pleroma-dark.css
+++ b/static/css/base16-pleroma-dark.css
@@ -17,7 +17,7 @@
 
 .base00 { color: #161c20; }
 .base01 { color: #282e32; }
-.base02 { color: #36393e; }
+.base02 { color: #343a3f; }
 .base03 { color: #4e5256; }
 .base04 { color: #ababab; }
 .base05 { color: #b9b9b9; }
diff --git a/static/styles.json b/static/styles.json
new file mode 100644
index 00000000..229cde39
--- /dev/null
+++ b/static/styles.json
@@ -0,0 +1,4 @@
+{
+  "pleroma-dark": [ "Pleroma Dark", "#121a24", "#182230", "#b9b9ba", "#d8a070" ],
+  "pleroma-light": [ "Pleroma Light", "#f2f4f6", "#d0d6db", "#304055", "#e46f0f" ]
+}
-- 
cgit v1.2.3-70-g09d2