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
const savedTheme = localStorage.getItem(STORAGE_KEY_THEME) || 'christmas'
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
if (themeRegistry[savedTheme]) {
@ -49,7 +49,7 @@ export class ThemeHandler {
}
// Set amoled preference
this.amoledEnabled.value = savedAmoled
this.amoledEnabled.value = savedAmoledPref === null ? true : savedAmoledPref === 'true'
// Set mode
if (savedMode) {
@ -60,6 +60,7 @@ export class ThemeHandler {
this.state.value.currentMode = prefersDark ? 'dark' : 'light'
}
this.applyTheme()
// 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)) {
this.state.value.currentMode = e.matches ? 'dark' : 'light'
this.applyTheme()
}
else {
this.applyTheme()
}
})
}
@ -99,6 +103,11 @@ export class ThemeHandler {
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) {
@ -374,7 +383,7 @@ export function useTheme() {
onMounted(() => {
// Ensure theme is applied on mount
handler.setMode(handler.getMode())
handler.applyTheme()
})
return {