Some themeing is working!!

src/App.scss

@@ -36,8 +36,8 @@ body {
   font-family: sans-serif;
   font-size: 14px;
   margin: 0;
-  color: $fallback--fg;
+  color: $fallback--text;
-  color: var(--fg, $fallback--fg);
+  color: var(--text, $fallback--text);
   max-width: 100vw;
   overflow-x: hidden;
 }
@@ -50,10 +50,10 @@ a {
 
 button {
   user-select: none;
-  color: $fallback--fg;
+  color: $fallback--text;
-  color: var(--btnText, $fallback--fg);
+  color: var(--btnText, $fallback--text);
-  background-color: $fallback--btn;
+  background-color: $fallback--fg;
-  background-color: var(--btn, $fallback--btn);
+  background-color: var(--btn, $fallback--fg);
   border: none;
   border-radius: $fallback--btnRadius;
   border-radius: var(--btnRadius, $fallback--btnRadius);
@@ -102,10 +102,10 @@ input, textarea, .select {
   border-bottom: 1px solid rgba(255, 255, 255, 0.2);
   border-top: 1px solid rgba(0, 0, 0, 0.2);
   box-shadow: 0px 0px 2px black inset;
-  background-color: $fallback--input;
+  background-color: $fallback--fg;
-  background-color: var(--input, $fallback--input);
+  background-color: var(--input, $fallback--fg);
-  color: $fallback--lightFg;
+  color: $fallback--lightText;
-  color: var(--lightFg, $fallback--lightFg);
+  color: var(--inputText, $fallback--lightText);
   font-family: sans-serif;
   font-size: 14px;
   padding: 8px 7px;
@@ -122,8 +122,8 @@ input, textarea, .select {
     bottom: 0;
     right: 5px;
     height: 100%;
-    color: $fallback--fg;
+    color: $fallback--text;
-    color: var(--fg, $fallback--fg);
+    color: var(--text, $fallback--text);
     line-height: 29px;
     z-index: 0;
     pointer-events: none;
@@ -136,8 +136,8 @@ input, textarea, .select {
     background: transparent;
     border: none;
     margin: 0;
-    color: $fallback--fg;
+    color: $fallback--text;
-    color: var(--fg, $fallback--fg);
+    color: var(--text, $fallback--text);
     padding: 4px 2em 3px 3px;
     width: 100%;
     z-index: 1;
@@ -149,8 +149,8 @@ input, textarea, .select {
   &[type=checkbox] {
     display: none;
     &:checked + label::before {
-      color: $fallback--fg;
+      color: $fallback--text;
-      color: var(--fg, $fallback--fg);
+      color: var(--text, $fallback--text);
     }
     &:disabled,
     {
@@ -172,8 +172,8 @@ input, textarea, .select {
       border-top: 1px solid rgba(0, 0, 0, 0.2);
       box-shadow: 0px 0px 2px black inset;
       margin-right: .5em;
-      background-color: $fallback--input;
+      background-color: $fallback--fg;
-      background-color: var(--input, $fallback--input);
+      background-color: var(--input, $fallback--fg);
       vertical-align: top;
       text-align: center;
       line-height: 1.1em;
@@ -187,8 +187,8 @@ input, textarea, .select {
 }
 
 option {
-  color: $fallback--fg;
+  color: $fallback--text;
-  color: var(--fg, $fallback--fg);
+  color: var(--text, $fallback--text);
   background-color: $fallback--bg;
   background-color: var(--bg, $fallback--bg);
 }
@@ -279,9 +279,9 @@ nav {
     margin: auto;
     height: 50px;
 
-    a i {
+    a, a i {
       color: $fallback--link;
-      color: var(--link, $fallback--link);
+      color: var(--topBarLink, $fallback--link);
     }
   }
 }
@@ -331,8 +331,8 @@ main-router {
   text-align: left;
   line-height: 28px;
   color: var(--panelText);
-  background-color: $fallback--btn;
+  background-color: $fallback--fg;
-  background-color: var(--panel, $fallback--btn);
+  background-color: var(--panel, $fallback--fg);
   align-items: baseline;
 
   .title {
@@ -389,8 +389,8 @@ main-router {
 nav {
   z-index: 1000;
   color: var(--topBarText);
-  background-color: $fallback--btn;
+  background-color: $fallback--fg;
-  background-color: var(--topBar, $fallback--btn);
+  background-color: var(--topBar, $fallback--fg);
   color: $fallback--faint;
   color: var(--faint, $fallback--faint);
   box-shadow: 0px 0px 4px rgba(0,0,0,.6);
@@ -518,8 +518,8 @@ nav {
   cursor: pointer;
 
   .selected {
-    color: $fallback--lightFg;
+    color: $fallback--lightText;
-    color: var(--lightFg, $fallback--lightFg);
+    color: var(--lightText, $fallback--lightText);
   }
 
   .text-format {

src/_variables.scss

@@ -3,14 +3,13 @@ $main-background: white;
 $darkened-background: whitesmoke;
 
 $fallback--bg: #121a24;
-$fallback--btn: #182230;
+$fallback--fg: #182230;
-$fallback--input: #182230;
 $fallback--faint: rgba(185, 185, 186, .5);
-$fallback--fg: #b9b9ba;
+$fallback--text: #b9b9ba;
 $fallback--link: #d8a070;
 $fallback--icon: #666;
 $fallback--lightBg: rgb(21, 30, 42);
-$fallback--lightFg: #b9b9ba;
+$fallback--lightText: #b9b9ba;
 $fallback--border: #222;
 $fallback--cRed: #ff0000;
 $fallback--cBlue: #0095ff;

src/components/chat_panel/chat_panel.vue

@@ -55,8 +55,8 @@
 .chat-heading {
   cursor: pointer;
   .icon-comment-empty {
-    color: $fallback--fg;
+    color: $fallback--text;
-    color: var(--fg, $fallback--fg);
+    color: var(--text, $fallback--text);
   }
 }
 

src/components/color_input/color_input.vue

@@ -0,0 +1,84 @@
+<template>
+<div class="color-control" :class="{ disabled: !present }">
+  <label :for="name" class="label">
+    {{label}}
+  </label>
+  <input
+  v-if="typeof fallback !== 'undefined'"
+  class="opt"
+  :id="name + '-o'"
+      type="checkbox"
+  :checked="present"
+           @input="$emit('input', typeof value === 'undefined' ? fallback : undefined)"
+           >
+           <label v-if="typeof fallback !== 'undefined'" class="opt-l" :for="name + '-o'"></label>
+  <input
+    :id="name"
+    class="color-input"
+    type="color"
+    :value="value || fallback"
+    :disabled="!present"
+    @input="$emit('input', $event.target.value)"
+    >
+  <input
+    :id="name + '-t'"
+    class="text-input"
+    type="text"
+    :value="value || fallback"
+    :disabled="!present"
+    @input="$emit('input', $event.target.value)"
+    >
+</div>
+</template>
+
+<script>
+export default {
+  props: [
+    'name', 'label', 'value', 'fallback'
+  ],
+  computed: {
+    present () {
+      return typeof this.value !== 'undefined'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.color-control {
+  display: flex;
+
+  &.disabled *:not(.opt-l){
+    opacity: .5
+  }
+
+  .label {
+    flex: 2;
+    min-width: 7em;
+  }
+
+  .opt-l {
+    align-self: center;
+    flex: 0;
+    &::before {
+      width: 14px;
+      height: 14px;
+    }
+  }
+
+  .text-input {
+    max-width: 7em;
+    flex: 1;
+  }
+
+  .color-input {
+    flex: 0;
+    padding: 1px;
+    cursor: pointer;
+    height: 100%;
+    max-height: 29px;
+    min-width: 2em;
+    border: none;
+  }
+}
+</style>

src/components/notifications/notifications.scss

@@ -22,8 +22,8 @@
   }
 
   .loadmore-error {
-    color: $fallback--fg;
+    color: $fallback--text;
-    color: var(--fg, $fallback--fg);
+    color: var(--text, $fallback--text);
   }
 
   .unseen {
@@ -90,6 +90,9 @@
         padding: 0.25em 0;
         color: $fallback--faint;
         color: var(--faint, $fallback--faint);
+        a {
+          color: var(--faintLink);
+        }
       }
       padding: 0;
       .media-body {

src/components/opacity_input/opacity_input.vue

@@ -0,0 +1,75 @@
+<template>
+<div class="opacity-control" :class="{ disabled: !present }">
+  <label :for="name" class="label">
+    {{$t('settings.opacity')}}
+  </label>
+  <input
+  v-if="typeof fallback !== 'undefined'"
+  class="opt"
+  :id="name + '-o'"
+      type="checkbox"
+  :checked="present"
+           @input="$emit('input', !present ? fallback : undefined)"
+           >
+  <label v-if="typeof fallback !== 'undefined'" class="opt-l" :for="name + '-o'"></label>
+  <input
+    :id="name"
+    class="input-range"
+    type="range"
+    :value="value || fallback"
+    :disabled="!present"
+    @input="$emit('input', $event.target.value)"
+    max="1"
+    min="0"
+    step=".05">
+</div>
+</template>
+
+<script>
+export default {
+  props: [
+    'name', 'value', 'fallback'
+  ],
+  computed: {
+    present () {
+      return typeof this.value !== 'undefined'
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.opacity-control {
+  display: flex;
+
+  &.disabled *:not(.opt-l) {
+    opacity: .5
+  }
+
+  .opt-l {
+    align-self: center;
+    line-height: 0;
+    &::before {
+      width: 14px;
+      height: 14px;
+    }
+  }
+
+  .label {
+    flex: 2;
+    min-width: 7em;
+  }
+
+  .input-range {
+    align-self: center;
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    height: auto;
+    box-shadow: none;
+    min-width: 9em;
+    flex: 1;
+  }
+}
+</style>

src/components/post_status_form/post_status_form.vue

@@ -153,8 +153,8 @@
       padding-bottom: 0;
       margin-left: $fallback--attachmentRadius;
       margin-left: var(--attachmentRadius, $fallback--attachmentRadius);
-      background-color: $fallback--btn;
+      background-color: $fallback--fg;
-      background-color: var(--btn, $fallback--btn);
+      background-color: var(--fg, $fallback--fg);
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
     }
@@ -261,8 +261,8 @@
     min-width: 75%;
     background: $fallback--bg;
     background: var(--bg, $fallback--bg);
-    color: $fallback--lightFg;
+    color: $fallback--lightText;
-    color: var(--lightFg, $fallback--lightFg);
+    color: var(--lightText, $fallback--lightText);
   }
 
   .autocomplete {
@@ -291,8 +291,8 @@
     }
 
     &.highlighted {
-      background-color: $fallback--btn;
+      background-color: $fallback--fg;
-      background-color: var(--btn, $fallback--btn);
+      background-color: var(--fg, $fallback--fg);
     }
   }
 }

src/components/settings/settings.vue

@@ -159,7 +159,7 @@
 @import '../../_variables.scss';
 
 .setting-item {
-  border-bottom: 2px solid var(--btn, $fallback--btn);
+  border-bottom: 2px solid var(--fg, $fallback--fg);
   margin: 1em 1em 1.4em;
   padding-bottom: 1.4em;
 

src/components/status/status.vue

@@ -284,8 +284,8 @@
       margin-left: 0.2em;
     }
     a:hover i {
-      color: $fallback--fg;
+      color: $fallback--text;
-      color: var(--fg, $fallback--fg);
+      color: var(--text, $fallback--text);
     }
   }
 

src/components/style_switcher/style_switcher.js

@@ -31,6 +31,7 @@ export default {
 
       panelColorLocal: undefined,
       panelTextColorLocal: undefined,
+      panelFaintColorLocal: undefined,
       panelOpacityLocal: undefined,
 
       topBarColorLocal: undefined,
@@ -40,10 +41,17 @@ export default {
 
       alertOpacityLocal: undefined,
 
-      redColorLocal: '',
+      borderColorLocal: undefined,
-      blueColorLocal: '',
+      borderOpacityLocal: undefined,
-      greenColorLocal: '',
+
-      orangeColorLocal: '',
+      faintColorLocal: undefined,
+      faintOpacityLocal: undefined,
+      faintLinkColorLocal: undefined,
+
+      cRedColorLocal: '',
+      cBlueColorLocal: '',
+      cGreenColorLocal: '',
+      cOrangeColorLocal: '',
 
       btnRadiusLocal: '',
       inputRadiusLocal: '',
@@ -74,16 +82,35 @@ export default {
       return {
         colors: {
           bg: this.bgColorLocal,
-          fg: this.fgColorLocal,
           text: this.textColorLocal,
-          panel: this.panelColorLocal,
-          topBar: this.topBarColorLocal,
-          btn: this.btnColorLocal,
           link: this.linkColorLocal,
-          cRed: this.redColorLocal,
+
-          cBlue: this.blueColorLocal,
+          fg: this.fgColorLocal,
-          cGreen: this.greenColorLocal,
+          fgText: this.fgTextColorLocal,
-          cOrange: this.orangeColorLocal
+          fgLink: this.fgLinkColorLocal,
+
+          panel: this.panelColorLocal,
+          panelText: this.panelTextColorLocal,
+          panelFaint: this.panelFaintColorLocal,
+
+          input: this.inputColorLocal,
+          inputText: this.inputTextColorLocal,
+
+          topBar: this.topBarColorLocal,
+          topBarText: this.topBarTextColorLocal,
+          topBarLink: this.topBarLinkColorLocal,
+
+          btn: this.btnColorLocal,
+          btnText: this.btnTextColorLocal,
+
+          faint: this.faintColorLocal,
+          faintLink: this.faintLinkColorLocal,
+          border: this.borderColorLocal,
+
+          cRed: this.cRedColorLocal,
+          cBlue: this.cBlueColorLocal,
+          cGreen: this.cGreenColorLocal,
+          cOrange: this.cOrangeColorLocal
         },
         radii: {
           btnRadius: this.btnRadiusLocal,
@@ -197,12 +224,12 @@ export default {
     },
 
     clearV1 () {
+      this.bgOpacityLocal = undefined
       this.fgOpacityLocal = undefined
       this.fgTextColorLocal = undefined
       this.fgLinkColorLocal = undefined
 
-      this.panelColorLocal = undefined
+      this.btnColorLocal = undefined
-      this.topBarColorLocal = undefined
       this.btnTextColorLocal = undefined
       this.btnOpacityLocal = undefined
 
@@ -216,7 +243,17 @@ export default {
 
       this.topBarColorLocal = undefined
       this.topBarTextColorLocal = undefined
+      this.topBarLinkColorLocal = undefined
       this.topBarOpacityLocal = undefined
+
+      this.alertOpacityLocal = undefined
+
+      this.borderColorLocal = undefined
+      this.borderOpacityLocal = undefined
+
+      this.faintColorLocal = undefined
+      this.faintOpacityLocal = undefined
+      this.faintLinkColorLocal = undefined
     },
 
     /**
@@ -228,22 +265,42 @@ export default {
       const colors = input.colors || input
       const radii = input.radii || input
 
-      this.bgColorLocal = rgb2hex(colors.bg)
+      if (version === 0) {
-      this.fgColorLocal = rgb2hex(colors.fg)
+        if (input.version) version = input.version
-      this.textColorLocal = rgb2hex(colors.text)
+        // Old v1 naming: fg is text, btn is foreground
-      this.linkColorLocal = rgb2hex(colors.link)
+        if (typeof colors.text === 'undefined' && typeof colors.fg !== 'undefined') {
-
+          version = 1
-      if (version === 1) {
+        }
-        this.clearV1()
+        // New v2 naming: text is text, fg is foreground
+        if (typeof colors.text !== 'undefined' && typeof colors.fg !== 'undefined') {
+          version = 2
+        }
       }
 
-      this.panelColorLocal = rgb2hex(colors.panel)
+      console.log('BENIS')
-      this.topBarColorLocal = rgb2hex(colors.topBar)
+      console.log(version)
+      // Stuff that differs between V1 and V2
+      if (version === 1) {
+        console.log(colors)
+        this.fgColorLocal = rgb2hex(colors.btn)
+        this.textColorLocal = rgb2hex(colors.fg)
+      }
 
-      this.redColorLocal = rgb2hex(colors.cRed)
+      const keys = new Set(version !== 1 ? Object.keys(colors) : [])
-      this.blueColorLocal = rgb2hex(colors.cBlue)
+      if (version === 1) {
-      this.greenColorLocal = rgb2hex(colors.cGreen)
+        // V1 ignores the rest
-      this.orangeColorLocal = rgb2hex(colors.cOrange)
+        this.clearV1()
+        keys
+          .add('bg')
+          .add('link')
+          .add('cRed')
+          .add('cBlue')
+          .add('cGreen')
+          .add('cOrange')
+      }
+      keys.forEach(key => {
+        this[key + 'ColorLocal'] = rgb2hex(colors[key])
+      })
 
       this.btnRadiusLocal = radii.btnRadius || 4
       this.inputRadiusLocal = radii.inputRadius || 4
@@ -259,7 +316,7 @@ export default {
       if (this.selectedVersion === 1) {
         this.clearV1()
         this.bgColorLocal = this.selected[1]
-        this.btnColorLocal = this.selected[2]
+        this.fgColorLocal = this.selected[2]
         this.textColorLocal = this.selected[3]
         this.linkColorLocal = this.selected[4]
         this.redColorLocal = this.selected[5]

src/components/style_switcher/style_switcher.vue

@@ -58,16 +58,16 @@
       <div class="color-item">
         <ColorInput name="fgColor" v-model="fgColorLocal" :label="$t('settings.foreground')"/>
         <OpacityInput name="fgOpacity" v-model="fgOpacityLocal" :fallback="bgOpacityLocal || 1"/>
-        <ColorInput name="fgTextColor" v-model="fgTextColorLocal" :label="$t('settings.text')" :fallback="previewTheme.colors.btnText"/>
+        <ColorInput name="fgTextColor" v-model="fgTextColorLocal" :label="$t('settings.text')" :fallback="previewTheme.colors.fgText"/>
-        <ColorInput name="fgLinkColor" v-model="fgLinkColorLocal" :label="$t('settings.links')" :fallback="linkColorLocal"/>
+        <ColorInput name="fgLinkColor" v-model="fgLinkColorLocal" :label="$t('settings.links')" :fallback="previewTheme.colors.fgLink"/>
       </div>
       <div class="color-item">
-        <ColorInput name="cRedColor" v-model="redColorLocal" :label="$t('settings.cRed')"/>
+        <ColorInput name="cRedColor" v-model="cRedColorLocal" :label="$t('settings.cRed')"/>
-        <ColorInput name="cBlueColor" v-model="blueColorLocal" :label="$t('settings.cBlue')"/>
+        <ColorInput name="cBlueColor" v-model="cBlueColorLocal" :label="$t('settings.cBlue')"/>
       </div>
       <div class="color-item">
-        <ColorInput name="cGreenColor" v-model="greenColorLocal" :label="$t('settings.cGreen')"/>
+        <ColorInput name="cGreenColor" v-model="cGreenColorLocal" :label="$t('settings.cGreen')"/>
-        <ColorInput name="cOrangeColor" v-model="orangeColorLocal" :label="$t('settings.cOrange')"/>
+        <ColorInput name="cOrangeColor" v-model="cOrangeColorLocal" :label="$t('settings.cOrange')"/>
       </div>
       <div class="color-item wide">
         <h4>Alert opacity</h4>
@@ -79,38 +79,40 @@
     <div>
       <div class="color-item">
         <h4>Panel header</h4>
-        <ColorInput name="panelColor" v-model="panelColorLocal" :fallback="btnColorLocal" :label="$t('settings.background')"/>
+        <ColorInput name="panelColor" v-model="panelColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
         <OpacityInput name="panelOpacity" v-model="panelOpacityLocal" fallback="1"/>
-        <ColorInput name="panelTextColor" v-model="panelTextColorLocal" :fallback="textColorLocal" :label="$t('settings.links')"/>
+        <ColorInput name="panelTextColor" v-model="panelTextColorLocal" :fallback="previewTheme.colors.panelText" :label="$t('settings.links')"/>
+        <ColorInput name="panelFaintColor" v-model="panelFaintColorLocal" :fallback="previewTheme.colors.panelFaint" :label="$t('settings.faint')"/>
       </div>
       <div class="color-item">
         <h4>Top bar</h4>
-        <ColorInput name="topBarColor" v-model="topBarColorLocal" :fallback="btnColorLocal" :label="$t('settings.background')"/>
+        <ColorInput name="topBarColor" v-model="topBarColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
         <OpacityInput name="topBarOpacity" v-model="topBarOpacityLocal" fallback="1"/>
-        <ColorInput name="topBarTextColor" v-model="topBarTextColorLocal" :fallback="textColorLocal" :label="$t('settings.text')"/>
+        <ColorInput name="topBarTextColor" v-model="topBarTextColorLocal" :fallback="previewTheme.colors.topBarText" :label="$t('settings.text')"/>
-        <ColorInput name="topBarLinkColor" v-model="topBarLinkColorLocal" :fallback="linkColorLocal" :label="$t('settings.links')"/>
+        <ColorInput name="topBarLinkColor" v-model="topBarLinkColorLocal" :fallback="previewTheme.colors.topBarLink" :label="$t('settings.links')"/>
       </div>
       <div class="color-item">
         <h4>Inputs</h4>
-        <ColorInput name="inputColor" v-model="inputColorLocal" :fallback="btnColorLocal" :label="$t('settings.background')"/>
+        <ColorInput name="inputColor" v-model="inputColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
         <OpacityInput name="inputOpacity" v-model="inputOpacityLocal" fallback="0.5"/>
-        <ColorInput name="inputTextColor" v-model="inputTextColorLocal" :fallback="textColorLocal" :label="$t('settings.text')"/>
+        <ColorInput name="inputTextColor" v-model="inputTextColorLocal" :fallback="previewTheme.colors.inputText" :label="$t('settings.text')"/>
       </div>
       <div class="color-item">
         <h4>Buttons</h4>
-        <ColorInput name="btnColor" v-model="btnColorLocal" :fallback="btnColorLocal" :label="$t('settings.background')"/>
+        <ColorInput name="btnColor" v-model="btnColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
         <OpacityInput name="btnOpacity" v-model="btnOpacityLocal" fallback="0.5"/>
-        <ColorInput name="btnTextColor" v-model="btnTextColorLocal" :fallback="textColorLocal" :label="$t('settings.text')"/>
+        <ColorInput name="btnTextColor" v-model="btnTextColorLocal" :fallback="previewTheme.colors.btnText" :label="$t('settings.text')"/>
       </div>
       <div class="color-item">
         <h4>Borders</h4>
-        <ColorInput name="btnColor" v-model="btnColorLocal" :fallback="btnColorLocal" label="Color"/>
+        <ColorInput name="borderColor" v-model="borderColorLocal" :fallback="previewTheme.colors.border" label="Color"/>
-        <OpacityInput name="btnOpacity" v-model="btnOpacityLocal" fallback="0.5"/>
+        <OpacityInput name="borderOpacity" v-model="borderOpacityLocal" fallback="0.5"/>
       </div>
       <div class="color-item">
         <h4>Faint text</h4>
-        <ColorInput name="btnColor" v-model="btnColorLocal" :fallback="btnColorLocal" :label="$t('settings.text')"/>
+        <ColorInput name="faintColor" v-model="faintColorLocal" :fallback="previewTheme.colors.faint" :label="$t('settings.text')"/>
-        <OpacityInput name="btnOpacity" v-model="btnOpacityLocal" fallback="0.5"/>
+        <OpacityInput name="faintOpacity" v-model="faintOpacityLocal" fallback="0.5"/>
+        <ColorInput name="faintLinkColor" v-model="faintLinkColorLocal" :fallback="previewTheme.colors.faintLink" :label="$t('settings.link')"/>
       </div>
     </div>
   </div>

src/components/tab_switcher/tab_switcher.scss

@@ -17,8 +17,8 @@
 
     .tab, &::after, &::before {
       border-bottom: 1px solid;
-      border-bottom-color: $fallback--btn;
+      border-bottom-color: $fallback--fg;
-      border-bottom-color: var(--btn, $fallback--btn);
+      border-bottom-color: var(--fg, $fallback--fg);
     }
 
     .tab {
@@ -28,8 +28,8 @@
 
       &:not(.active) {
         border-bottom: 1px solid;
-        border-bottom-color: $fallback--btn;
+        border-bottom-color: $fallback--fg;
-        border-bottom-color: var(--btn, $fallback--btn);
+        border-bottom-color: var(--fg, $fallback--fg);
         z-index: 4;
       }
 

src/components/timeline/timeline.vue

@@ -61,12 +61,12 @@
     opacity: 0.8;
     background-color: transparent;
     color: $fallback--faint;
-    color: var(--faint, $fallback--faint);
+    color: var(--panelFaint, $fallback--faint);
   }
 
   .loadmore-error {
-    color: $fallback--fg;
+    color: $fallback--text;
-    color: var(--fg, $fallback--fg);
+    color: var(--text, $fallback--text);
   }
 }
 
@@ -79,7 +79,7 @@
   border-color: var(--border, $fallback--border);
   padding: 10px;
   z-index: 1;
-  background-color: $fallback--btn;
+  background-color: $fallback--fg;
-  background-color: var(--btn, $fallback--btn);
+  background-color: var(--fg, $fallback--fg);
 }
 </style>

src/components/user_card_content/user_card_content.vue

@@ -138,8 +138,8 @@
 }
 
 .user-info {
-  color: $fallback--lightFg;
+  color: $fallback--lightText;
-  color: var(--lightFg, $fallback--lightFg);
+  color: var(--lightText, $fallback--lightText);
   padding: 0 16px;
 
   .container {
@@ -173,8 +173,8 @@
   }
 
   .usersettings {
-    color: $fallback--lightFg;
+    color: $fallback--lightText;
-    color: var(--lightFg, $fallback--lightFg);
+    color: var(--lightText, $fallback--lightText);
     opacity: .8;
   }
 
@@ -193,8 +193,8 @@
   }
 
   .user-screen-name {
-    color: $fallback--lightFg;
+    color: $fallback--lightText;
-    color: var(--lightFg, $fallback--lightFg);
+    color: var(--lightText, $fallback--lightText);
     display: inline-block;
     font-weight: light;
     font-size: 15px;
@@ -269,8 +269,8 @@
   padding: .5em 1.5em 0em 1.5em;
   text-align: center;
   justify-content: space-between;
-  color: $fallback--lightFg;
+  color: $fallback--lightText;
-  color: var(--lightFg, $fallback--lightFg);
+  color: var(--lightText, $fallback--lightText);
 
   &.clickable {
     .user-count {

src/services/style_setter/style_setter.js

@@ -112,27 +112,33 @@ const generatePreset = (input) => {
 
   colors.text = col.text
   colors.lightText = colors.text
+  colors.link = col.link
+  colors.border = col.border || col.fg
+  colors.faint = col.faint || col.text
 
   colors.bg = col.bg
   colors.lightBg = col.lightBg || brightness(5, colors.bg).rgb
 
   colors.fg = col.fg
-  colors.fgText = getTextColor(colors.fg, colors.text)
+  colors.fgText = col.fgText || getTextColor(colors.fg, colors.text)
+  colors.fgLink = col.fgLink || getTextColor(colors.fg, colors.link)
 
   colors.btn = col.btn || col.fg
-  colors.btnText = getTextColor(colors.btn, colors.text)
+  colors.btnText = col.btnText || getTextColor(colors.btn, colors.fgText)
+
+  colors.input = col.input || col.fg
+  colors.inputText = col.inputText || getTextColor(colors.input, colors.fgText)
 
   colors.panel = col.panel || col.fg
-  colors.panelText = getTextColor(colors.panel, colors.text)
+  colors.panelText = col.panelText || getTextColor(colors.panel, colors.fgText)
+  colors.panelFaint = col.panelFaint || getTextColor(colors.panel, colors.faint)
 
   colors.topBar = col.topBar || col.fg
-  colors.topBarText = getTextColor(colors.topBar, colors.text)
+  colors.topBarText = col.topBarText || getTextColor(colors.topBar, colors.fgText)
+  colors.topBarLink = col.topBarLink || getTextColor(colors.topBar, colors.fgLink)
 
-  colors.input = col.input || Object.assign({ a: 0.5 }, col.btn)
+  colors.faintLink = col.faintLink || col.link
-  colors.border = col.btn
-  colors.faint = col.faint || Object.assign({ a: 0.5 }, col.text)
 
-  colors.link = col.link
   colors.icon = mixrgb(colors.bg, colors.text)
 
   colors.cBlue = col.cBlue
@@ -153,7 +159,7 @@ const generatePreset = (input) => {
     colorRules: Object.entries(htmlColors).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}`).join(';'),
     radiiRules: Object.entries(radii).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}px`).join(';'),
     theme: {
-      colors,
+      colors: htmlColors,
       radii
     }
   }
@@ -165,7 +171,7 @@ const setPreset = (val, commit) => {
     .then((themes) => {
       const theme = themes[val] ? themes[val] : themes['pleroma-dark']
       const bgRgb = hex2rgb(theme[1])
-      const btnRgb = hex2rgb(theme[2])
+      const fgRgb = hex2rgb(theme[2])
       const textRgb = hex2rgb(theme[3])
       const linkRgb = hex2rgb(theme[4])
 
@@ -176,7 +182,7 @@ const setPreset = (val, commit) => {
 
       const colors = {
         bg: bgRgb,
-        btn: btnRgb,
+        fg: fgRgb,
         text: textRgb,
         link: linkRgb,
         cRed: cRedRgb,