Accent works

src/App.scss

@@ -198,7 +198,7 @@ input, textarea, .select {
     &:checked + label::before {
       box-shadow: 0px 0px 2px black inset, 0px 0px 0px 4px $fallback--fg inset;
       box-shadow: var(--inputShadow), 0px 0px 0px 4px var(--fg, $fallback--fg) inset;
-      background-color: var(--link, $fallback--link);
+      background-color: var(--accent, $fallback--link);
     }
     &:disabled {
       &,

src/components/color_input/color_input.vue

@@ -18,7 +18,7 @@
       @input="$emit('input', typeof value === 'undefined' ? fallback : undefined)"
     >
     <label
-      v-if="typeof fallback !== 'undefined'"
+      v-if="typeof fallback !== 'undefined' && showOptionalTickbox"
       class="opt-l"
       :for="name + '-o'"
     />
@@ -43,9 +43,43 @@
 
 <script>
 export default {
-  props: [
+  props: {
-    'name', 'label', 'value', 'fallback', 'disabled'
+    // Name of color, used for identifying
-  ],
+    name: {
+      required: true,
+      type: String
+    },
+    // Readable label
+    label: {
+      required: true,
+      type: String
+    },
+    // Color value, should be required but vue cannot tell the difference
+    // between "property missing" and "property set to undefined"
+    value: {
+      required: false,
+      type: String,
+      default: undefined
+    },
+    // Color fallback to use when value is not defeind
+    fallback: {
+      required: false,
+      type: String,
+      default: undefined
+    },
+    // Disable the control
+    disabled: {
+      required: false,
+      type: Boolean,
+      default: false
+    },
+    // Show "optional" tickbox, for when value might become mandatory
+    showOptionalTickbox: {
+      required: false,
+      type: Boolean,
+      default: true
+    }
+  },
   computed: {
     present () {
       return typeof this.value !== 'undefined'

src/components/sticker_picker/sticker_picker.vue

@@ -51,7 +51,7 @@
         img {
           height: 100%;
           &:hover {
-            filter: drop-shadow(0 0 5px var(--link, $fallback--link));
+            filter: drop-shadow(0 0 5px var(--accent, $fallback--link));
           }
         }
       }

src/components/style_switcher/style_switcher.js

@@ -46,7 +46,8 @@ export default {
       keepFonts: false,
 
       textColorLocal: '',
-      linkColorLocal: '',
+      accentColorLocal: undefined,
+      linkColorLocal: undefined,
 
       bgColorLocal: '',
       bgOpacityLocal: undefined,
@@ -132,6 +133,8 @@ export default {
         fgText: this.fgTextColorLocal,
         fgLink: this.fgLinkColorLocal,
 
+        accent: this.accentColorLocal,
+
         panel: this.panelColorLocal,
         panelText: this.panelTextColorLocal,
         panelLink: this.panelLinkColorLocal,

src/components/style_switcher/style_switcher.vue

@@ -114,9 +114,18 @@
               :label="$t('settings.text')"
             />
             <ContrastRatio :contrast="previewContrast.bgText" />
+            <ColorInput
+              v-model="accentColorLocal"
+              name="accentColor"
+              :fallback="previewTheme.colors.link"
+              :showOptionalTickbox="typeof linkColorLocal !== 'undefined'"
+              :label="$t('settings.accent')"
+            />
             <ColorInput
               v-model="linkColorLocal"
               name="linkColor"
+              :fallback="previewTheme.colors.accent"
+              :showOptionalTickbox="typeof accentColorLocal !== 'undefined'"
               :label="$t('settings.links')"
             />
             <ContrastRatio :contrast="previewContrast.bgLink" />
@@ -336,7 +345,7 @@
             <ColorInput
               v-model="faintColorLocal"
               name="faintColor"
-              :fallback="previewTheme.colors.faint || 1"
+              :fallback="previewTheme.colors.faint"
               :label="$t('settings.text')"
             />
             <ColorInput

src/i18n/en.json

@@ -272,6 +272,7 @@
     "follow_import": "Follow import",
     "follow_import_error": "Error importing followers",
     "follows_imported": "Follows imported! Processing them will take a while.",
+    "accent": "Accent",
     "foreground": "Foreground",
     "general": "General",
     "hide_attachments_in_convo": "Hide attachments in conversations",

src/services/style_setter/style_setter.js

@@ -160,7 +160,13 @@ const generateColors = (input) => {
     }
     return acc
   }, {}))
-  const col = Object.entries(input.colors || input).reduce((acc, [k, v]) => {
+
+  const inputColors = input.colors || input
+
+  const compat = input.v3compat || {}
+  const compatColors = compat.colors || {}
+
+  const col = Object.entries({ ...inputColors, ...compatColors }).reduce((acc, [k, v]) => {
     if (typeof v === 'object') {
       acc[k] = v
     } else {
@@ -174,7 +180,10 @@ const generateColors = (input) => {
 
   colors.text = col.text
   colors.lightText = brightness(20 * mod, colors.text).rgb
-  colors.link = col.link
+
+  colors.accent = col.accent || col.link
+  colors.link = col.link || col.accent
+
   colors.faint = col.faint || Object.assign({}, col.text)
 
   colors.bg = col.bg

static/themes/breezy-dark.json

@@ -50,7 +50,7 @@
           "y": "0",
           "blur": 0,
           "spread": "1",
-          "color": "--link",
+          "color": "--accent",
           "alpha": "0.3",
           "inset": true
         },

static/themes/breezy-light.json

@@ -50,7 +50,7 @@
           "y": "0",
           "blur": 0,
           "spread": "1",
-          "color": "--link",
+          "color": "--accent",
           "alpha": "0.3",
           "inset": true
         },