fixed fonts (post fonts seem to be broken in develop)

src/stores/interface.js

@@ -598,8 +598,9 @@ export const useInterfaceStore = defineStore('interface', {
       this.themeApplied = true
     },
     async applyTheme({ recompile = false } = {}) {
-      const { forceThemeRecompilation, themeDebug, theme3hacks } =
-        useSyncConfigStore().mergedConfig
+      const { mergedConfig } = useSyncConfigStore()
+      const { forceThemeRecompilation, themeDebug } = mergedConfig
+
       this.themeChangeInProgress = true
       // If we're not forced to recompile try using
       // cache (tryLoadCache return true if load successful)
@@ -646,68 +647,41 @@ export const useInterfaceStore = defineStore('interface', {
           convertTheme2To3(normalizeThemeData(this.themeDataUsed))
         const hacks = []
 
-        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 = {
-                  component: 'Underlay',
-                  directives: {},
-                }
-                if (value === 'opaque') {
-                  newRule.directives.opacity = 1
-                  newRule.directives.background = '--wallpaper'
-                }
-                if (value === 'transparent') {
-                  newRule.directives.opacity = 0
-                }
-                hacks.push(newRule)
-              }
-              break
-            }
+        const fontMap = {
+          Interface: 'Root',
+          Input: 'Input',
+          Posts: 'RichContent',
+          Monospace: 'Root',
+        }
+
+        Object.entries(fontMap).forEach(([font, component]) => {
+          const family = mergedConfig[`font${font}`]?.family
+          const variable = font === 'Monospace' ? '--monoFont' : '--font'
+          if (family) {
+            hacks.push({
+              component,
+              directives: {
+                [variable]: `generic | "${family}"`,
+              },
+            })
           }
         })
 
+        if (mergedConfig.underlay !== 'none') {
+          const newRule = {
+            component: 'Underlay',
+            directives: {},
+          }
+          if (mergedConfig.underlay === 'opaque') {
+            newRule.directives.opacity = 1
+            newRule.directives.background = '--wallpaper'
+          }
+          if (mergedConfig.underlay === 'transparent') {
+            newRule.directives.opacity = 0
+          }
+          hacks.push(newRule)
+        }
+
         const rulesetArray = [
           theme2ruleset,
           this.styleDataUsed,
@@ -724,6 +698,7 @@ export const useInterfaceStore = defineStore('interface', {
           themeDebug,
         )
       } catch (e) {
+        console.error(e)
         window.splashError(e)
       }
     },

src/stores/sync_config.js

@@ -28,7 +28,7 @@ import {
   instanceDefaultConfig,
   LOCAL_ONLY_KEYS,
 } from 'src/modules/default_config_state.js'
-import { defaultConfigSync } from 'src/modules/old_default_config_state.js'
+import { oldDefaultConfigSync } from 'src/modules/old_default_config_state.js'
 
 export const VERSION = 2
 export const NEW_USER_DATE = new Date('2026-03-16') // date of writing this, basically
@@ -628,7 +628,7 @@ export const useSyncConfigStore = defineStore('sync_config', {
       const migratedEntries = new Set(vuexState.config._syncMigration ?? [])
       console.debug(`Already migrated Values: ${[...migratedEntries].join()}`)
 
-      Object.entries(defaultConfigSync).forEach(([key, value]) => {
+      Object.entries(oldDefaultConfigSync).forEach(([key, value]) => {
         const oldValue = vuexState.config[key]
         const defaultValue = value
 
@@ -638,7 +638,30 @@ export const useSyncConfigStore = defineStore('sync_config', {
 
         if (present && !migrated && different) {
           console.debug(`Migrating config ${key}: ${oldValue}`)
-          this.setPreference({ path: `simple.${key}`, oldValue })
+          if (key === 'theme3hacks') {
+            useLocalConfigStore().set({
+              path: 'fontInterface',
+              value: oldValue.fonts.interface,
+            })
+            useLocalConfigStore().set({
+              path: 'fontInput',
+              value: oldValue.fonts.input,
+            })
+            useLocalConfigStore().set({
+              path: 'fontPost',
+              value: oldValue.fonts.post,
+            })
+            useLocalConfigStore().set({
+              path: 'fontMonospace',
+              value: oldValue.fonts.monospace,
+            })
+            useLocalConfigStore().set({
+              path: 'underlay',
+              value: oldValue.underlay,
+            })
+          } else {
+            this.setPreference({ path: `simple.${key}`, value: oldValue })
+          }
           migratedEntries.add(key)
           needUpload = true
         }
@@ -705,8 +728,7 @@ export const useSyncConfigStore = defineStore('sync_config', {
       if (!needPush) return
       this.updateCache({ username: window.vuex.state.users.currentUser.fqn })
       const params = { pleroma_settings_store: { 'pleroma-fe': this.cache } }
-      window.vuex.state.api.backendInteractor
-        .updateProfileJSON({ params })
+      window.vuex.state.api.backendInteractor.updateProfileJSON({ params })
     },
   },
   getters: {