diff --git a/docs/.vitepress/theme/themes/themeHandler.ts b/docs/.vitepress/theme/themes/themeHandler.ts index f55d81c53..6fcd6d3c6 100644 --- a/docs/.vitepress/theme/themes/themeHandler.ts +++ b/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 {