font overrides + fixes for font component

src/components/font_control/font_control.vue

@@ -84,7 +84,7 @@
           :id="name + '-local-font-switcher'"
           :model-value="modelValue.family"
           class="custom-font"
-          @update:modelValue="$emit('update:modelValue', { ...(modelValue || {}), family: $event.target.value })"
+          @update:modelValue="v => $emit('update:modelValue', { ...(modelValue || {}), family: v })"
         >
           <optgroup
             :label="$t('settings.style.themes3.font.group-builtin')"

src/components/settings_modal/tabs/appearance_tab.js

@@ -151,9 +151,21 @@ const AppearanceTab = {
     ...SharedComputedObject()
   },
   methods: {
+    updateFont (key, value) {
+      console.log(key, value)
+      this.$store.dispatch('setOption', {
+        name: 'theme3hacks',
+        value: {
+          ...this.mergedConfig.theme3hacks,
+          fonts: {
+            ...this.mergedConfig.theme3hacks.fonts,
+            [key]: value
+          }
+        }
+      })
+    },
     isThemeActive (key) {
       const { theme } = this.mergedConfig
-      console.log(key, theme)
       return key === theme
     },
     setTheme (name) {

src/components/settings_modal/tabs/appearance_tab.vue

@@ -73,42 +73,42 @@
           <ul class="setting-list">
             <li>
               <FontControl
-                :model-value="fontsOverride.interface"
+                :model-value="mergedConfig.theme3hacks.fonts.interface"
                 name="ui"
                 :label="$t('settings.style.fonts.components.interface')"
                 :fallback="{ family: 'sans-serif' }"
                 no-inherit="1"
-                @update:modelValue="v => $store.dispatch('setOption', { name: 'fontsOverride', value: { ...fontsOverride, interface: v } })"
+                @update:modelValue="v => updateFont('interface', v)"
               />
             </li>
             <li>
               <FontControl
                 v-if="expertLevel > 0"
-                :model-value="fontsOverride.input"
+                :model-value="mergedConfig.theme3hacks.fonts.input"
                 name="input"
                 :fallback="{ family: 'inherit' }"
                 :label="$t('settings.style.fonts.components.input')"
-                @update:modelValue="v => $store.dispatch('setOption', { name: 'fontsOverride', value: { ...fontsOverride, input: v } })"
+                @update:modelValue="v => updateFont('input', v)"
               />
             </li>
             <li>
               <FontControl
                 v-if="expertLevel > 0"
-                :model-value="fontsOverride.post"
+                :model-value="mergedConfig.theme3hacks.fonts.post"
                 name="post"
                 :fallback="{ family: 'inherit' }"
                 :label="$t('settings.style.fonts.components.post')"
-                @update:modelValue="v => $store.dispatch('setOption', { name: 'fontsOverride', value: { ...fontsOverride, post: v } })"
+                @update:modelValue="v => updateFont('post', v)"
               />
             </li>
             <li>
               <FontControl
                 v-if="expertLevel > 0"
-                :model-value="fontsOverride.postCode"
+                :model-value="mergedConfig.theme3hacks.fonts.monospace"
                 name="postCode"
                 :fallback="{ family: 'monospace' }"
-                :label="$t('settings.style.fonts.components.postCode')"
-                @update:modelValue="v => $store.dispatch('setOption', { name: 'fontsOverride', value: { ...fontsOverride, postCode: v } })"
+                :label="$t('settings.style.fonts.components.monospace')"
+                @update:modelValue="v => updateFont('monospace', v)"
               />
             </li>
           </ul>

src/modules/config.js

@@ -52,7 +52,13 @@ export const defaultState = {
   palette: null, // not used yet, will be used for V3
   theme3hacks: { // Hacks, user overrides that are independent of theme used
     underlay: 'none',
-    badgeColor: null
+    badgeColor: null,
+    fonts: {
+      interface: undefined,
+      input: undefined,
+      post: undefined,
+      monospace: undefined
+    }
   },
 
   hideISP: false,
@@ -147,7 +153,6 @@ export const defaultState = {
   navbarSize: undefined, // instance default
   panelHeaderSize: undefined, // instance default
   forcedRoundness: undefined, // instance default
-  fontsOverride: undefined, // instance default
   navbarColumnStretch: false,
   greentext: undefined, // instance default
   useAtIcon: undefined, // instance default

src/modules/interface.js

@@ -274,6 +274,46 @@ const interfaceMod = {
 
           Object.entries(theme3hacks).forEach(([key, value]) => {
             switch (key) {
+              case 'fonts': {
+                Object.entries(theme3hacks.fonts).forEach(([fontKey, font]) => {
+                  if (!font?.family) return
+                  switch (fontKey) {
+                    case 'interface':
+                      hacks.push({
+                        component: 'Root',
+                        directives: {
+                          '--font': 'generic | ' + font.family
+                        }
+                      })
+                      break
+                    case 'input':
+                      hacks.push({
+                        component: 'Input',
+                        directives: {
+                          '--font': 'generic | ' + font.family
+                        }
+                      })
+                      break
+                    case 'post':
+                      hacks.push({
+                        component: 'RichContent',
+                        directives: {
+                          '--font': 'generic | ' + font.family
+                        }
+                      })
+                      break
+                    case 'monospace':
+                      hacks.push({
+                        component: 'Root',
+                        directives: {
+                          '--monoFont': 'generic | ' + font.family
+                        }
+                      })
+                      break
+                  }
+                })
+                break
+              }
               case 'underlay': {
                 if (value !== 'none') {
                   const newRule = {