/** * === dark-mode.css — Token overrides + toggle button styles === * * Mô tả: Override 10 base design tokens cho dark mode qua [data-theme="dark"] * selector trên . TẤT CẢ CSS components tự resolve qua var(--token) * — không cần component-level overrides riêng. * * Flow: * 1. html color-scheme + global transition 250ms * 2. [data-theme="dark"] :root → override 10 base tokens + derived glass tokens * 3. Image/logo filter brightness cho dark context * 4. .theme-toggle button style + icon swap logic (moon/sun) * 5. Mobile responsive adjustments cho toggle * * NOTE: Phase 00a Step 5 đã refactor component CSS sang var(--token), * nên dark mode chỉ cần token overrides ở file này. */ /* ========================================================================== GLOBAL TRANSITION — Smooth theme switch (subset props để tránh lag) ========================================================================== */ html { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; } body, .brand-bar, .primary-nav-bar, .site-footer, .section, [class*="section--"], .card, .post-card, .document-row, .doctor-card, .service-card, .archive-filter, input, textarea, select { transition: background-color 250ms ease, color 250ms ease, border-color 250ms ease; } /* ========================================================================== DARK MODE TOKEN OVERRIDES — 10 base + derived glass ========================================================================== */ /** * === Dark token overrides === * * Mô tả: Override toàn bộ 10 base tokens + derived glass tokens sang giá trị * phù hợp cho dark background. Components tự resolve màu qua var(). * * Flow: * 1. Brand colors → lighter tints để contrast trên dark canvas * 2. Canvas/surface → near-black với green tint (brand-coherent) * 3. Ink → inverted scale (light on dark) * 4. Border → white alpha thay vì solid gray * 5. Glass → dark base rgba thay vì white rgba */ [data-theme="dark"] :root { /* === 10 Base Tokens === */ --color-brand-primary: #2E7D5C; --color-brand-secondary: #7FB89A; --color-brand-soft: rgba(126, 184, 154, 0.15); --color-canvas: #0A1410; --color-surface: #121C18; --color-surface-warm: #1A2520; --color-ink-strong: #E8EDE9; --color-ink-default: #B8C2BC; --color-ink-muted: #7A857F; --color-border: rgba(255, 255, 255, 0.10); /* === Glass derived === */ --color-glass-light: rgba(18, 28, 24, 0.85); --color-glass-light-strong: rgba(18, 28, 24, 0.94); --color-glass-dark: rgba(46, 125, 92, 0.30); --color-glass-border: rgba(255, 255, 255, 0.08); } /* ========================================================================== IMAGE + LOGO FILTERS ========================================================================== */ /* Image brightness nhẹ để tránh glare trên dark BG */ [data-theme="dark"] img:not(.brand-bar__logo-img):not(.no-dim) { filter: brightness(0.92); } /* Logo: tăng nhẹ brightness thay vì giảm */ [data-theme="dark"] .brand-bar__logo-img { filter: brightness(1.05); } /* ========================================================================== THEME TOGGLE BUTTON ========================================================================== */ /** * === Theme toggle button === * * Mô tả: Absolute-positioned button trên brand-bar. Hiển thị moon icon (light mode) * hoặc sun icon (dark mode). Hover có subtle highlight. * * Flow: * 1. .brand-bar position: relative (anchor cho absolute toggle) * 2. .theme-toggle: absolute top-center-right * 3. Icon swap: moon hidden khi dark, sun visible khi dark */ .brand-bar { position: relative; } .theme-toggle { position: absolute; top: 50%; right: clamp(8px, 1.2vw, 16px); transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; margin: 0; background: transparent; border: none; border-radius: 50%; color: var(--color-ink-default); cursor: pointer; transition: background 200ms ease, transform 200ms ease, color 200ms ease; flex-shrink: 0; z-index: 10; } .theme-toggle:hover, .theme-toggle:focus-visible { background: var(--color-brand-soft); color: var(--color-brand-primary); transform: translateY(-50%) scale(1.08); outline: none; } .theme-toggle:focus-visible { box-shadow: 0 0 0 3px rgba(46, 125, 92, 0.25); } [data-theme="dark"] .theme-toggle { color: var(--color-ink-strong); } [data-theme="dark"] .theme-toggle:hover, [data-theme="dark"] .theme-toggle:focus-visible { background: rgba(126, 184, 154, 0.12); color: var(--color-brand-secondary); } /* Icon visibility — moon trong light mode, sun trong dark mode */ .theme-toggle__icon--sun { display: none; } .theme-toggle__icon--moon { display: block; } [data-theme="dark"] .theme-toggle__icon--sun { display: block; } [data-theme="dark"] .theme-toggle__icon--moon { display: none; } /* Mobile */ @media (max-width: 768px) { .theme-toggle { width: 36px; height: 36px; right: 8px; } .theme-toggle__icon { width: 18px; height: 18px; } }