Fix for preset themes not saving (#4465)

* shitty (probably not working) fix for preset themes

* tf

* i saved theme data locally fuck

* 99% chance this wont work

* make default christmas

docs/.vitepress/theme/components/ColorPicker.vue

@@ -8,7 +8,7 @@ import type { Theme } from '../themes/types'
 import Switch from './Switch.vue'
 
 type ColorNames = keyof typeof colors
-const selectedColor = useStorage<ColorNames>('preferred-color', 'swarm')
+const selectedColor = useStorage<ColorNames>('preferred-color', 'christmas')
 
 // Use the theme system
 const { amoledEnabled, setAmoledEnabled, setTheme, state, mode, themeName } = useTheme()
@@ -196,7 +196,13 @@ const normalizeColorName = (colorName: string) =>
   colorName.slice(1).replaceAll(/-/g, ' ')
 
 onMounted(async () => {
-  // Don't auto-apply color theme - only apply when user explicitly selects
+  // apply saved theme on load
+  if (selectedColor.value) {
+    const theme = generateThemeFromColor(selectedColor.value)
+    themeRegistry[`color-${selectedColor.value}`] = theme
+    await nextTick()
+    setTheme(`color-${selectedColor.value}`)
+  }
   // Wait for next tick to ensure theme handler is fully initialized
   await nextTick()
 })

docs/.vitepress/theme/themes/themeHandler.ts

@@ -21,6 +21,7 @@ import { themeRegistry } from './configs'
 const STORAGE_KEY_THEME = 'vitepress-theme-name'
 const STORAGE_KEY_MODE = 'vitepress-display-mode'
 const STORAGE_KEY_AMOLED = 'vitepress-amoled-enabled'
+const STORAGE_KEY_THEME_DATA = 'vitepress-theme-data'
 
 export class ThemeHandler {
   private state = ref<ThemeState>({
@@ -42,7 +43,6 @@ export class ThemeHandler {
     const savedMode = localStorage.getItem(STORAGE_KEY_MODE) as DisplayMode | null
     const savedAmoled = localStorage.getItem(STORAGE_KEY_AMOLED) === 'true'
 
-    // Set theme
     if (themeRegistry[savedTheme]) {
       this.state.value.currentTheme = savedTheme
       this.state.value.theme = themeRegistry[savedTheme]
@@ -74,7 +74,7 @@ export class ThemeHandler {
     })
   }
 
-  private applyTheme() {
+  public applyTheme() {
     if (typeof document === 'undefined') return
 
     const { currentMode, theme } = this.state.value
@@ -390,4 +390,4 @@ export function useTheme() {
     toggleAmoled: () => handler.toggleAmoled(),
     state
   }
-}
+}