/* ============================================================ * rb.bbs 다크 모드 (opt-in + system preference) * * 두 가지 활성 경로: * 1) 사용자 선택: * 2) 시스템 선호: prefers-color-scheme: dark (단, [data-theme="light"] 명시 시 무시) * * 토큰만 override — 컴포넌트 룰은 _tokens.css 와 style.css 에서 그대로 쓰임. * 배경은 남색 기가 적은 중립 차콜 톤으로 맞춤. * ============================================================ */ /* 1) 사용자 선택 dark */ html[data-theme="dark"] { --rb-primary: #7eb5ff; --rb-primary-strong: #a3ccff; --rb-primary-soft: rgba(126, 181, 255, 0.18); --rb-bg: #151515; --rb-bg-elevated: #1f1f1f; --rb-bg-muted: #292929; --rb-border: rgba(255, 255, 255, 0.10); --rb-border-strong: rgba(255, 255, 255, 0.20); --rb-divider: #363636; --rb-text: #f2f2f2; --rb-text-muted: #b8b8b8; --rb-text-faint: #858585; --rb-text-on-primary: #0c1320; --rb-danger: #ff7373; --rb-warning: #ffc56b; --rb-success: #6dd292; --rb-info: var(--rb-primary); --rb-label-new-bg: #5a2615; --rb-label-new-fg: #ffb39a; --rb-label-hot-bg: #5a4317; --rb-label-hot-fg: #ffd980; --rb-label-noti-bg: rgba(126, 181, 255, 0.18); --rb-label-noti-fg: #cfe4ff; --rb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --rb-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --rb-shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.6); color-scheme: dark; } /* 2) 시스템 선호 — 사용자가 명시적으로 light 로 두지 않은 경우에만 */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { --rb-primary: #7eb5ff; --rb-primary-strong: #a3ccff; --rb-primary-soft: rgba(126, 181, 255, 0.18); --rb-bg: #151515; --rb-bg-elevated: #1f1f1f; --rb-bg-muted: #292929; --rb-border: rgba(255, 255, 255, 0.10); --rb-border-strong: rgba(255, 255, 255, 0.20); --rb-divider: #363636; --rb-text: #f2f2f2; --rb-text-muted: #b8b8b8; --rb-text-faint: #858585; --rb-text-on-primary: #0c1320; --rb-danger: #ff7373; --rb-warning: #ffc56b; --rb-success: #6dd292; --rb-info: var(--rb-primary); --rb-label-new-bg: #5a2615; --rb-label-new-fg: #ffb39a; --rb-label-hot-bg: #5a4317; --rb-label-hot-fg: #ffd980; --rb-label-noti-bg: rgba(126, 181, 255, 0.18); --rb-label-noti-fg: #cfe4ff; --rb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --rb-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --rb-shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.6); color-scheme: dark; } }