35 lines
857 B
JavaScript
35 lines
857 B
JavaScript
|
// 테마(라이트/다크/시스템) 적용 — <html data-theme> 속성으로 제어.
|
||
|
|
// light/dark : 명시 적용, system : 속성 제거 → OS prefers-color-scheme 따름
|
||
|
|
const KEY = 'theme'
|
||
|
|
|
||
|
|
export function getStoredTheme() {
|
||
|
|
try {
|
||
|
|
return localStorage.getItem(KEY) || 'system'
|
||
|
|
} catch {
|
||
|
|
return 'system'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export function applyTheme(theme) {
|
||
|
|
const el = document.documentElement
|
||
|
|
if (theme === 'light' || theme === 'dark') {
|
||
|
|
el.setAttribute('data-theme', theme)
|
||
|
|
} else {
|
||
|
|
el.removeAttribute('data-theme') // system
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export function setTheme(theme) {
|
||
|
|
try {
|
||
|
|
localStorage.setItem(KEY, theme)
|
||
|
|
} catch {
|
||
|
|
/* 저장 실패 무시 */
|
||
|
|
}
|
||
|
|
applyTheme(theme)
|
||
|
|
}
|
||
|
|
|
||
|
|
// 앱 시작 시 저장값 즉시 적용 (마운트 전 호출 → 깜빡임 방지)
|
||
|
|
export function initTheme() {
|
||
|
|
applyTheme(getStoredTheme())
|
||
|
|
}
|