Good dark- and light-mode designs keep the same content and component meanings while adapting color roles, contrast, surfaces, controls, and imagery to each theme. Instead of inverting a finished page, define semantic tokens for both modes, show paired states for real components, and test every expected text/background combination. The examples below are component patterns—not audits of named live websites—and include practical implementation guidance for a site that follows the operating system by default while preserving a user’s explicit preference.
What good dark and light mode examples have in common
A useful comparison holds the page and its purpose constant, then shows how each theme handles the same content. Dark mode is not simply a black background with light text; light mode is not automatically readable because it resembles paper. Each needs a deliberate hierarchy of foregrounds, surfaces, borders, links, controls, focus indicators, and media.
Use the same criteria in both modes: hierarchy and contrast; separation between page canvas, cards, menus, and overlays; interaction states; brand and media treatment; preference behavior; and consistent typography and spacing. Keep information architecture and meaning stable while adapting the values.
Example 1: A navigation bar
In light mode, a navigation bar might sit on a white or near-white surface, with dark primary text, a visible divider, and a restrained brand color for the active destination. In dark mode, use a suitably dark surface and readable text, but retain a clear boundary between the bar and the page. Do not assume a logo that works on white will remain visible on a dark surface; choose a suitable asset variant or provide a contrasting frame.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Show the active item with more than a subtle hue shift: pair its color with a marker, underline, weight change, or other visible distinction. Hover and pressed states should remain discernible, and keyboard focus needs a clearly visible indicator in both themes. Menus and popovers should read as distinct surfaces, not as indistinguishable patches of the page background.
Example 2: A long-form article
For a reading page, compare heading and body hierarchy, secondary metadata, links, code, and callouts. Light mode often uses a pale canvas with dark body text; dark mode often uses a dark gray canvas with a lighter, but not necessarily pure-white, text color. In both, test the actual text against the actual surface, including links and secondary text. A muted gray that looks elegant in a palette swatch may be too faint in context.
Preserve comfortable type size, line length, line height, and whitespace in both themes. Palette changes cannot compensate for cramped measure, small type, or unclear writing. A code block or media player can intentionally use its own local scheme within a differently themed page—for example, a dark code surface in a light documentation page—if its text, controls, and edges remain legible.
Example 3: A form
A paired form example should include labels, required markers, inputs, placeholders, disabled controls, errors, success feedback, and focus. Give controls visible boundaries in both themes; do not rely on a pale border against a pale canvas or a nearly identical dark border and background.
Do not communicate “required,” “invalid,” or “saved” by color alone. Pair color with text, a symbol, or another visual cue. For example, an error can include an icon and an explanatory message, rather than only a red outline; a required field can have a visible marker accompanied by an explanation.
Rank #2
Example 4: A dashboard chart
Charts need to remain interpretable after palette adaptation. Test labels, gridlines, legends, data marks, and tooltips against their surroundings. Distinguish series with labels, line styles, shapes, or patterns as well as color, so meaning does not depend on identifying a particular hue. Check text over gradients or imagery in context rather than evaluating the foreground color alone.
Example 5: A component with its own theme
Not every component must inherit the page’s scheme. A dark code block on a light documentation page can be a sound choice when it has sufficient contrast and a clear boundary. Treat this as a component-level design decision: native controls, text, and focus states inside it must still be understandable. Chrome’s guidance discusses both page-level scheme support and component-specific schemes (Modern Web Guidance).
Build paired themes from semantic color roles
Name colors for their jobs rather than their literal values. A token such as --surface-raised can be pale in light mode and dark in dark mode without changing how a card uses it. This keeps component meaning consistent and avoids scattered one-off overrides.
PC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minute| Role | Light-theme example | Dark-theme example | Use |
|---|---|---|---|
| Page canvas | Near-white | Deep neutral | Main viewport background |
| Primary text | Dark neutral | Light neutral | Body copy and prominent labels |
| Secondary text | Muted dark neutral | Muted light neutral | Metadata and supporting details; verify contrast |
| Raised surface | White or slightly tinted | Lighter or otherwise distinct dark neutral | Cards, menus, and dialogs |
| Border | Visible neutral | Visible neutral adapted to the dark surface | Control edges, dividers, and grouping |
| Accent | Theme-appropriate brand color | Adjusted brand color with adequate contrast | Links and emphasis; also use non-color state cues |
These are role descriptions, not universal color prescriptions. Choose and test real values for the combinations your interface presents. USWDS describes a related approach: broad system colors can be organized into a smaller project-specific set of role-based tokens rather than applied indiscriminately (USWDS color tokens).
Check contrast and readability in both modes
Contrast is a property of a foreground/background pair, not of a color considered by itself. Test body text, headings, links, placeholders, disabled text, controls, and text placed over images or gradients in each theme. W3C WAI specifically calls out text over images, gradients, buttons, and other elements, and notes that some readers sensitive to bright colors may need lower luminance even where contrast is sufficient (WAI tips for designing for accessibility).
USWDS states the baseline AA contrast standard as 4.5:1 for most text and 3:1 for large text. Its large-text description is 19px or larger bold text, or 24px or larger normal text (USWDS: Using color). These are contrast criteria, not a preferred aesthetic. W3C’s contrast guidance explains that relative luminance matters more than hue and describes the large-text threshold in points as 18pt or 14pt bold (Understanding Contrast Minimum).
- Check the colors that are expected to appear next to one another in ordinary presentation, not just isolated palette swatches.
- Test text over media and gradients at the positions where it actually appears; an overlay may be needed if the underlying image varies.
- Review keyboard focus, selected, error, success, and disabled states in both themes.
- Pair color-coded meaning with a label, symbol, shape, or other visible distinction. W3C advises that color should not be the only way information is conveyed (WAI tips for designing for accessibility).
- Assess type size, typeface, line length, line height, whitespace, content, and writing as part of readability, not as substitutes for contrast. USWDS covers these broader readability factors (USWDS color guidance).
A convincing appearance is not proof that a site conforms to accessibility requirements. Conformance depends on the actual presentation and the applicable criteria, not the general impression of a theme.
Recommended Free Tools
Choose system preference and a stable user override
A predictable default is to follow the visitor’s operating-system color preference. Offer a site-specific light/dark control if appropriate, and make a deliberate selection persist so a later OS setting change does not unexpectedly override it. If JavaScript observes system preference, respond to changes while no explicit site override is pinned.
Declare supported schemes early so the browser can style native form controls and scrollbars appropriately. Chrome recommends declaring both schemes with a meta element and setting color-scheme on the root, which also affects viewport surfaces. Early declaration can reduce an unthemed flash, but does not guarantee eliminating every flash in every browser or loading condition (Chrome Modern Web Guidance).
Minimal CSS and HTML setup
<meta name="color-scheme" content="light dark">
<style>
:root {
color-scheme: light dark;
--canvas: #f7f8fa;
--surface: #ffffff;
--text: #20242a;
--muted: #555d68;
--border: #c7ccd3;
--accent: #174ea6;
}
@media (prefers-color-scheme: dark) {
:root {
--canvas: #17191d;
--surface: #22262c;
--text: #eef1f5;
--muted: #c0c6cf;
--border: #555d68;
--accent: #a9c7ff;
}
}
body {
margin: 0;
background: var(--canvas);
color: var(--text);
}
.card {
background: var(--surface);
border: 1px solid var(--border);
}
a { color: var(--accent); }
</style>The sample values illustrate token structure only; they are not certified contrast pairs. Measure and adjust your actual colors before shipping. For a user override, add an explicit theme attribute or class that takes precedence over the system default, then store the selected preference. Apply the saved choice early enough to reduce a flash, and test the initial-load behavior in the browsers and conditions you support. Chrome also describes the CSS light-dark() function as an option where supported; check support requirements before relying on it.
Rank #4
Capture real pages in both modes
When reviewing a design, compare the same URL, viewport, and page state in each mode; otherwise a content or layout difference can be mistaken for a theme effect. Inspect long pages, dialogs, menus, form errors, hover and focus states, and image-heavy sections. A screenshot is useful for visual review, but it does not by itself establish contrast compliance or keyboard usability.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsDIY browser review
- Open the target page in a browser and set the operating system or browser emulation to light mode.
- Capture the same viewport and page state; record the URL, viewport dimensions, and mode so the comparison is reproducible.
- Repeat in dark mode, checking the same scroll positions and interaction states.
- Compare foreground/background pairs with a contrast-checking method and inspect keyboard focus separately.
- Repeat at relevant responsive widths and with media, menus, validation messages, and overlays visible.
Or skip the browser setup
ScreenshotNeo can capture a URL as an image or PDF with one GET request. To compare themes, pass the same URL and use the supported theme mechanism on your page—for example, a query parameter or URL state your site implements—then capture each variant. The request itself does not invent a theme switch for a site that lacks one.
With ScreenshotNeo, cookie banners, popups, and chat widgets are removed before the shot; bot checks, blank pages, and failed loads are never billed. An MCP server lets AI agents take screenshots, and 1,000 screenshots a month are free with no card; paid plans start at $5 for 3,000.
cURL example, adapted to capture a theme-specific URL implemented by your site:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/article?theme=dark -o dark-shot.webpSee the ScreenshotNeo API documentation for request options. Replace the example URL with your own URL and ensure its theme parameter actually selects dark mode. The same approach works for a light-theme URL. Sign up free for 1,000 screenshots a month with no card.
Common review failures and fixes
- Dark mode looks like an inverted screenshot: Define semantic tokens and tune each role for the dark theme instead of mechanically reversing every color.
- Text or links disappear into a surface: Test the actual foreground/background pair, including secondary text and text over media; adjust the relevant role rather than relying on visual intuition.
- Cards and menus merge into the page: Re-establish hierarchy with distinct surface values, borders, or other clear boundaries in both themes.
- Status is unclear without color: Add visible text, symbols, shape, or line-style differences alongside the color cue.
- The page flashes the wrong theme on load: Declare supported schemes early, apply a stored override before rendering where feasible, and test across supported browsers. Early declaration reduces risk but cannot guarantee that every flash disappears.
- The theme changes unexpectedly after an OS setting change: Distinguish “system” from an explicit site preference; only follow system changes while no explicit choice is stored.
- A logo or illustration becomes illegible: Supply a theme-appropriate asset or frame it with a surface that preserves its visibility. Do not assume images should be inverted.
- A screenshot comparison appears inconsistent: Confirm both captures use the same page state, viewport, URL behavior, and scroll position; screenshots do not substitute for interaction or accessibility checks.
Frequently Asked Questions
Should a website default to dark mode or light mode?
Following the visitor’s system preference is a practical default; provide a site override when the product needs one.
Does a dark theme automatically reduce eye strain?
No universal comfort conclusion follows from the theme alone. WAI notes that some readers sensitive to bright colors may need lower luminance; evaluate the actual presentation and offer a usable preference.
Can a screenshot prove that a design is accessible?
No. It can support visual comparison, but does not establish contrast conformance, keyboard behavior, or other applicable accessibility criteria.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
