Short answer: Dark mode shows your site as light text on a dark background. Most readers with normal vision read better in light mode, so make dark an option, not the default. Follow the visitor’s system setting, add a switch that remembers the choice, and check contrast in both themes.
What research says about dark mode
NN/g reviewed the academic research on dark mode. In people with normal vision, visual performance tends to be better with light mode, while some people with cataract and related disorders may do better with dark mode.
The light mode advantage grows as text gets smaller. In one study, it appeared in simulated night light but not in bright simulated daylight. Another found no difference in tiredness between the two modes.
One study suggests that long reading in light mode may be linked to myopia. web.dev cites research in which all the low vision users interviewed disliked inverted images, while many preferred light text on a dark background.
Should your site offer dark mode?
NN/g doesn’t recommend switching to dark mode by default for a general audience. It does strongly recommend letting people switch to it if they want, for long reading above all.
It also says the option should work on every screen of the site, and that sites should use the operating system’s dark mode setting when one exists.
What a good dark mode does
| Part | What it does | Watch out |
|---|---|---|
| System setting | Opens in the theme the visitor already uses | Read it with prefers-color-scheme (MDN) |
| Switch | Lets people change the theme on any page | Name the button for what it will do, and update the name |
| Saved choice | Keeps the theme across pages and visits | Apply it before the page paints, to avoid a flash (web.dev) |
| Browser parts | Form fields and scroll bars that match the theme | Declare color-scheme (web.dev) |
| Text and photos | Comfortable reading on a dark background | Skip pure white; tone photos down a little (web.dev) |
Parts from web.dev and MDN, read November 4, 2026; the Switch row is our advice.
How to add dark mode to your website
- Start from the visitor’s system setting instead of forcing one theme on everyone.
- When the browser can’t tell, open in light mode.
- Put a switch in the header with a clear name, such as “Switch to dark mode”.
- Save the choice and apply it before the page paints, on every page.
- Declare color-scheme, so form fields and scroll bars follow the theme.
- In dark mode, use an off-white for text and tone photos down a little.
- Check contrast, logos and forms in both themes before you publish.
Our color contrast guide covers the contrast check. Our website color scheme guide covers choosing the colors themselves.
How our own site handles both themes
We read eight of our pages as a visitor on November 4, 2026, first with the system set to light and then to dark. All 16 views opened in the system’s theme, each with a switch named “Switch to dark mode” or “Switch to light mode”.
A script in the page head applies the saved choice before the page paints. After we switched to dark on the home page, the next seven pages we opened stayed dark, also after a reload.
In dark mode our text is a soft gray rather than pure white, and the case study photo on the home page is toned down. The axe checker found no contrast failures on the home page or a guide, in either theme.
We found one gap while writing this guide: our dark pages didn’t declare color-scheme, so the browser kept its own parts light. We added it on November 4, 2026, and all eight dark pages now declare it.
Before you launch dark mode
- The site opens in the visitor’s system theme.
- Every page has a switch with a clear name.
- The choice stays across pages and visits.
- Text and buttons pass contrast in both themes.
- Photos, logos and icons look right on dark.
- Form fields and scroll bars match the theme.
RememberDark mode is a choice, not a default. Follow the visitor’s setting, let them switch on any page, and check everything in both themes.
If you want a site that works in both themes, our web design service can build and check it with you.
Quick answers about dark mode
Is dark mode better for your eyes?
Not for most people. In NN/g’s review of the research, people with normal vision did better with light mode most of the time, and tiredness didn’t differ. Some people with cataract may read better in dark mode, and one study linked long reading in light mode with myopia.
Should my website be dark by default?
NN/g doesn’t recommend dark mode by default for a general audience. Start from the visitor’s own system setting instead, and open in light mode when the browser can’t tell. Then let people switch whenever they want.
How does a website know a visitor wants dark mode?
Through the prefers-color-scheme media feature. MDN explains that it detects whether the user asked for a light or a dark theme, through a setting in their operating system or browser. Your stylesheet can then apply the matching colors.
What does color-scheme do?
It tells the browser which themes your page supports. In dark mode, web.dev explains, the browser can then draw form fields with a dark background and light text. It also adjusts the scroll bars, so the browser’s own parts match your theme.
Do I need to change my photos for dark mode?
Usually a little. Research cited by web.dev found that most people prefer slightly less vibrant and bright images in dark mode, so a light filter on photos helps. Check logos and icons too: a dark logo can disappear on a dark background.
Sources
Read on November 4, 2026. NN/g: Dark Mode vs. Light Mode: Which Is Better? web.dev: prefers-color-scheme: Hello darkness, my old friend. MDN: prefers-color-scheme. Our own case: eight of our pages read in light and dark mode, on November 4, 2026.