feat: 사이드바 브랜드/헤더 타이틀 + 라이트·다크 테마 설정

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