/* Dark-mode overrides for custom (non-Metronic) styles. Active ONLY when carries .theme-dark — set server-side from the `theme` cookie and toggled live by themetoggle.js. Loaded after app.css so these win; light mode is left completely untouched. Add further overrides here as hardcoded-light spots in app.css turn up in dark mode. */ /* app.css hardcodes `body { background:#F5F8FA }`, which loads after the Metronic dark bundle and repaints the page white. Restore the Metronic dark *page* background — #151521, which is exactly what the dark bundle sets `body` to. It is intentionally DARKER than the card colour (#1e1e2d, also from the bundle), so cards stand out from the page. (Dashboard widgets had no separation while this was also #1e1e2d — body and cards were the same colour.) */ body.theme-dark { background: #151521; } /* NOTE: DevExtreme widgets are intentionally left on the light theme for now (see themetoggle.js) — their black input text on a white widget stays readable. When DevExtreme dark theming is done properly (server-side dx.dark.css), revisit input text colors here. */ /* --- Auth pages (login / forgot password / recover password) --------------------------------- These views (under _AccountLayout) hardcode `bg-white` on the form card — a theme-independent !important utility, so it stays white in dark mode. That leaves a white island AND hides the dark bundle's now-white `.text-dark` heading/labels (white-on-white). Repaint the card to the Metronic dark surface (#1e1e2d). Scoped to .auth-page so the rest of the app's `bg-white` utilities are untouched. */ body.theme-dark.auth-page .bg-white { background-color: #1e1e2d !important; } /* Browser autofill paints a light box on the username/password inputs regardless of the dark bundle (the light fields seen on a filled login form). Repaint to match `.form-control` (#1e1e2d). */ body.theme-dark.auth-page input:-webkit-autofill, body.theme-dark.auth-page input:-webkit-autofill:hover, body.theme-dark.auth-page input:-webkit-autofill:focus { -webkit-text-fill-color: #cdcdde; -webkit-box-shadow: 0 0 0 1000px #1e1e2d inset; caret-color: #cdcdde; transition: background-color 9999s ease-out 0s; } /* --- ApexCharts in dark mode (dashboard widgets) --------------------------------------------- The dashboard charts (dashboard.js) set no label/legend colours, so ApexCharts falls back to its default dark grey (#373d3f): fine on the light card, near-invisible on the #1e1e2d dark card. Force a readable light grey. Axis labels are SVG (styled via `fill`); the legend is HTML (styled via `color`). Applies to any ApexCharts on a dark page; light mode is untouched. */ body.theme-dark .apexcharts-text, body.theme-dark .apexcharts-text tspan, body.theme-dark .apexcharts-xaxis-label, body.theme-dark .apexcharts-yaxis-label { fill: #b5b5c3 !important; } body.theme-dark .apexcharts-legend-text { color: #b5b5c3 !important; }