mirror of
https://github.com/fmhy/edit.git
synced 2026-01-12 15:01:06 +11:00
Update themeHandler.ts
This commit is contained in:
parent
65c8ae79e9
commit
06bcc47284
1 changed files with 21 additions and 12 deletions
|
|
@ -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 {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue