How to test your website in dark mode on mobile

Updated October 17, 2026

Many people keep their phone in dark mode all the time, or let it switch automatically at sunset. Your website may or may not change when that happens, and both can be fine. What isn't fine is a half-dark page: dark backgrounds with dark text, a black logo vanishing into a black header, or white form fields glowing in an otherwise dark design. This guide explains how phones handle dark mode on the web and how to test your site in it.

How phones switch to dark mode

On both iOS and Android, dark mode is a system setting (Appearance on iPhone, Dark theme on Android). Browsers pass it to websites through the prefers-color-scheme media query. If your CSS has a prefers-color-scheme: dark block, it applies; if not, the site normally stays exactly as it is in light mode.

There's one important exception: some browsers can darken sites that don't support dark mode themselves. Samsung Internet has a dark mode option that can apply to web pages, and Chromium-based browsers on Android have had automatic darkening options for web content, depending on version and settings. These algorithms invert or adjust colors on their own, and the results vary: photos may be left alone while backgrounds flip, or brand colors may shift. Safari on iPhone doesn't force dark styling onto pages by default.

Why it matters

Dark mode problems are mostly contrast problems. A design that relies on default colors in some places and hard-coded colors in others can end up with dark text on a dark background once the defaults change. Typical trouble spots:

• Text with no explicit color sitting on a container with a hard-coded light or dark background.
• Form fields, buttons and scrollbars that follow the system theme while the page around them doesn't.
• Logos and icons saved as transparent PNG or SVG in black, which disappear on dark backgrounds.
• Embedded widgets (chat, maps, payment forms) styled for light mode only.

If contrast drops below WCAG AA (4.5:1 for normal text, 3:1 for large text) the text is hard to read, which is exactly what our low contrast guide covers in detail.

How MobileCheck checks dark mode

Dark mode is one of the four scenarios MobileCheck runs for every device, next to the normal view, large text and the opened mobile menu. On the same page load, we switch the browser to prefers-color-scheme: dark, take a full-page screenshot, and check:

• Contrast: text below WCAG AA against its actual background is flagged and highlighted.
• Overlapping text: styles that only apply in dark mode can change layout too.

The report also notes whether the site responds to dark mode at all. If it doesn't, the dark screenshot simply shows the page as usual, and that's not counted against you: supporting dark mode is optional. Note that we emulate the standard media query that every browser exposes; browser-specific forced darkening, like Samsung Internet's, uses its own algorithm and isn't reproduced. Apple devices are checked in WebKit and Android devices in Chromium, so engine differences in default form controls do show up.

How to support dark mode properly

Declare which schemes you support

The color-scheme property tells the browser that your page is designed for both schemes, so default backgrounds, form controls and scrollbars follow the theme:

<meta name="color-scheme" content="light dark">

:root { color-scheme: light dark; }

If your site is light-only, say so with color-scheme: light, so built-in controls don't turn dark inside a light page. Declaring a scheme also signals to browsers with automatic darkening that the page handles colors itself; how each browser uses that signal varies, so test the browsers your audience uses.

Use color variables

:root {
  --bg: #ffffff;
  --text: #1a1a1a;
  --muted: #555555;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --text: #ececec;
    --muted: #a8a8a8;
  }
}
body { background: var(--bg); color: var(--text); }

Always set background and text color together. Most dark mode bugs come from setting one and inheriting the other.

Handle logos and images

Swap a dark logo for a light one with <picture>:

<picture>
  <source srcset="/logo-light.svg" media="(prefers-color-scheme: dark)">
  <img src="/logo-dark.svg" alt="Example Co">
</picture>

For inline SVG icons, use fill="currentColor" so they follow the text color. Photos usually don't need changes; very bright images can be toned down slightly with a filter if they feel glaring.

Avoid pure black and pure white

A very dark gray background with off-white text is easier on the eyes than #000 with #fff, and still has plenty of contrast. Check muted text, placeholders and disabled states, which tend to fall below 4.5:1 first.

Rethink shadows and borders

Drop shadows that separate cards from a white page barely show on a dark background. In dark mode, use slightly lighter surface colors for raised elements, or a subtle border, so cards, menus and dialogs remain distinguishable. Brand colors may need a lighter tint too: a saturated dark blue link that works on white can fall below the contrast threshold on a dark gray surface.

How to check the fix

Run the free check and open the dark mode screenshots in the report next to the normal ones. Any contrast problems in dark mode are listed with the elements highlighted. On your own phone you can switch the system appearance and reload the page; on a desktop, browser dev tools can emulate prefers-color-scheme, though device emulation in Chrome uses Chromium even when you pick an iPhone. If your visitors use Samsung phones, also try Samsung Internet's own dark mode on a real device. See testing on Android for more.

Related guides