Key takeawayAndroid WebViews pass the phone's theme to your site through the
prefers-color-scheme media query (on modern Android and WebView versions, when the app opts in). Add dark styles to your site with that query, give the app a matching dark splash and status bar colour, and avoid relying on algorithmic darkening, which can invert logos and images badly.- Site side
- prefers-color-scheme
- App side
- Dark splash + status bar
- Avoid
- Auto-inverted images
- Also set
- color-scheme meta
Two ways a WebView can go dark
| Method | How | Quality |
|---|---|---|
| Your own dark CSS | @media (prefers-color-scheme: dark) | ✓ Designed, predictable |
| Algorithmic darkening | WebView inverts light pages automatically | Unpredictable on images and brand colours |
Add dark styles to your site
:root { --bg:#fff; --text:#111; color-scheme: light dark; }
@media (prefers-color-scheme: dark) {
:root { --bg:#121212; --text:#eee; }
}
body { background:var(--bg); color:var(--text); }Also add <meta name="color-scheme" content="light dark"> so form controls and scrollbars follow.
Match the native parts
The splash screen, status bar, tab bar and offline screen are native. Set dark variants in the converter, or the app will flash a light splash before a dark page.
Test
Switch the phone to dark mode, then check logos (transparent PNGs with dark text disappear on dark backgrounds), charts, and embedded third-party widgets.
Frequently asked
Do I have to support dark mode?
No, but if you don't, make sure the app doesn't half-darken: set a light theme explicitly so the WebView doesn't apply automatic darkening.