/* ================================================================ dark.css — Dark Mode Theme ---------------------------------------------------------------- PURPOSE : Overrides CSS variables when [data-theme="dark"] is applied to . Toggle via js/app.js darkMode(). HOW IT WORKS: Light (default) → variables.css values Dark → these overrides activate via attribute selector ================================================================ */ [data-theme="dark"] { /* ── Backgrounds ───────────────────────────────────────────── */ --bg: #0D1117; --card: #161B22; --border:#30363D; /* ── Text ──────────────────────────────────────────────────── */ --text: #E6EDF3; --text-sub: #9DA7B3; --text-muted: #7E8894; /* was #484F58 — too dim to read; lifted for AA-ish contrast */ /* ── Brand Palette (dark version) ─────────────────────────── */ --brand-900: #F0F6FC; --brand-800: #C9D1D9; --brand-700: #8B949E; --brand-600: #6E7681; --brand-500: #484F58; --brand-400: #30363D; --brand-300: #21262D; --brand-200: #161B22; --brand-100: #0D1117; --brand-50: #010409; /* ── Accent lever — the "blue-*" tokens are THE app accent (tokens.css remaps them to the brand red). Dark theme must follow the SAME accent so the app stays brand-consistent across themes and with the marketing site; a literal blue here was the one place dark mode diverged from the red brand. The --blue-50/100 subtle info tints stay blue (semantic info backgrounds). ── */ --blue-600: var(--accent); --blue-700: var(--accent-deep); --blue-50: #0D2035; --blue-100: #0D2035; /* ── Semantic colours (dark versions) ─────────────────────── */ --green: #3FB950; --green-light: #0D2818; --green-border: #1C4728; --red: #F85149; --red-light: #2D1B1B; --red-border: #3F1F1F; --amber: #D29922; --amber-light: #2D2000; --amber-border: #3F2D00; --purple: #BC8CFF; --purple-light: #1B1040; --purple-border:#2D1B60; /* ── Sidebar (stays darker even in dark mode) ─────────────── */ --sidebar-bg: #010409; --sidebar-hover: #161B22; --sidebar-active: #1F6FEB; --sidebar-text: #6E7681; --sidebar-text-active: #E6EDF3; /* ── Shadows (subtler in dark) ─────────────────────────────── */ --sh-sm: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3); --sh: 0 4px 6px rgba(0,0,0,.4), 0 2px 4px rgba(0,0,0,.3); --sh-md: 0 10px 15px rgba(0,0,0,.5), 0 4px 6px rgba(0,0,0,.3); --sh-lg: 0 20px 25px rgba(0,0,0,.6), 0 8px 10px rgba(0,0,0,.4); } /* ── Dark-mode specific component tweaks ──────────────────── */ [data-theme="dark"] thead tr { background: #1C2128; } [data-theme="dark"] tr:hover td { background: #1C2128; } [data-theme="dark"] .form-group input, [data-theme="dark"] .form-group select, [data-theme="dark"] .form-group textarea { background:#0D1117; color:#E6EDF3; } [data-theme="dark"] .search-small { background:#0D1117; } [data-theme="dark"] .search-small input { color:#E6EDF3; } [data-theme="dark"] .inv-filter-bar input, [data-theme="dark"] .inv-filter-bar select { background:#0D1117; color:#E6EDF3; } [data-theme="dark"] .setting-select { background:#0D1117; color:#E6EDF3; } /* dark colour-scheme → the native dropdown popup renders dark with a light arrow glyph, and the themed option rows (base.css) stay readable instead of light-on-white */ [data-theme="dark"] select { color-scheme: dark; } [data-theme="dark"] .topbar-search { background:#0D1117; } [data-theme="dark"] .topbar-search input { color:#E6EDF3; } [data-theme="dark"] .date-badge { background:#161B22; color:#8B949E; } [data-theme="dark"] .tab-bar { background:#161B22; } [data-theme="dark"] .tab:hover:not(.active) { background:#1C2128; } [data-theme="dark"] .product-tile { background:#1C2128; border-color:#30363D; } [data-theme="dark"] .product-tile:hover { background:#0D2035; } [data-theme="dark"] .modal { background:#161B22; } [data-theme="dark"] .auth-form-wrap { background:#0D1117; } [data-theme="dark"] .form-input { background:#161B22; color:#E6EDF3; border-color:#30363D; } [data-theme="dark"] .form-input:focus { border-color:#58A6FF; } [data-theme="dark"] .btn-outline { background:#161B22; color:#E6EDF3; border-color:#30363D; } [data-theme="dark"] .btn-outline:hover{ background:#1C2128; } [data-theme="dark"] .report-card { background:#161B22; } [data-theme="dark"] .fin-card { background:#161B22; } [data-theme="dark"] .admin-card { background:#161B22; } [data-theme="dark"] .profile-section { background:#161B22; } [data-theme="dark"] .profile-header { background:#161B22; } [data-theme="dark"] .emp-card { background:#161B22; } [data-theme="dark"] .stat-mini { background:#161B22; } [data-theme="dark"] .kpi-card { background:#161B22; } [data-theme="dark"] .chart-card { background:#161B22; } [data-theme="dark"] .table-card { background:#161B22; } [data-theme="dark"] .pos-products { background:#161B22; } [data-theme="dark"] .pos-cart { background:#161B22; } [data-theme="dark"] #topbar { background:#0D1117; border-color:#30363D; } [data-theme="dark"] #toast { background:#E6EDF3; color:#0D1117; } [data-theme="dark"] .rm-card { background:#161B22; } [data-theme="dark"] .rm-formula-row { background:#1C2128; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background:#30363D; } /* ── Badges & trend chips: the base colours are hardcoded for light mode (some with !important), so they stay dark-on-dark. Re-map to bright, readable tints in dark mode. ─────────────────────────────────────────── */ /* dark mode: transparent bg + neutral text; brighter dot colours for contrast */ [data-theme="dark"] .badge { background:transparent !important; color:var(--text-sub) !important; } [data-theme="dark"] .badge::before { background:var(--_dot) !important; } [data-theme="dark"] .badge-green { --_dot:#56D364; } [data-theme="dark"] .badge-blue { --_dot:#79C0FF; } [data-theme="dark"] .badge-amber, [data-theme="dark"] .badge.badge-amber { --_dot:#E3B341; } [data-theme="dark"] .badge-red { --_dot:#FF7B72; } [data-theme="dark"] .badge-purple { --_dot:#D2A8FF; } [data-theme="dark"] .badge-orange { --_dot:#FFA657; } [data-theme="dark"] .badge-gray { --_dot:#8B98A5; } [data-theme="dark"] .trend.up { background:rgba(63,185,80,.16); color:#56D364; } [data-theme="dark"] .trend.down { background:rgba(248,81,73,.16); color:#FF7B72; } /* ── Dark mode: messaging ──────────────────────────────────── */ [data-theme="dark"] .msg-layout { background:#0D1117; border-color:#21262D; } [data-theme="dark"] .msg-sidebar { background:#010409; border-color:#21262D; } [data-theme="dark"] .msg-sidebar-head { border-color:#21262D; } [data-theme="dark"] .msg-contact { border-color:#21262D; } [data-theme="dark"] .msg-contact:hover { background:#161B22; } [data-theme="dark"] .msg-contact.active { background:#1F2937; } [data-theme="dark"] .msg-thread-head { background:#010409; border-color:#21262D; } [data-theme="dark"] .msg-messages { background:#0D1117; } /* Other bubbles need contrast in dark mode */ [data-theme="dark"] .msg-bubble-wrap.other .msg-bubble { background:#21262D; color:#E6EDF3; border-color:#30363D; } /* Compose bar */ [data-theme="dark"] .msg-compose { background:#010409; border-color:#21262D; } [data-theme="dark"] .msg-compose-input { background:#161B22; color:#E6EDF3; border-color:#30363D; } [data-theme="dark"] .msg-compose-input:focus { border-color:#388bfd; } /* Thread head search bar */ [data-theme="dark"] .msg-search-bar { background:#161B22; } /* Cal dark */ [data-theme="dark"] .cal-grid { background:#0D1117; border-color:#21262D; } [data-theme="dark"] .cal-cell { background:#161B22; border-color:#21262D; } [data-theme="dark"] .cal-cell:hover { background:#1C2128; } [data-theme="dark"] .cal-cell.cal-today{ background:#1a2035; } [data-theme="dark"] .cal-grid-head { border-color:#21262D; } [data-theme="dark"] .cal-week-grid { background:#161B22; border-color:#21262D; } [data-theme="dark"] .cal-week-col { border-color:#21262D; } [data-theme="dark"] .cal-week-head { border-color:#21262D; } [data-theme="dark"] .cal-week-head:hover { background:#1C2128; } [data-theme="dark"] .cal-day-view { background:#161B22; border-color:#21262D; } [data-theme="dark"] .cal-day-header { border-color:#21262D; background:#0D1117; } [data-theme="dark"] .cal-day-ev { background:#1C2128; } [data-theme="dark"] .cal-detail-panel { background:#161B22; border-color:#388bfd; } [data-theme="dark"] .cal-detail-head { background:#1a2035; border-color:#21262D; } [data-theme="dark"] .cal-toolbar { color:#E6EDF3; } /* Cal colours slightly brighter in dark mode */ [data-theme="dark"] .cal-leave { background:linear-gradient(100deg,#0d9488cc,#14b8a6cc); } [data-theme="dark"] .cal-order { background:linear-gradient(100deg,#1d4ed8cc,#3b82f6cc); } [data-theme="dark"] .cal-po { background:linear-gradient(100deg,#4f46e5cc,#818cf8cc); } [data-theme="dark"] .cal-pay { background:linear-gradient(100deg,#0369a1cc,#0ea5e9cc); } /* ── Dark mode toggle button ───────────────────────────────── */ .dark-toggle { display: flex; align-items:center; gap:8px; padding: 8px 12px; border-radius: 8px; cursor:pointer; margin: 2px 8px; color: var(--sidebar-text); font-size: 13.5px; font-weight:500; transition: var(--t); } .dark-toggle:hover { background: var(--sidebar-hover); color: var(--brand-300); } .dark-toggle .nav-icon { font-size:17px; width:20px; text-align:center; }