Update themeHandler.ts

This commit is contained in:
nbats 2025-12-10 10:13:13 -08:00 committed by GitHub
parent 65c8ae79e9
commit 06bcc47284
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -40,7 +40,7 @@ export class ThemeHandler {
// Load saved preferences // Load saved preferences
const savedTheme = localStorage.getItem(STORAGE_KEY_THEME) || 'christmas' const savedTheme = localStorage.getItem(STORAGE_KEY_THEME) || 'christmas'
const savedMode = localStorage.getItem(STORAGE_KEY_MODE) as DisplayMode | null const savedMode = localStorage.getItem(STORAGE_KEY_MODE) as DisplayMode | null
const savedAmoled = localStorage.getItem(STORAGE_KEY_AMOLED) === 'true' const savedAmoledPref = localStorage.getItem(STORAGE_KEY_AMOLED)
// Set theme // Set theme
if (themeRegistry[savedTheme]) { if (themeRegistry[savedTheme]) {
@ -49,7 +49,7 @@ export class ThemeHandler {
} }
// Set amoled preference // Set amoled preference
this.amoledEnabled.value = savedAmoled this.amoledEnabled.value = savedAmoledPref === null ? true : savedAmoledPref === 'true'
// Set mode // Set mode
if (savedMode) { if (savedMode) {
@ -60,6 +60,7 @@ export class ThemeHandler {
this.state.value.currentMode = prefersDark ? 'dark' : 'light' this.state.value.currentMode = prefersDark ? 'dark' : 'light'
} }
this.applyTheme() this.applyTheme()
// Listen for system theme changes (only if user hasn't set a preference) // Listen for system theme changes (only if user hasn't set a preference)
@ -67,6 +68,9 @@ export class ThemeHandler {
if (!localStorage.getItem(STORAGE_KEY_MODE)) { if (!localStorage.getItem(STORAGE_KEY_MODE)) {
this.state.value.currentMode = e.matches ? 'dark' : 'light' this.state.value.currentMode = e.matches ? 'dark' : 'light'
this.applyTheme() this.applyTheme()
}
else {
this.applyTheme()
} }
}) })
} }
@ -99,6 +103,11 @@ export class ThemeHandler {
if (mode === 'dark') { if (mode === 'dark') {
root.classList.add('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) { private applyCSSVariables(colors: ModeColors, theme: Theme) {
@ -374,7 +383,7 @@ export function useTheme() {
onMounted(() => { onMounted(() => {
// Ensure theme is applied on mount // Ensure theme is applied on mount
handler.setMode(handler.getMode()) handler.applyTheme()
}) })
return { return {