/* Dashboard UI mode overrides (light/dark) */ /* Applied via */ html[data-mode="light"]{ --bg:#f7f7fb; --text:#111827; --muted:#6b7280; --card:#ffffff; --border:#e5e7eb; --link:#2563eb; --linkHover:#1d4ed8; --btn:#111827; --btnText:#ffffff; --focus:rgba(37,99,235,.35); /* Sidebar: switch to a light shell so the whole dashboard actually flips */ --sidebarBg:#ffffff; --sidebarBorder:rgba(17,24,39,.10); --sidebarText:rgba(17,24,39,.70); --sidebarTextStrong:#111827; --sidebarHoverBg:rgba(17,24,39,.06); --sidebarActiveBg:rgba(37,99,235,.12); --sidebarLabel:rgba(17,24,39,.50); } html[data-mode="dark"]{ --bg:#0b1220; --text:#e5e7eb; --muted:#94a3b8; --card:#0f172a; --border:rgba(148,163,184,.22); --link:#60a5fa; --linkHover:#93c5fd; --btn:#2563eb; --btnText:#ffffff; --focus:rgba(96,165,250,.35); /* Sidebar: keep the dark shell (explicit here so themes don't override it) */ --sidebarBg:#0b1220; --sidebarBorder:rgba(148,163,184,.18); --sidebarText:rgba(226,232,240,.86); --sidebarTextStrong:#e2e8f0; --sidebarHoverBg:rgba(148,163,184,.10); --sidebarActiveBg:rgba(255,255,255,.08); --sidebarLabel:rgba(226,232,240,.62); } /* Make the toggle visible even if SVGs get hidden by theme/CSS */ .mode-toggle{ position:relative; overflow:hidden; } .mode-toggle .mode-glyph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:16px; line-height:1; opacity:0; pointer-events:none; } html[data-mode="light"] .mode-toggle .mode-glyph-sun{ opacity:1; } html[data-mode="dark"] .mode-toggle .mode-glyph-moon{ opacity:1; } /* Keep SVG as a nice enhancement; tuck it behind the glyph */ .mode-toggle svg{ opacity:.0; } /* Topbar should also flip with mode */ html[data-mode="light"] .topbar{ background:rgba(247,247,251,.88); } html[data-mode="dark"] .topbar{ background:rgba(11,18,32,.88); border-bottom:1px solid var(--border); } html[data-mode="dark"] .topbar-link:hover{ background:rgba(255,255,255,.06); border-color:var(--border); } /* Sidebar nav icon + text should follow mode (icons were previously hardcoded) */ html[data-mode="light"] .sidebar-nav a, html[data-mode="dark"] .sidebar-nav a{ color:var(--sidebarText) !important; } html[data-mode="light"] .sidebar-nav a .nav-ico, html[data-mode="dark"] .sidebar-nav a .nav-ico{ color:var(--sidebarText) !important; } html[data-mode="light"] .sidebar-nav a:hover, html[data-mode="dark"] .sidebar-nav a:hover{ color:var(--sidebarTextStrong) !important; } html[data-mode="light"] .sidebar-nav a:hover .nav-ico, html[data-mode="dark"] .sidebar-nav a:hover .nav-ico{ color:var(--sidebarTextStrong) !important; } html[data-mode="light"] .sidebar-nav a.active, html[data-mode="dark"] .sidebar-nav a.active{ color:var(--sidebarTextStrong) !important; } html[data-mode="light"] .sidebar-nav a.active .nav-ico, html[data-mode="dark"] .sidebar-nav a.active .nav-ico{ color:var(--sidebarTextStrong) !important; } /* Sidebar nav label (section headings) */ .nav-label{color:var(--sidebarLabel,var(--sidebarText)) !important;} /* Caret/chevron icons for collapsible sidebar sections */ html[data-mode="light"] .nav-chev, html[data-mode="dark"] .nav-chev{ color:var(--sidebarText) !important; } html[data-mode="light"] .nav-parent:hover .nav-chev, html[data-mode="dark"] .nav-parent:hover .nav-chev{ color:var(--sidebarTextStrong) !important; } html[data-mode="light"] .nav-parent.active .nav-chev, html[data-mode="dark"] .nav-parent.active .nav-chev{ color:var(--sidebarTextStrong) !important; } html[data-mode="light"] .nav-chev svg *, html[data-mode="dark"] .nav-chev svg *{ stroke:currentColor !important; } /* Collapsible parent rows in sidebar (not , so need explicit mode colors) */ html[data-mode="light"] .nav-parent, html[data-mode="dark"] .nav-parent{ color:var(--sidebarText) !important; } html[data-mode="light"] .nav-parent:hover, html[data-mode="dark"] .nav-parent:hover{ color:var(--sidebarTextStrong) !important; } html[data-mode="light"] .nav-parent.active, html[data-mode="dark"] .nav-parent.active{ color:var(--sidebarTextStrong) !important; } html[data-mode="light"] .nav-parent .nav-ico, html[data-mode="dark"] .nav-parent .nav-ico{ color:inherit !important; } /* Ensure all sidebar SVG strokes/fills inherit currentColor */ .sidebar-nav .nav-ico svg, .sidebar-nav .nav-chev svg{ color:inherit !important; } .sidebar-nav .nav-ico svg *, .sidebar-nav .nav-chev svg *{ stroke:currentColor !important; }