To add dark mode to an HTML app, define your colours as CSS custom properties, override them inside @media (prefers-color-scheme: dark), and declare color-scheme: light dark so form controls and scrollbars match. Android WebView reports the phone's theme to the page, so the app switches automatically when the user changes it.
Key takeaways
- Colour tokens in
:root, overridden in one media query — no duplicated CSS. color-scheme: light darkthemes native inputs, selects and scrollbars too.- Avoid pure black on pure white in dark mode; use #121212-style surfaces.
- A manual toggle should override the system setting and be remembered.
Colour tokens
:root {
color-scheme: light dark;
--bg: #ffffff; --surface: #f4f6fa; --text: #14171f; --muted: #5d6675; --accent: #4f46e5;
}
@media (prefers-color-scheme: dark) {
:root { --bg: #121317; --surface: #1c1e24; --text: #e9eaee; --muted: #9aa1ad; --accent: #8b85ff; }
}
body { background: var(--bg); color: var(--text); }
.card { background: var(--surface); }Generate a matched pair from your brand colours with the dark mode CSS generator.
Does WebView pass the system theme?
Yes, on current Android System WebView versions, provided the app's own theme supports dark mode — which apps targeting recent Android versions do. Test by toggling dark theme in Android's quick settings while the app is open: the page should repaint without reloading.
Android can also apply algorithmic darkening to pages that declare no dark styles. Declaring color-scheme and your own dark palette keeps you in control of the result.
Designing the dark palette
- Use dark grey surfaces (#121212–#1e1e1e), not #000 — pure black makes elevation invisible and causes smearing on some OLED panels while scrolling.
- Desaturate and lighten accent colours; a vivid brand blue on dark grey often fails contrast.
- Express elevation with lighter surfaces instead of shadows.
- Keep body text off-white (#e6e6e6-ish) to reduce glare.
Images and icons
<picture>
<source srcset="img/logo-dark.png" media="(prefers-color-scheme: dark)">
<img src="img/logo.png" alt="Logo">
</picture>For SVG icons use fill="currentColor" so they inherit text colour. Lower photo brightness slightly in dark mode with filter: brightness(.9).
Adding a manual toggle
const saved = localStorage.getItem('theme'); // 'light' | 'dark' | null (system)
if (saved) document.documentElement.dataset.theme = saved;
function setTheme(t) {
if (t === 'system') { localStorage.removeItem('theme'); delete document.documentElement.dataset.theme; }
else { localStorage.setItem('theme', t); document.documentElement.dataset.theme = t; }
}:root[data-theme="dark"] { color-scheme: dark; --bg: #121317; /* …dark tokens… */ }
:root[data-theme="light"] { color-scheme: light; }Run the theme script in the <head> before the stylesheet paints, so there is no flash of the wrong theme on launch.
The status bar
The Android status bar above your page belongs to the app shell, not the page. Choose a theme colour in the builder that works with both your light and dark designs, or run full-screen and draw your own header behind the safe area.
Frequently asked questions
Does prefers-color-scheme work in Android WebView?
Yes. Current Android System WebView versions report the system theme through prefers-color-scheme to apps that support dark mode, and update it live when the user switches.
Should dark mode be pure black?
Usually not. Dark grey surfaces such as #121212 keep depth visible and are easier to read; pure black is an option for an explicit 'OLED' theme.