Forker/fuwari
1
0
Fork 0
mirror of https://github.com/saicaca/fuwari.git synced 2026-01-11 14:52:52 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: light/dark modes switch immediately with the system theme (#95)

Browse Source
This commit is contained in:
xingo xu
2024-06-06 02:20:05 +09:00
committed by GitHub
parent 3f4e7e9f97
commit c3ac8d9728
3 changed files with 62 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/utils/setting-utils.ts
View File

@@ -1,4 +1,5 @@
import {AUTO_MODE, DARK_MODE, DEFAULT_THEME, LIGHT_MODE} from "@constants/constants.ts";
import type { LIGHT_DARK_MODE } from '@/types/config'
export function getDefaultHue(): number {
const fallback = '250'
@@ -20,25 +21,30 @@ export function setHue(hue: number): void {
r.style.setProperty('--hue', hue)
}
export function setTheme(theme: string): void {
localStorage.setItem('theme', theme)
export function applyThemeToDocument(theme: LIGHT_DARK_MODE) {
switch (theme) {
case LIGHT_MODE:
document.documentElement.classList.remove('dark');
document.documentElement.classList.remove('dark')
break
case DARK_MODE:
document.documentElement.classList.add('dark');
document.documentElement.classList.add('dark')
break
case AUTO_MODE:
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.classList.add('dark');
document.documentElement.classList.add('dark')
} else {
document.documentElement.classList.remove('dark');
document.documentElement.classList.remove('dark')
}
break
}
}
export function getStoredTheme(): string {
return localStorage.getItem('theme') || DEFAULT_THEME
}
export function setTheme(theme: LIGHT_DARK_MODE): void {
localStorage.setItem('theme', theme)
applyThemeToDocument(theme)
}
export function getStoredTheme(): LIGHT_DARK_MODE {
return localStorage.getItem('theme') as LIGHT_DARK_MODE || DEFAULT_THEME
}