라이트 테마 강제 적용 + surface 토큰 + 텍스트 대비 개선

- dark: 클래스를 class 기반으로 전환 (다크모드 비활성화)
- color-scheme: light 강제
- surface 색상 토큰 추가 (카드/패널용)
- 리스트/사이드바 배경 bg-surface로 통일
- 텍스트 대비 강화 (gray-400 → gray-500/700)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
joungmin
2026-03-11 21:30:49 +09:00
parent 50018c17fa
commit 4f8b4f435e
8 changed files with 41 additions and 34 deletions

View File

@@ -1,8 +1,12 @@
@import "tailwindcss";
/* Force light mode: dark: classes only activate with .dark ancestor */
@custom-variant dark (&:is(.dark *));
:root {
--background: #FFFAF5;
--foreground: #171717;
--surface: #FFFFFF;
--brand-50: #FFF8F0;
--brand-100: #FFEDD5;
--brand-200: #FFD6A5;
@@ -14,12 +18,13 @@
--brand-800: #9A4500;
--brand-900: #6B3000;
--brand-950: #3D1A00;
color-scheme: light dark;
color-scheme: light;
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-surface: var(--surface);
--color-brand-50: var(--brand-50);
--color-brand-100: var(--brand-100);
--color-brand-200: var(--brand-200);
@@ -34,12 +39,14 @@
--font-sans: var(--font-pretendard), var(--font-geist), system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
/* Dark mode CSS vars (disabled — activate by adding .dark class to <html>) */
/*
.dark {
--background: #12100E;
--foreground: #ededed;
--surface: #1C1916;
}
*/
body {
background: var(--background);