Quick answer: Offer a dark theme when a meaningful share of your audience wants it and you can maintain contrast, imagery and brand quality in both modes. By mid-2019 Safari, Firefox and Chrome all support the prefers-color-scheme media query, so you can follow the OS setting. A poorly built dark mode that washes out text or breaks icons is worse than no dark mode. If budget is tight, improve your single theme’s readability first.
Dark UI trends moved from native apps into the browser. Users ask for it. Designers debate it. This article is a practical go/no-go for business sites.
What changed technically
CSS now lets you write media queries for prefers-color-scheme: dark and swap design tokens. Browsers pick up the operating system preference. You can also offer a manual toggle that stores a choice (often in localStorage) and overrides the OS for that site.
Support in major browsers is good enough in 2019 to ship for mainstream audiences, with progressive enhancement for older browsers that simply keep the default light theme.
Why users want it
Less glare in low light, personal preference, consistency with OS chrome, and for some people with visual sensitivity a better experience when contrast is done well. Dark mode is not automatically more accessible. Bad dark themes (gray text on slightly darker gray) fail WCAG contrast. Good dark themes need the same discipline as light ones.
When you should say yes
Product-led or SaaS marketing sites whose app already has a dark UI, content sites where readers spend a long time at night, brands whose visual system already includes dark art direction, and teams with design tokens (colors as variables) so two themes are maintainable.
When you should wait
Small marketing sites with one designer-hour a month, heavy reliance on photos graded for white backgrounds only, no design system with colors hard-coded everywhere, and checkout flows you have not tested in both themes. Ship readability, mobile layout and performance first. Dark mode is polish.
Design requirements that are easy to miss
Avoid pure black on pure white extremes for large text blocks; slightly soft backgrounds often feel better. Recolor semantic states: success, error and links need dark-theme variants that still meet contrast. Provide logo and icon versions that work on dark surfaces. Soft shadows vanish on dark backgrounds; use borders or lighter elevation cues. Test forms and checkout autofill, focus rings and error text in both modes.
Implementation patterns
OS-only: respect prefers-color-scheme with no toggle. Simplest.
OS + toggle: let users override; remember the choice.
Separate URL: rarely worth it for marketing sites.
Use CSS custom properties for color tokens so components inherit. Fight the urge to duplicate every component stylesheet. On WordPress classic themes you will likely add tokens in theme CSS or a child theme. Keep customizations maintainable; see custom WordPress theme thinking even for CSS-variable work.
Accessibility checklist
Contrast ratios for text and meaningful icons, focus visibility on dark surfaces, no information by color alone, and respect for prefers-reduced-motion when you animate theme switches. Pair this work with real keyboard and screen reader testing, not only a theme toggle. Mobile readability still matters (mobile-friendly basics).
Performance
Shipping two themes is mostly CSS if done with variables. Problems appear when you load double image sets eagerly. Lazy-load alternate art only when needed, or use a single image that works on both with a translucent overlay.
Brand and photography
If your homepage hero depends on a bright lifestyle photo, dark mode may need a different crop or overlay rather than a naive invert. Budget art direction time. A toggle that ruins the hero helps nobody.
Gradual rollout
Ship dark mode behind a query flag or for logged-in staff first. Fix the three ugliest pages, then release broadly. A quiet beta prevents a homepage embarrassment on launch day.
QA script you can reuse
- Toggle OS to dark; load home, article, product, form.
- Toggle OS to light; confirm no flash of wrong theme if you persist a manual choice.
- Keyboard to the theme toggle; change mode; confirm focus remains visible.
- Zoom to 200%; confirm text still contrasts.
- Print preview an article.
Fail any step and fix before marketing announces the feature.
Third-party widgets
Chat widgets, embedded booking tools and iframes may not honor your theme tokens. Check them in dark mode. A blinding white iframe in a dark page is a common miss.
Manual toggle UX
If you offer a toggle, place it somewhere predictable in the header utility area. Reflect the current state clearly. Do not hide it inside a buried settings page on a marketing site. Persist the choice so navigation does not flash the wrong theme. On first visit, following OS preference is usually right.
Testing matrix
Check iOS Safari, Android Chrome, desktop Chrome, Firefox and Safari. Check product photos, blog articles, forms and checkout. Check email capture modals that load later. Check Windows machines where default themes differ from designer laptops.
Design tokens example set
Maintain at least: background, surface, text primary, text muted, border, link, link hover, danger, success, warning, focus ring. Map each to light and dark values. Components should consume tokens only. Hard-coded hex values scattered through CSS are how dark mode rot starts.
Marketing sites vs apps
Apps benefit more because usage time is long. Five-page brochure sites benefit less. If your analytics show tiny night traffic and no user requests, you can defer. If support keeps hearing that the site is hard to read at night, prioritize.
Interaction with print styles
Print CSS should usually force a light background regardless of dark mode so ink and readability behave. Test print preview once on an article template.
Hero video and dark mode
Autoplaying bright videos on dark pages can still glare. Offer a poster frame that fits the dark palette and let users press play. Check controls contrast on the video skin itself.
Documentation for the next designer
Keep a one-page token sheet in your design file and repo README. New contractors should not invent a third gray.
Analytics for theme preference
If you add a toggle, log which theme people choose (without identifying them personally). If almost nobody picks dark, you may stop maintaining exotic dark variants of campaign pages. If many pick it, invest in art direction for both.
FAQ
Does dark mode help SEO?
Not directly. Indirectly it can help engagement for some audiences if it improves comfort. Do not expect rankings from a toggle.
Should dark mode be the default?
Follow the user or OS preference. Forcing dark on a brand built around bright photography can hurt.
Can we use a third-party plugin?
Some plugins invert colors automatically. Automatic inversion often produces ugly, unreadable results. Prefer designed tokens.
What about email?
Email dark mode is a separate, client-specific mess. Do not assume your website toggle fixes newsletters.
Offer it when you can maintain it
Dark mode is a product decision with design debt attached. If you can maintain tokens, imagery and contrast, prefers-color-scheme is ready for mainstream use in 2019. If you cannot, improve your light theme and revisit. For UX help that includes readability and conversion-focused design, see Turn visitors into customers.
