Update themeHandler.ts

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

@@ -40,7 +40,7 @@ export class ThemeHandler {
     // Load saved preferences
     const savedTheme = localStorage.getItem(STORAGE_KEY_THEME) || 'christmas'
     const savedMode = localStorage.getItem(STORAGE_KEY_MODE) as DisplayMode | null
-    const savedAmoledPref = localStorage.getItem(STORAGE_KEY_AMOLED)
+    const savedAmoled = localStorage.getItem(STORAGE_KEY_AMOLED) === 'true'
 
     // Set theme
     if (themeRegistry[savedTheme]) {
@@ -49,7 +49,7 @@ export class ThemeHandler {
     }
 
     // Set amoled preference
-    this.amoledEnabled.value = savedAmoledPref === null ? true : savedAmoledPref === 'true'
+    this.amoledEnabled.value = savedAmoled
 
     // Set mode
     if (savedMode) {
@@ -59,7 +59,6 @@ export class ThemeHandler {
       const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
       this.state.value.currentMode = prefersDark ? 'dark' : 'light'
     }
-    
 
     this.applyTheme()
 
@@ -68,9 +67,6 @@ export class ThemeHandler {
       if (!localStorage.getItem(STORAGE_KEY_MODE)) {
         this.state.value.currentMode = e.matches ? 'dark' : 'light'
         this.applyTheme()
-      } 
-	  else {
-        this.applyTheme()
       }
     })
   }
@@ -87,27 +83,22 @@ export class ThemeHandler {
 
   private applyDOMClasses(mode: DisplayMode) {
     const root = document.documentElement
-    
+
     // Remove all mode classes
     root.classList.remove('dark', 'light', 'amoled')
-    
+
     // Add current mode class
     root.classList.add(mode)
-    
+
     // Add amoled class if enabled in dark mode
     if (mode === 'dark' && this.amoledEnabled.value) {
       root.classList.add('amoled')
     }
-    
+
     // Add dark class for backward compatibility with VitePress
     if (mode === 'dark') {
       root.classList.add('dark')
     }
-
-    // Remove amoled class if current mode is not 'dark'
-    if (mode !== 'dark') {
-      root.classList.remove('amoled')
-    }
   }
 
   private applyCSSVariables(colors: ModeColors, theme: Theme) {
@@ -125,7 +116,7 @@ export class ThemeHandler {
     let bgColor = colors.bg
     let bgAltColor = colors.bgAlt
     let bgElvColor = colors.bgElv
-    
+
     if (this.state.value.currentMode === 'dark' && this.amoledEnabled.value) {
       bgColor = '#000000'
       bgAltColor = '#000000'
@@ -282,7 +273,7 @@ export class ThemeHandler {
     this.state.value.theme = themeRegistry[themeName]
     localStorage.setItem(STORAGE_KEY_THEME, themeName)
     this.applyTheme()
-    
+
     // Force re-apply ColorPicker colors if theme doesn't specify brand colors
     this.ensureColorPickerColors()
   }
@@ -295,10 +286,10 @@ export class ThemeHandler {
 
   public toggleMode() {
     const currentMode = this.state.value.currentMode
-    
+
     // Toggle between light and dark
     const newMode: DisplayMode = currentMode === 'light' ? 'dark' : 'light'
-    
+
     this.setMode(newMode)
   }
 
@@ -324,7 +315,7 @@ export class ThemeHandler {
     // If theme doesn't specify brand colors, force ColorPicker to reapply its selection
     const currentMode = this.state.value.currentMode
     const modeColors = this.state.value.theme.modes[currentMode]
-    
+
     if (!modeColors.brand || !modeColors.brand[1]) {
       // Trigger a custom event that ColorPicker can listen to
       if (typeof window !== 'undefined') {
@@ -383,7 +374,7 @@ export function useTheme() {
 
   onMounted(() => {
     // Ensure theme is applied on mount
-    handler.applyTheme()
+    handler.setMode(handler.getMode())
   })
 
   return {