/* * NitWebmail — Shared Theme System * Nusite IT Consulting Limited * * Supports: system preference (prefers-color-scheme) * + manual override via [data-theme="light"|"dark"] on * * Usage: before page styles */ /* ── DARK THEME (default) ───────────────────────────────── */ :root, [data-theme="dark"] { --bg: #0d1117; --surface: #161b22; --surface2: #1c2330; --surface3: #222a38; --border: #21262d; --border2: #30363d; --accent: #1a8fe3; --accent-hover: #1580cc; --accent-dim: rgba(26, 143, 227, 0.12); --accent-glow: rgba(26, 143, 227, 0.30); --accent2: #00d4aa; --accent2-dim: rgba(0, 212, 170, 0.12); --text: #e6edf3; --text2: #c9d1d9; --muted: #7d8590; --muted2: #484f58; --danger: #f85149; --danger-dim: rgba(248, 81, 73, 0.12); --warning: #d29922; --warning-dim: rgba(210, 153, 34, 0.12); --success: #00d4aa; --shadow-sm: 0 1px 4px rgba(0,0,0,0.4); --shadow-md: 0 4px 16px rgba(0,0,0,0.5); --shadow-lg: 0 12px 40px rgba(0,0,0,0.6); --shadow-accent: 0 4px 20px rgba(26,143,227,0.30); --grid-line: rgba(255,255,255,0.04); --orb-color: rgba(26,143,227,0.18); color-scheme: dark; } /* ── LIGHT THEME ────────────────────────────────────────── */ [data-theme="light"], @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg: #f4f6f9; --surface: #ffffff; --surface2: #f0f2f5; --surface3: #e8eaed; --border: #dde1e7; --border2: #c8cdd5; --accent: #1278c8; --accent-hover: #0f6ab0; --accent-dim: rgba(18, 120, 200, 0.10); --accent-glow: rgba(18, 120, 200, 0.20); --accent2: #00a887; --accent2-dim: rgba(0, 168, 135, 0.10); --text: #1a1f2e; --text2: #3d4452; --muted: #6b7280; --muted2: #9ca3af; --danger: #dc2626; --danger-dim: rgba(220, 38, 38, 0.08); --warning: #b45309; --warning-dim: rgba(180, 83, 9, 0.10); --success: #00a887; --shadow-sm: 0 1px 4px rgba(0,0,0,0.08); --shadow-md: 0 4px 16px rgba(0,0,0,0.10); --shadow-lg: 0 12px 40px rgba(0,0,0,0.14); --shadow-accent: 0 4px 20px rgba(18,120,200,0.20); --grid-line: rgba(0,0,0,0.05); --orb-color: rgba(18,120,200,0.10); color-scheme: light; } } [data-theme="light"] { --bg: #f4f6f9; --surface: #ffffff; --surface2: #f0f2f5; --surface3: #e8eaed; --border: #dde1e7; --border2: #c8cdd5; --accent: #1278c8; --accent-hover: #0f6ab0; --accent-dim: rgba(18, 120, 200, 0.10); --accent-glow: rgba(18, 120, 200, 0.20); --accent2: #00a887; --accent2-dim: rgba(0, 168, 135, 0.10); --text: #1a1f2e; --text2: #3d4452; --muted: #6b7280; --muted2: #9ca3af; --danger: #dc2626; --danger-dim: rgba(220, 38, 38, 0.08); --warning: #b45309; --warning-dim: rgba(180, 83, 9, 0.10); --success: #00a887; --shadow-sm: 0 1px 4px rgba(0,0,0,0.08); --shadow-md: 0 4px 16px rgba(0,0,0,0.10); --shadow-lg: 0 12px 40px rgba(0,0,0,0.14); --shadow-accent: 0 4px 20px rgba(18,120,200,0.20); --grid-line: rgba(0,0,0,0.05); --orb-color: rgba(18,120,200,0.10); color-scheme: light; } /* ── GLOBAL RESETS & BASE ───────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { /* Smooth theme transitions — only on color properties */ transition: background-color 0.25s ease, color 0.25s ease; } body { background: var(--bg); color: var(--text); font-family: 'DM Sans', sans-serif; -webkit-font-smoothing: antialiased; } /* Scrollbars */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--muted2); } /* ── THEME TOGGLE BUTTON (shared component) ─────────────── */ .theme-toggle { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface2); color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s, border-color 0.15s; flex-shrink: 0; } .theme-toggle:hover { background: var(--surface3); color: var(--text); border-color: var(--border2); } /* Show correct icon based on active theme */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="light"] .theme-toggle .icon-sun { display: block; } [data-theme="light"] .theme-toggle .icon-moon { display: none; } /* ── SMOOTH TRANSITIONS for themed elements ─────────────── */ .topbar, .sidebar, .email-list, .email-view, .card, .modal-overlay, .left-panel, .right-panel, .form-card, .nav-item, .email-item, .compose-modal, input, select, textarea, button { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }