From 84fb568e962343055f9ef3a71d3f0db8367035a5 Mon Sep 17 00:00:00 2001 From: Hyemin Lee Date: Wed, 17 Jun 2026 14:25:43 +0900 Subject: [PATCH] feat: dark mode toggle MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - [data-theme=dark] 팔레트 토큰 오버라이드 → 컴포넌트 자동 적용 - 네비에 테마 토글(달/해 아이콘), localStorage 저장 + OS 선호 감지 - FOUC 방지용 head 인라인 스크립트로 페인트 전 테마 설정 - 기본은 라이트(design-ref: 다크는 기본 캔버스로 쓰지 않음), 토글 옵션 제공 Co-Authored-By: Claude Opus 4.8 (1M context) --- app/static/app.css | 83 +++++++++++++++++++++++++++++++++++++++++ app/templates/base.html | 37 ++++++++++++++++++ 2 files changed, 120 insertions(+) diff --git a/app/static/app.css b/app/static/app.css index b9171ae..cb77524 100644 --- a/app/static/app.css +++ b/app/static/app.css @@ -63,6 +63,55 @@ --pico-card-background-color: var(--bg); --pico-card-border-color: var(--border); --pico-card-box-shadow: 0 1px 3px rgba(25, 31, 40, 0.04); + color-scheme: light; +} + +/* 다크 테마 — 토큰만 교체하면 컴포넌트는 자동으로 따라온다. + design-ref 는 다크를 기본으로 쓰지 말라 하므로 토글 옵션으로만 제공. */ +[data-theme="dark"] { + color-scheme: dark; + --bg: #1b1d23; + --bg-alt: #131419; + --surface: #262a33; + --surface-2: #1e2b44; + --text: #eceef2; + --text-secondary: #c3c9d2; + --text-muted: #8b95a1; + --text-dim: #6b7480; + --border: #2b2f39; + --border-strong: #3a404c; + --accent: #4d94ff; + --accent-hover: #6aa6ff; + --accent-deep: #2f6fd0; + --accent-soft: #1e2b44; + --success-text: #2ee0a8; + --warning-text: #ffb454; + --danger: #ff6b78; + + --pico-background-color: var(--bg-alt); + --pico-color: var(--text-secondary); + --pico-h1-color: var(--text); + --pico-h2-color: var(--text); + --pico-h3-color: var(--text); + --pico-muted-color: var(--text-muted); + --pico-primary: #ffffff; + --pico-primary-background: var(--accent); + --pico-primary-hover-background: var(--accent-hover); + --pico-primary-border: var(--accent); + --pico-primary-hover-border: var(--accent-hover); + --pico-card-background-color: var(--bg); + --pico-card-border-color: var(--border); + --pico-card-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); + --pico-form-element-background-color: var(--surface); + --pico-form-element-border-color: var(--border); + --pico-form-element-color: var(--text); + --pico-progress-background-color: var(--surface); +} + +body { + transition: + background-color 0.15s ease, + color 0.15s ease; } body { @@ -105,6 +154,40 @@ section { .app-nav .container { max-width: 1040px; padding-block: 18px; + display: flex; + align-items: center; + justify-content: space-between; +} + +/* 테마 토글 (아이콘 버튼) */ +.theme-toggle { + --pico-background-color: transparent; + --pico-border-color: var(--border-strong); + --pico-color: var(--text-secondary); + width: auto; + margin: 0; + padding: 7px 9px; + line-height: 0; +} +.theme-toggle:hover { + --pico-background-color: var(--bg-alt); + --pico-border-color: var(--text-dim); +} +.theme-toggle .icon { + width: 18px; + height: 18px; +} +.theme-toggle .sun { + display: none; +} +.theme-toggle .moon { + display: inline-block; +} +[data-theme="dark"] .theme-toggle .moon { + display: none; +} +[data-theme="dark"] .theme-toggle .sun { + display: inline-block; } .app-nav .brand { margin: 0; diff --git a/app/templates/base.html b/app/templates/base.html index 6e0cefe..0b924a4 100644 --- a/app/templates/base.html +++ b/app/templates/base.html @@ -3,6 +3,19 @@ + + {% block title %}Pulp 패치 관리 콘솔{% endblock %} @@ -14,10 +27,34 @@
{% block content %}{% endblock %}
+