What Is Dark Mode?
Dark mode is a color scheme that displays light text and elements on a dark background, the reverse of the traditional dark-on-light layout. Websites and apps offer it to reduce glare in low light, save battery on OLED screens, and suit user preference. Modern sites detect the visitor's system setting automatically and can also offer a manual toggle. Implementing it well means designing a second, coordinated color palette, not just inverting colors, and testing both modes. Done carelessly, dark mode produces muddy contrast, harsh pure-black backgrounds, and washed-out images.
- What it is
- A light-on-dark color scheme, the inverse of standard dark-on-light
- Main benefits
- Less glare in low light, battery savings on OLED, user preference
- Auto-detection
- Detected with the CSS prefers-color-scheme media query (MDN)
- Design note
- Use dark grey, not pure black, and re-check contrast in both modes (WCAG 2.2)
- Best practice
- Design a coordinated dark palette rather than simply inverting colors
What dark mode is #
Dark mode is a display option that shows content as light text and elements on a dark background, reversing the conventional black-text-on-white layout most sites use by default. It became widespread after major operating systems and apps added system-level dark themes, and today many users expect the option. On a well-designed site, dark mode is not simply the light theme with its colors flipped; it is a deliberately crafted second palette where backgrounds, text, borders, shadows, and imagery are all tuned to read well against darkness. Modern browsers let a site detect whether the visitor's device is set to dark mode and switch automatically, and many sites also provide a manual toggle so users can override that. When executed thoughtfully, dark mode feels comfortable and modern; when rushed, it produces harsh contrast, unreadable text, and glaring images. Building a coherent second theme is a real design task, and it is part of how we plan color systems on our /services/ui-ux-design page rather than an afterthought.
Why offer dark mode #
There are several genuine reasons to offer dark mode. In low-light environments, a bright white screen can be harsh and glaring, while a dark interface is easier on the eyes, which is why many people prefer it at night or in dim rooms. On phones and laptops with OLED or AMOLED displays, dark backgrounds light up fewer pixels and can meaningfully reduce battery consumption. Beyond function, many users simply prefer the look and feel of a dark interface and appreciate being given the choice, which signals that a product respects their preferences. For some content, media galleries, code editors, video platforms, a dark surround also makes the content itself stand out. That said, dark mode is not universally better; some people, including those with certain vision conditions, read light-on-dark less comfortably, so the goal is choice, not forcing one scheme. Offering a respectful, well-built option contributes to the inclusive experience we prioritize on our /services/ada-compliance page, where accommodating preferences matters.
Detecting and toggling the mode #
Two mechanisms let a site honor dark mode. The first is automatic detection: the CSS prefers-color-scheme media query reads whether the visitor's operating system is set to light or dark and applies the matching theme without any action from the user (MDN). This is the baseline expectation now, respecting the choice people have already made at the device level. The second is a manual toggle, a switch on the page that lets users override the system setting for that site specifically, with their choice remembered on return via local storage. The best experiences combine both: default to the system preference, but let users change it. Building the toggle well means it is keyboard-accessible, clearly labeled, and persistent across pages and visits. Handling both the automatic and manual paths, and remembering the user's decision, is the kind of front-end state management our developers implement routinely when building interactive features on our /services/web-app-development page, so the mode behaves predictably everywhere.
Implementing dark mode in CSS #
The cleanest modern approach defines colors as CSS custom properties and swaps their values for dark mode, driven by prefers-color-scheme and optionally a manual class. Here is a compact pattern.
/* Light theme defaults */
:root {
--bg: #ffffff;
--text: #1a1a1a;
--card: #f4f4f5;
}
/* Follow the system setting automatically */
@media (prefers-color-scheme: dark) {
:root {
--bg: #121212; /* dark grey, not pure black */
--text: #e8e8e8;
--card: #1e1e1e;
}
}
/* Manual override via a class on <html> */
:root[data-theme='dark'] {
--bg: #121212;
--text: #e8e8e8;
--card: #1e1e1e;
}
body { background: var(--bg); color: var(--text); }Design pitfalls to avoid #
Dark mode is easy to do badly, and a handful of pitfalls account for most failures. The biggest is using pure black, hex #000000, for backgrounds; it creates harsh, high-contrast edges that can cause eye strain and make text seem to vibrate. Designers instead use a very dark grey, which is softer and lets subtle shadows and layering remain visible. Another common error is simply inverting the light palette, which produces muddy, off-balance colors, because a color that works on white rarely works on dark without adjustment. Contrast also needs rechecking: text and accents that passed on a light background may fail on a dark one, or become uncomfortably bright and glaring (WCAG 2.2). Images and logos designed for light backgrounds can look boxed-in or washed out and may need dark variants or transparency. Handling all this correctly is a design discipline in itself, and it is part of the thorough theme work we deliver on our /services/web-design page.
Handling images, shadows, and brand color #
Beyond text and backgrounds, several elements need special care in dark mode. Photographs often appear too bright against a dark surround, so some sites slightly dim images in dark mode to soften them. Logos and illustrations created for light backgrounds may show an ugly white box or vanish into the dark, so transparent or dark-optimized versions are needed. Shadows, which imply depth by darkening areas, barely register on a dark background, so dark themes often lean on subtle lighter borders or elevated surface colors to convey layering instead. Brand colors that pop on white can feel overly saturated and harsh on dark, so they are frequently softened or lightened for the dark palette while keeping brand recognition intact. Getting these coordinated so the brand still feels like itself in both modes is a real branding exercise, not a technical toggle, and it connects to the identity work on our /services/branding-design page, where consistency across contexts protects how a brand is perceived.
Common dark mode mistakes #
The recurring mistakes with dark mode are worth calling out plainly. Using pure black backgrounds instead of dark grey tops the list, followed by lazily inverting the light theme rather than designing a proper dark palette. Many sites forget to recheck contrast, leaving text too dim to read or accent colors so bright they glare. Others neglect images and logos, which end up washed out or boxed in white. Some offer a toggle but fail to remember the user's choice, resetting on every page. A frequent oversight is ignoring the automatic prefers-color-scheme setting entirely, so users who prefer dark get a blast of white regardless. And a few sites apply dark mode inconsistently, styling some components but not others, leaving a jarring mix. Each undercuts the comfort dark mode is meant to provide. Catching these inconsistencies across a real site is exactly the sort of review we perform, and you can start with a free assessment at /free-website-audit.
Dark mode, SEO, and testing #
Dark mode has no direct effect on search rankings, since Google indexes your content and structure, not the color scheme a visitor happens to see. What it can affect indirectly is user-experience signals: a comfortable, well-built dark theme may keep some visitors engaged longer, while a broken one that renders text unreadable will drive them away. The practical work is in testing. Check both themes on real devices, verify text and interface contrast in each, confirm images and logos look right, and make sure the toggle and the automatic system preference both behave and persist correctly. Watch for elements that were only styled for light mode and slip through with white backgrounds or invisible text. Test with the system set to dark before launch, not after, so the default experience is right for users who prefer it. This kind of cross-mode quality checking is part of the thorough pre-launch review our team runs, and you can begin assessing your own site with a free check at /free-website-audit before it ever goes live.
Should you offer dark mode? #
For most content-rich sites and apps, offering dark mode is worthwhile because many users expect and prefer it, and honoring their system setting is a small courtesy that signals a polished, considerate product. The key is to do it properly: design a coordinated dark palette rather than inverting colors, use dark grey instead of pure black, recheck contrast for both text and accents, prepare imagery and logos that work on dark, and default to the visitor's system preference while offering a persistent toggle. If your team lacks the time to build and test a genuine second theme, a rushed dark mode can be worse than none, since broken contrast and glaring images frustrate users. Weigh the effort against your audience: content platforms, tools, and tech-leaning brands benefit most. If you want dark mode implemented as a real, tested theme rather than a bolt-on, our /services/web-design and /services/ui-ux-design teams build coordinated light and dark systems that stay readable and on-brand in both.
FAQ
What is dark mode?
Dark mode is a color scheme that shows light text and elements on a dark background, the reverse of standard dark-on-light. Sites and apps offer it to reduce glare in low light, save battery on OLED screens, and match user preference. Modern sites detect the visitor's system setting and can also provide a manual toggle.
Does dark mode save battery?
On phones and laptops with OLED or AMOLED screens, yes, because dark pixels use less power than bright ones, so a mostly dark interface can meaningfully reduce battery drain. On traditional LCD screens, which backlight the whole panel regardless of color, the savings are negligible. The benefit depends on the display technology.
Should I use pure black for dark mode?
No. Pure black backgrounds create harsh, high-contrast edges that can cause eye strain and make text appear to vibrate, and they hide the subtle shadows that convey depth. Use a very dark grey instead, such as around hex #121212. It is softer to read and keeps layering and elevation visible.
How does a website detect dark mode?
Through the CSS prefers-color-scheme media query, which reads whether the visitor's operating system is set to light or dark and applies the matching theme automatically. Sites can also offer a manual toggle to override that setting, remembering the user's choice with local storage so it persists across pages and future visits.
Is dark mode better for your eyes?
It depends. In low light, a dark interface reduces glare and can feel more comfortable. But in bright environments, or for some people with certain vision conditions such as astigmatism, light-on-dark text can be harder to read. Because comfort varies, the best practice is to offer both and let users choose.
Can I just invert my colors for dark mode?
You should not. Simply inverting a light palette produces muddy, unbalanced colors, glaring images, and contrast that often fails, because colors tuned for a white background rarely work on dark. A good dark mode is a separately designed palette with adjusted backgrounds, text, brand colors, imagery, and shadows, then tested for contrast.
How Local Web Advisor checks this for you
Is your own website getting web design right?
Our free AI audit scans your site and tells you — in plain English — exactly what to fix for web design and seven other areas, with the business impact and the fix for each. No login needed to start.
Run my free website audit →Was this helpful?