more workings and even less explosions.

src/components/style_switcher/style_switcher.js

@@ -9,17 +9,27 @@ export default {
       availableStyles: [],
       selected: this.$store.state.config.theme,
       invalidThemeImported: false,
-      bgColorLocal: '',
-      bgOpacityLocal: 0,
-      btnColorLocal: '',
-      btnOpacityLocal: '',
 
       textColorLocal: '',
       linkColorLocal: '',
 
+      bgColorLocal: '',
+      bgOpacityLocal: undefined,
+
+      btnColorLocal: '',
+      btnTextColorLocal: undefined,
+      btnOpacityLocal: undefined,
+
+      inputColorLocal: undefined,
+      inputTextColorLocal: undefined,
+      inputOpacityLocal: undefined,
+
       panelColorLocal: undefined,
+      panelTextColorLocal: undefined,
       panelOpacityLocal: undefined,
+
       topBarColorLocal: undefined,
+      topBarTextColorLocal: undefined,
       topBarOpacityLocal: undefined,
 
       redColorLocal: '',
@@ -49,6 +59,9 @@ export default {
     this.normalizeLocalState(this.$store.state.config.customTheme)
   },
   computed: {
+    selectedVersion () {
+      return Array.isArray(this.selected) ? 1 : 2
+    },
     currentTheme () {
       return {
         colors: {
@@ -76,8 +89,11 @@ export default {
     },
     previewRules () {
       try {
-        const generated = StyleSetter.generatePreset(this.currentTheme.colors)
+        if (!this.currentTheme.colors.bg) {
-        return [generated.colorRules, generated.radiiRules].join(';')
+          return ''
+        }
+        const generated = StyleSetter.generatePreset(this.currentTheme)
+        return [generated.colorRules, generated.radiiRules, 'color: var(--text)'].join(';')
       } catch (e) {
         console.error('CATCH')
         console.error(e)
@@ -93,9 +109,8 @@ export default {
     exportCurrentTheme () {
       const stringified = JSON.stringify({
         // To separate from other random JSON files and possible future theme formats
-        _pleroma_theme_version: 1,
+        _pleroma_theme_version: 2,
-        colors: this.$store.state.config.colors,
+        theme: this.currentTheme
-        radii: this.$store.state.config.radii
       }, null, 2) // Pretty-print and indent with 2 spaces
 
       // Create an invisible link with a data url and simulate a click
@@ -123,7 +138,9 @@ export default {
             try {
               const parsed = JSON.parse(target.result)
               if (parsed._pleroma_theme_version === 1) {
-                this.normalizeLocalState(parsed.colors, parsed.radii)
+                this.normalizeLocalState(parsed, 1)
+              } else if (parsed._pleroma_theme_version === 2) {
+                this.normalizeLocalState(parsed.theme)
               } else {
                 // A theme from the future, spooky
                 this.invalidThemeImported = true
@@ -162,67 +179,68 @@ export default {
       })
     },
 
-    normalizeLocalState (input) {
+    clearV1 () {
+      this.panelColorLocal = undefined
+      this.topBarColorLocal = undefined
+      this.btnTextColorLocal = undefined
+      this.btnOpacityLocal = undefined
+
+      this.inputColorLocal = undefined
+      this.inputTextColorLocal = undefined
+      this.inputOpacityLocal = undefined
+
+      this.panelColorLocal = undefined
+      this.panelTextColorLocal = undefined
+      this.panelOpacityLocal = undefined
+
+      this.topBarColorLocal = undefined
+      this.topBarTextColorLocal = undefined
+      this.topBarOpacityLocal = undefined
+    },
+
+    normalizeLocalState (input, version = 2) {
       const colors = input.colors || input
       const radii = input.radii || input
-      let i = 0
-      console.log('BENIS')
-      console.log(colors)
 
-      console.log(i++)
       this.bgColorLocal = rgb2hex(colors.bg)
-      console.log(i++)
       this.btnColorLocal = rgb2hex(colors.btn)
-      console.log(i++)
       this.textColorLocal = rgb2hex(colors.text || colors.fg)
-      console.log(i++)
       this.linkColorLocal = rgb2hex(colors.link)
-      console.log(i++)
 
-      this.panelColorLocal = colors.panel ? rgb2hex(colors.panel) : undefined
+      if (version === 1) {
-      console.log(i++)
+        this.clearV1()
-      this.topBarColorLocal = colors.topBad ? rgb2hex(colors.topBar) : undefined
+      }
-      console.log(i++)
+
+      this.panelColorLocal = rgb2hex(colors.panel)
+      this.topBarColorLocal = rgb2hex(colors.topBar)
 
       this.redColorLocal = rgb2hex(colors.cRed)
-      console.log(i++)
-      console.log('red')
-      console.log(colors.cRed)
-      console.log(this.redColorLocal)
       this.blueColorLocal = rgb2hex(colors.cBlue)
-      console.log(i++)
-      console.log('blue', this.blueColorLocal, colors.cBlue)
       this.greenColorLocal = rgb2hex(colors.cGreen)
-      console.log(i++)
       this.orangeColorLocal = rgb2hex(colors.cOrange)
-      console.log(i++)
 
       this.btnRadiusLocal = radii.btnRadius || 4
-      console.log(i++)
       this.inputRadiusLocal = radii.inputRadius || 4
-      console.log(i++)
       this.panelRadiusLocal = radii.panelRadius || 10
-      console.log(i++)
       this.avatarRadiusLocal = radii.avatarRadius || 5
-      console.log(i++)
       this.avatarAltRadiusLocal = radii.avatarAltRadius || 50
-      console.log(i++)
       this.tooltipRadiusLocal = radii.tooltipRadius || 2
-      console.log(i++)
       this.attachmentRadiusLocal = radii.attachmentRadius || 5
-      console.log(i++)
     }
   },
   watch: {
     selected () {
-      this.bgColorLocal = this.selected[1]
+      if (this.selectedVersion === 1) {
-      this.btnColorLocal = this.selected[2]
+        this.clearV1();
-      this.textColorLocal = this.selected[3]
+        this.bgColorLocal = this.selected[1]
-      this.linkColorLocal = this.selected[4]
+        this.btnColorLocal = this.selected[2]
-      this.redColorLocal = this.selected[5]
+        this.textColorLocal = this.selected[3]
-      this.greenColorLocal = this.selected[6]
+        this.linkColorLocal = this.selected[4]
-      this.blueColorLocal = this.selected[7]
+        this.redColorLocal = this.selected[5]
-      this.orangeColorLocal = this.selected[8]
+        this.greenColorLocal = this.selected[6]
+        this.blueColorLocal = this.selected[7]
+        this.orangeColorLocal = this.selected[8]
+      }
     }
   }
 }

src/components/style_switcher/style_switcher.vue

@@ -52,44 +52,65 @@
       <div class="color-item">
         <ColorInput name="bgColor" v-model="bgColorLocal" :label="$t('settings.background')"/>
         <OpacityInput name="bgOpacity" v-model="bgOpacityLocal" fallback="1"/>
+        <ColorInput name="textColor" v-model="textColorLocal" :label="$t('settings.text')"/>
+        <ColorInput name="linkColor" v-model="linkColorLocal" :label="$t('settings.links')"/>
       </div>
       <div class="color-item">
         <ColorInput name="fgColor" v-model="btnColorLocal" :label="$t('settings.foreground')"/>
-        <OpacityInput name="fgOpacity" v-model="btnOpacityLocal" fallback="1"/>
+        <OpacityInput name="fgOpacity" v-model="fgOpacityLocal" :fallback="bgOpacityLocal || 1"/>
+        <ColorInput name="fgTextColor" v-model="fgTextColorLocal" :label="$t('settings.text')" :fallback="textColorLocal"/>
+        <ColorInput name="fgLinkColor" v-model="fgLinkColorLocal" :label="$t('settings.links')" :fallback="linkColorLocal"/>
       </div>
       <div class="color-item">
-        <ColorInput name="textColor" v-model="textColorLocal" :label="$t('settings.text')"/>
+        <ColorInput name="cRedColor" v-model="redColorLocal" :label="$t('settings.cRed')"/>
+        <ColorInput name="cBlueColor" v-model="blueColorLocal" :label="$t('settings.cBlue')"/>
       </div>
       <div class="color-item">
-        <ColorInput name="linkColor" v-model="linkColorLocal" :label="$t('settings.links')"/>
+        <ColorInput name="cGreenColor" v-model="greenColorLocal" :label="$t('settings.cGreen')"/>
+        <ColorInput name="cOrangeColor" v-model="orangeColorLocal" :label="$t('settings.cOrange')"/>
+      </div>
+      <div class="color-item wide">
+        <h4>Alert opacity</h4>
+        <OpacityInput name="alertOpacity" v-model="alertOpacityLocal" fallback="1"/>
       </div>
     </div>
 
     <h3>More customs!</h3>
     <div>
       <div class="color-item">
-        <ColorInput name="panelColor" v-model="panelColorLocal" :fallback="btnColorLocal" label="Panel header"/>
+        <h4>Panel header</h4>
+        <ColorInput name="panelColor" v-model="panelColorLocal" :fallback="btnColorLocal" :label="$t('settings.background')"/>
         <OpacityInput name="panelOpacity" v-model="panelOpacityLocal" fallback="1"/>
+        <ColorInput name="panelTextColor" v-model="panelTextColorLocal" :fallback="textColorLocal" :label="$t('settings.links')"/>
       </div>
       <div class="color-item">
-        <ColorInput name="topBarColor" v-model="topBarColorLocal" :fallback="btnColorLocal" label="Top bar"/>
+        <h4>Top bar</h4>
+        <ColorInput name="topBarColor" v-model="topBarColorLocal" :fallback="btnColorLocal" :label="$t('settings.background')"/>
         <OpacityInput name="topBarOpacity" v-model="topBarOpacityLocal" fallback="1"/>
-      </div>
+        <ColorInput name="topBarTextColor" v-model="topBarTextColorLocal" :fallback="textColorLocal" :label="$t('settings.text')"/>
-    </div>
+        <ColorInput name="topBarLinkColor" v-model="topBarLinkColorLocal" :fallback="linkColorLocal" :label="$t('settings.links')"/>
-
-    <h3>Rainbows!!!</h3>
-    <div>
-      <div class="color-item">
-        <ColorInput name="cRedColor" v-model="redColorLocal" :label="$t('settings.cRed')"/>
       </div>
       <div class="color-item">
-        <ColorInput name="cBlueColor" v-model="blueColorLocal" :label="$t('settings.cBlue')"/>
+        <h4>Inputs</h4>
+        <ColorInput name="inputColor" v-model="inputColorLocal" :fallback="btnColorLocal" :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')"/>
       </div>
       <div class="color-item">
-        <ColorInput name="cGreenColor" v-model="greenColorLocal" :label="$t('settings.cGreen')"/>
+        <h4>Buttons</h4>
+        <ColorInput name="buttonColor" v-model="buttonColorLocal" :fallback="btnColorLocal" :label="$t('settings.background')"/>
+        <OpacityInput name="buttonOpacity" v-model="buttonOpacityLocal" fallback="0.5"/>
+        <ColorInput name="buttonTextColor" v-model="buttonTextColorLocal" :fallback="textColorLocal" :label="$t('settings.text')"/>
       </div>
       <div class="color-item">
-        <ColorInput name="cOrangeColor" v-model="orangeColorLocal" :label="$t('settings.cOrange')"/>
+        <h4>Borders</h4>
+        <ColorInput name="buttonColor" v-model="buttonColorLocal" :fallback="btnColorLocal" label="Color"/>
+        <OpacityInput name="buttonOpacity" v-model="buttonOpacityLocal" fallback="0.5"/>
+      </div>
+      <div class="color-item">
+        <h4>Faint text</h4>
+        <ColorInput name="buttonColor" v-model="buttonColorLocal" :fallback="btnColorLocal" :label="$t('settings.text')"/>
+        <OpacityInput name="buttonOpacity" v-model="buttonOpacityLocal" fallback="0.5"/>
       </div>
     </div>
   </div>
@@ -212,7 +233,10 @@
   flex-direction: column;
   flex: 1 1 0;
 
-  &:nth-child(2n+1) {
+  &.wide {
+    min-width: 60%
+  }
+  &:not(.wide):nth-child(2n+1) {
     margin-right: 7px;
 
   }
@@ -222,14 +246,16 @@
     align-items: baseline;
   }
 
+  h4 {
+    margin-top: 1em;
+  }
+
   label {
     color: var(--faint, $fallback--faint);
   }
   .opacity-control {
     margin-top: 5px;
-    height: 12px;
+    margin-bottom: 5px;
-    line-height: 12px;
-    font-size: 12px;
   }
 }
 

src/i18n/en.json

@@ -108,6 +108,7 @@
     "follow_import_error": "Error importing followers",
     "follows_imported": "Follows imported! Processing them will take a while.",
     "foreground": "Foreground",
+    "opacity": "Opacity",
     "general": "General",
     "hide_attachments_in_convo": "Hide attachments in conversations",
     "hide_attachments_in_tl": "Hide attachments in timeline",

src/services/color_convert/color_convert.js

@@ -1,7 +1,12 @@
 import { map } from 'lodash'
 
 const rgb2hex = (r, g, b) => {
-  console.log(r)
+  if (r === null || typeof r === 'undefined') {
+    return undefined
+  }
+  if (r[0] === '#') {
+    return r
+  }
   if (typeof r === 'object') {
     ({ r, g, b } = r)
   }

src/services/style_setter/style_setter.js

@@ -70,7 +70,7 @@ const getTextColor = function (bg, text) {
 }
 
 const setColors = (input, commit) => {
-  const { colorRules, radiiRules, col } = generatePreset(input)
+  const { colorRules, radiiRules } = generatePreset(input)
   const head = document.head
   const body = document.body
   body.style.display = 'none'
@@ -86,10 +86,11 @@ const setColors = (input, commit) => {
 
   // commit('setOption', { name: 'colors', value: htmlColors })
   // commit('setOption', { name: 'radii', value: radii })
-  commit('setOption', { name: 'customTheme', value: col })
+  commit('setOption', { name: 'customTheme', value: input })
 }
 
 const generatePreset = (input) => {
+  console.log(input)
   const radii = input.radii || {
     btnRadius: input.btnRadius,
     inputRadius: input.inputRadius,
@@ -116,8 +117,6 @@ const generatePreset = (input) => {
 
   colors.bg = col.bg                         // background
   colors.lightBg = col.lightBg || brightness(5, colors.bg).rgb // hilighted bg
-  console.log(colors.bg)
-  console.log(colors.lightBg)
 
   colors.btn = col.btn || { r: 0, g: 0, b: 0 }
   colors.btnText = getTextColor(colors.btn, colors.text)
@@ -151,8 +150,7 @@ const generatePreset = (input) => {
 
   return {
     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(';'),
+    radiiRules: Object.entries(radii).filter(([k, v]) => v).map(([k, v]) => `--${k}: ${v}px`).join(';')
-    col
   }
 }
 
@@ -162,7 +160,7 @@ const setPreset = (val, commit) => {
     .then((themes) => {
       const theme = themes[val] ? themes[val] : themes['pleroma-dark']
       const bgRgb = hex2rgb(theme[1])
-      const fgRgb = hex2rgb(theme[2])
+      const btnRgb = hex2rgb(theme[2])
       const textRgb = hex2rgb(theme[3])
       const linkRgb = hex2rgb(theme[4])
 
@@ -171,9 +169,9 @@ const setPreset = (val, commit) => {
       const cBlueRgb = hex2rgb(theme[7] || '#0000FF')
       const cOrangeRgb = hex2rgb(theme[8] || '#E3FF00')
 
-      const col = {
+      const colors = {
         bg: bgRgb,
-        fg: fgRgb,
+        btn: btnRgb,
         text: textRgb,
         link: linkRgb,
         cRed: cRedRgb,
@@ -189,7 +187,7 @@ const setPreset = (val, commit) => {
       // load config -> set preset -> wait for styles.json to load ->
       // load persisted state -> set colors -> styles.json loaded -> set colors
       if (!window.themeLoaded) {
-        setColors(col, commit)
+        setColors({ colors }, commit)
       }
     })
 }