Skip to content

add light/auto theme foundation and unify UI styling across pages#16

Merged
hololee merged 8 commits into
mainfrom
feature/theme-light-dark
Feb 14, 2026
Merged

add light/auto theme foundation and unify UI styling across pages#16
hololee merged 8 commits into
mainfrom
feature/theme-light-dark

Conversation

@hololee

@hololee hololee commented Feb 14, 2026

Copy link
Copy Markdown
Owner

배경

main 대비 테마 기능을 확장하고(다크 전용 -> 다크/라이트/자동), 공통 컴포넌트 및 주요 페이지의 스타일 토큰화를 통해 디자인
일관성을 높였습니다.
추가로 폰트를 Inter(영문) / Noto Sans KR(한글)로 통일하고, 서드파티 라이선스 문서를 최신화했습니다.

주요 변경사항

  1. 테마 인프라 추가
  • frontend/src/context/ThemeContext.tsx 신규 추가
  • light | dark | auto 지원
  • localStorage(lyra.theme) 저장/복원
  • 시스템 테마 추적(prefers-color-scheme) 및 resolvedTheme 제공
  1. 초기 렌더링 시 테마 플리커 방지
  • frontend/src/main.tsx에서 초기 html.theme-dark 선적용
  • ThemeProvider를 앱 루트에 연결
  1. 전역 디자인 토큰/폰트 정리
  • frontend/src/index.css
  • 배경/텍스트/보더/오버레이/상태색 토큰화
  • --bg-soft, --bg-elevated 등 공통 토큰 적용
  • 폰트 통일:
    • English: Inter
    • Korean: Noto Sans KR
  1. 공통 UI 컴포넌트 토큰 기반 치환
  • App, Sidebar, Modal, Toast
  • 하드코딩 색상 제거 및 테마 대응
  1. 페이지 단위 테마 대응
  • Dashboard, Provisioning, Settings, Templates, TerminalPage
  • Settings > General에 Theme 선택 UI 추가 (auto/dark/light)
  • 드롭다운, 입력영역, 보조영역 톤 일관화
  1. 서드파티 테마 연동
  • Monaco: resolvedTheme 기반 vs / vs-dark
  • xterm: 정책상 dark 고정 유지
  1. 문서/라이선스 갱신
  • README.md 테마 가이드 + 검증 체크리스트 추가
  • THIRD_PARTY_LICENSES.md i18n 의존성 포함 최신화

@hololee hololee self-assigned this Feb 14, 2026
@hololee hololee merged commit 3397560 into main Feb 14, 2026
1 check passed
@hololee hololee deleted the feature/theme-light-dark branch February 14, 2026 10:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant