ByungCheol
75228cbb64
1) 사이드바 상단에 돼지 로고 + '돈돼지 가계부'('메뉴' 텍스트 대체, 데스크톱/모바일 공통)
2) 헤더에서 돼지 로고 제거 → 현재 화면 타이틀 표시(라우트별)
3) 설정에 화면 테마(시스템/라이트/다크) 선택 추가
- base.css: data-theme 기반 수동 다크 + 시스템 설정 폴백
- theme.js 유틸 + ui 스토어 theme 상태, main.js 시작 시 적용(깜빡임 방지)
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
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())
|
|
}
|