/* ═══════════════════════════════════════════════════════ thejarr — Dark Theme Applied via [data-theme="dark"] on . Also respects prefers-color-scheme when no explicit preference has been set by the user. ═══════════════════════════════════════════════════════ */ /* ── Shared dark values ─────────────────────────────── */ [data-theme="dark"] { /* ── Text ───────────────────────────────────────── */ --ink: #f0f0f0; --ink-soft: #a8a8b3; --ink-muted: #5a5a68; /* ── Backgrounds ────────────────────────────────── */ --canvas: #0d1117; --white: #161b26; --nav-bg: rgba(13,17,23,0.92); --nav-mobile-bg: rgba(13,17,23,0.98); --surface-inverse: #1a2030; /* ── Accent — unchanged ──────────────────────────── */ --amber: #f5a623; --amber-deep: #d4831a; --amber-pale: rgba(245,166,35,0.12); --amber-glow: rgba(245,166,35,0.15); --accent-border: rgba(245,166,35,0.35); --green: #10b981; /* ── Borders ─────────────────────────────────────── */ --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.16); /* ── Shadows ─────────────────────────────────────── */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 4px 16px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3); --shadow-lg: 0 16px 48px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.4); } /* ── WhatsApp pill ──────────────────────────────────── */ [data-theme="dark"] .wa-pill { background: rgba(34,197,94,0.08); color: #86efac; border-color: rgba(34,197,94,0.18); } /* ── Phone mockup — dark WhatsApp palette ───────────── */ [data-theme="dark"] .phone-status-bar { background: #1f2c34; } [data-theme="dark"] .phone-header { background: #1f2c34; } [data-theme="dark"] .phone-screen { background: #0d1821; } [data-theme="dark"] .phone-input-bar { background: #1a2a35; } [data-theme="dark"] .phone-input-field { background: #2a3a45; color: #6a8a9a; } [data-theme="dark"] .phone-home-indicator { background: #0d1821; } [data-theme="dark"] .bubble-in { background: #202c33; color: #e9edef; } [data-theme="dark"] .bubble-out { background: #005c4b; color: #e9edef; } [data-theme="dark"] .bubble-time { color: rgba(255,255,255,0.45); } /* ── System preference (when no explicit toggle set) ── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .phone-status-bar { background: #1f2c34; } :root:not([data-theme="light"]) .phone-header { background: #1f2c34; } :root:not([data-theme="light"]) .phone-screen { background: #0d1821; } :root:not([data-theme="light"]) .phone-input-bar { background: #1a2a35; } :root:not([data-theme="light"]) .phone-input-field { background: #2a3a45; color: #6a8a9a; } :root:not([data-theme="light"]) .phone-home-indicator { background: #0d1821; } :root:not([data-theme="light"]) .bubble-in { background: #202c33; color: #e9edef; } :root:not([data-theme="light"]) .bubble-out { background: #005c4b; color: #e9edef; } :root:not([data-theme="light"]) .bubble-time { color: rgba(255,255,255,0.45); } :root:not([data-theme="light"]) .wa-pill { background: rgba(34,197,94,0.08); color: #86efac; border-color: rgba(34,197,94,0.18); } :root:not([data-theme="light"]) { --ink: #f0f0f0; --ink-soft: #a8a8b3; --ink-muted: #5a5a68; --canvas: #0d1117; --white: #161b26; --nav-bg: rgba(13,17,23,0.92); --nav-mobile-bg: rgba(13,17,23,0.98); --surface-inverse: #1a2030; --amber: #f5a623; --amber-deep: #d4831a; --amber-pale: rgba(245,166,35,0.12); --amber-glow: rgba(245,166,35,0.15); --accent-border: rgba(245,166,35,0.35); --green: #10b981; --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.16); --shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 4px 16px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3); --shadow-lg: 0 16px 48px rgba(0,0,0,0.6), 0 4px 12px rgba(0,0,0,0.4); } }