/* ===================================================================== OGNIMOHUB — Dashboard Light/Dark Theme Toggle --------------------------------------------------------------------- Scope: User and Merchant dashboards only (.dashboard:not(.agent-dashboard)). Agent dashboard deliberately excluded — kept light-only, prioritizing operational density/speed over a branded toggle experience (see project discussion: agents are high-volume, repetitive-task users, often on shared/kiosk devices, not the audience a theme toggle serves). Mechanism mirrors the admin panel's own working dark-mode toggle (assets/admin/js/theme.js): a `data-theme` attribute on , persisted via localStorage, defaulting to system preference. This is proven, existing infrastructure in this codebase — not a new pattern. Uses a separate localStorage key (see ognimohub-dashboard-theme.js) so a user's dashboard theme choice never collides with an admin staff member's own admin-panel theme choice on the same browser. Reuses the exact --og-dark-* color tokens already defined in ognimohub-theme.css for the public site — same brand, same values, no need to recompute anything. IMPORTANT — this is a foundation pass, not full coverage: .dashboard, .dashboard-widget, .card, and .form--control all already use the shared token system (--section-bg, --heading-color, --body-color, --border-color), confirmed by inspecting main.css before writing this, so this pass gets those working correctly. Individual dashboard pages (transaction tables, KYC forms, statement views, etc. — there are dozens) may still surface their own hardcoded-color exceptions the same way the public site did across many rounds this session. Expect to fix those as they're found during testing, not assume this one pass covers everything. ===================================================================== */ /* Page canvas: overriding the background-color property directly (rather than just changing what --section-bg resolves to) so the canvas can be a deeper tone than the cards sitting on it. If --section-bg alone were redefined, .dashboard's own background AND every card/input using the same token would all become identical, losing the "elevated surface on a darker canvas" depth entirely. */ [data-theme="dark"] .dashboard:not(.agent-dashboard) { background-color: hsl(var(--og-dark-bg)); --section-bg: var(--og-dark-elevated); --heading-color: var(--og-dark-text); --body-color: var(--og-dark-secondary); --text-color: var(--og-dark-secondary); --border-color: var(--og-dark-border); } /* .dashboard-widget's own --widget-color defaults to --border-color (now dark) with a 10% background tint — already correct via the token flip above, no separate override needed. Verified against main.css before assuming this instead of guessing. */ [data-theme="dark"] .dashboard:not(.agent-dashboard) .card, [data-theme="dark"] .dashboard:not(.agent-dashboard) .custom--card { background-color: hsl(var(--og-dark-elevated)); border-color: hsl(var(--og-dark-border)); } [data-theme="dark"] .dashboard:not(.agent-dashboard) .dropdown-menu { background-color: hsl(var(--og-dark-elevated)); border-color: hsl(var(--og-dark-border)); --bs-dropdown-link-color: hsl(var(--og-dark-text)); --bs-dropdown-link-hover-bg: hsl(var(--og-dark-text) / 0.08); --bs-dropdown-link-hover-color: hsl(var(--og-dark-text)); } [data-theme="dark"] .dashboard:not(.agent-dashboard) .modal-content { background-color: hsl(var(--og-dark-elevated)); } /* ===================================================================== THEME TOGGLE BUTTON ===================================================================== */ .og-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid hsl(var(--border-color)); background: transparent; color: hsl(var(--body-color)); transition: background-color var(--og-dur-hover, 150ms) ease, color var(--og-dur-hover, 150ms) ease; cursor: pointer; } .og-theme-toggle:hover { background: hsl(var(--base) / 0.1); color: hsl(var(--base)); } .og-theme-toggle .og-theme-toggle__dark-icon { display: none; } [data-theme="dark"] .dashboard:not(.agent-dashboard) .og-theme-toggle .og-theme-toggle__light-icon { display: none; } [data-theme="dark"] .dashboard:not(.agent-dashboard) .og-theme-toggle .og-theme-toggle__dark-icon { display: inline-flex; }