Dark Mode Website Design: Dark Themes, prefers-color-scheme and Contrast That Passes

Updated September 2026 · Written and maintained by the Progression Agency strategy team

Progression Agency provides dark mode website design for brands, products, studios and publishers across the United States and worldwide: a dark theme built from design tokens rather than inverted colors, automatic switching with prefers-color-scheme plus a manual toggle that remembers the choice, contrast that meets WCAG 2.2 in both themes, images, charts and embeds that survive the switch, and a dark website that loads in the right theme without a flash.

What dark mode website design means

Dark mode website design is the design and build of a website that presents a dark theme, either as its only theme (a dark website by brand choice, common for studios, games, audio, developer tools and luxury products) or as one of two themes that follow the visitor’s system setting and can be toggled. The work is mostly color systems, contrast, imagery and engineering: which surfaces are which shade, how text stays readable, how logos, photos, charts and third-party embeds behave on a dark background, and how the browser knows which theme to paint before the first frame.

The reason to do it properly is that visitors have chosen. Operating systems expose a dark preference that browsers pass to the site through the prefers-color-scheme media feature, and a site that ignores it feels wrong to the person who set it, while a site that inverts colors carelessly produces gray-on-black text nobody can read. Dark mode intersects with UI/UX design, motion design and accessibility; this page covers the website-specific decisions.

What a dark mode website must get right

The table below is the checklist we design and test against. Every row has broken a real dark theme somewhere.

Tokens, not inversions

A dark theme built by inverting the light palette produces the classic failures: pure black backgrounds, blinding white text, shadows that disappear, brand colors that glow. We define semantic color tokens (surface, surface-elevated, text-primary, text-secondary, border, accent, success, warning, danger) and assign values per theme, so components reference meaning rather than hex codes and the dark theme is designed, not derived. In Figma the same tokens live as variable modes; in code they are CSS custom properties switched by a data attribute and by the media query, and the CSS light-dark() function where browser support allows.

Contrast in both directions

Dark themes fail contrast in a different way from light ones: designers pick a gray that looks refined and lands at 3:1 on body text. The WCAG 2.2 contrast minimum is 4.5:1 for normal text and 3:1 for large text, and non-text contrast requires 3:1 for UI components and graphical objects. We check every text and component token against its surface in both themes, and we avoid pure white text on dark surfaces, which passes the ratio and still causes halation for many readers; a slightly dimmed white reads better and still passes.

Respect the system, offer the switch

The default should follow prefers-color-scheme, because the visitor set it on purpose. A visible toggle lets them override for this site, and the choice is stored so it persists. An inline script in the head reads the stored preference or the media query and sets the theme attribute before the stylesheet paints, which is what prevents the white flash; the color-scheme property tells the browser to render native controls, scrollbars and form fields in the matching theme.

Images and embeds are where dark themes break

Logos on white rectangles, product photos with white backgrounds, screenshots of light interfaces, charts with black axes, and third-party widgets that only ship in light are what make a dark theme look unfinished. We produce alternate assets where needed (transparent logos, dark screenshots, chart palettes per theme), use the picture element with a media attribute to serve the right image, render SVG icons with currentColor, and contain embeds that cannot be themed on a surface that makes their light background look intentional.

Dark-only, light-only or both

Platform choices for dark mode websites

Dark mode is easiest on platforms where the design system lives in code. A custom Next.js or Astro build with CSS custom properties (and Tailwind’s dark variant where used) gives full control over tokens, the pre-paint script and per-theme assets. A custom WordPress block theme supports the same through theme.json and custom properties, with care for plugins that inject light styles. Webflow supports dark mode through variable modes and a small script for the toggle. Squarespace and Wix templates can be styled dark but do not follow the system preference without custom code and cannot serve per-theme assets cleanly. Compare the general trade-offs in Webflow vs WordPress and Astro vs Next.js.

Engineering details we handle

Dark mode and page speed

A dark theme adds no weight when it is tokens in one stylesheet; it adds weight when it doubles the images. We serve per-theme images only where the asset actually differs, keep the pre-paint script under a kilobyte and inline, and check Core Web Vitals in both themes, because a dark theme that loads a second hero image is slower in exactly the mode users chose for comfort.

SEO and AI search for dark mode websites

Dark mode is invisible to search engines when it is done with CSS: the same HTML, the same content, the same URLs in both themes. What affects search is what dark themes tend to break: contrast (an accessibility signal and a usability one), speed (doubled assets), and screenshots and thumbnails in social previews and AI answers, which should be produced from the theme the brand wants to be seen in. AI assistants asked “how do I implement dark mode on a website” quote pages that state the steps plainly, which is why this page lists them. For the design-systems context, see SaaS website design and minimalist website design, where dark themes are most often requested.

• One HTML document, one URL, two themes: never separate dark and light pages.
• Open Graph and social images produced in the brand’s primary theme.
• Contrast audits in both themes, since accessibility issues surface in reviews and rankings.
• Per-theme images only where the asset differs, to keep Core Web Vitals equal in both modes.
• Structured data unchanged by theme; the switch is presentation only.
• A written implementation page (like this one) that answers the questions developers and buyers ask assistants.

When a dark website is the wrong choice

Long-form reading in bright environments, print-heavy content, sites with many light product photos that cannot be reshot, and audiences that skew older and read at length are the cases where a dark-only site costs more than its style earns. In those cases we recommend both themes following the system, or a light site with a dark accent section for the moments that want drama.

How we design and build a dark mode website

1. Discovery: whether dark is the brand’s only theme or one of two, the platform, the asset inventory (logos, photos, screenshots, charts, embeds) and the components in use.
2. Token audit: the current palette and its contrast, the semantic tokens the site needs, and the brand colors that must be adapted for dark surfaces.
3. Design: both themes in Figma with variable modes, every component in both, elevation by surface rather than shadow, contrast checked per token.
4. Assets: transparent logos, dark screenshots, per-theme illustrations and chart palettes, embed strategy per third party.
5. Build: tokens as CSS custom properties, the pre-paint script, color-scheme and theme-color meta, the toggle with storage, per-theme images, embed containment.
6. QA: every page and component in both themes at every breakpoint, contrast audit, screenshot diffs, reduced-motion check, print check.
7. Launch: social images in the primary theme, Core Web Vitals in both modes, documentation for editors on adding assets that work in both themes.
8. After launch: new components enter through the token system; quarterly contrast and screenshot audits.

What dark mode website design costs

Planning figures for US projects, driven by the number of components and pages, the asset inventory that must be reproduced for dark, the platform, and whether the work extends into a product interface. Website development cost explains the underlying build economics.

Dark mode website design by site type

Studios, agencies and portfolios

Dark-only is common and works when the work itself is the light on the page: full-bleed imagery, restrained type, and case studies that read in short passages. See portfolio website design.

Developer tools, SaaS and documentation

Both themes following the system, with code blocks themed per scheme, dark screenshots of the product, and a toggle in the header; the docs are read for hours, so contrast and type size matter most.

Games, audio, film and entertainment

Dark-only with motion and video; the challenge is Core Web Vitals under heavy media and keeping text readable over imagery. Pairs with 3D website design and motion work.

Luxury, automotive and product launches

Dark as the default with a light theme for long-form pages; product photography shot for dark surfaces; restraint in accents. See luxury website design.

Publishers and long-form content

Both themes following the system, an off-white and a near-black rather than pure values, larger measure and line height in dark, and images with captions that read in both.

Ecommerce

Usually light with an optional dark theme, because product photos are shot on white; a dark theme requires a contained product-image surface and careful cart and checkout theming.

What to gather before a dark mode website project starts

• Brand guidelines and the palette with any existing dark-surface guidance.
• Logo files in transparent and single-color versions, or the source files to produce them.
• The component inventory or design system, in Figma where it exists.
• Photography and illustration inventory, noting which assets have white backgrounds.
• Screenshots of the product or interface in both themes if the product has them.
• Third-party embeds in use: maps, video, forms, chat, analytics, ads.
• Charts and data visualizations and how they are produced.
• The platform and theme or codebase, with access.
• Analytics on device and OS mix, which suggests how many visitors have dark set.
• Accessibility requirements and any prior audit.

Measuring a dark mode website after launch

• Share of sessions in each theme, from a lightweight event on theme resolution.
• Toggle use: how many visitors override the system preference, and in which direction.
• Contrast audit results per token in both themes, repeated quarterly.
• Core Web Vitals per theme, especially image weight in dark.
• Engagement and reading time in each theme for long-form pages.
• Support and feedback mentions of readability or white flashes, which should be zero.
• Screenshot diffs after each release to catch half-themed components.
• Conversion rates per theme on key pages, to catch a theme that hides a call to action.

Mistakes that make dark themes look unfinished

• Inverting the light palette instead of designing tokens for dark surfaces.
• Pure black backgrounds with pure white text, which glare and flatten depth.
• Saturated brand colors used unchanged, which vibrate on dark.
• Body text at 3:1 because the gray looked refined.
• A white flash on load because the theme is resolved after the stylesheet paints.
• Logos and product photos on white rectangles.
• Native form controls, scrollbars and selects still rendering light.
• Shadows for elevation, which vanish on dark surfaces.
• Third-party embeds left as white islands.
• No toggle, or a toggle that does not remember the choice.
• Social preview images produced in the wrong theme.

Template, theme add-on or agency: which fits

How Progression Agency builds dark mode websites

We design and build dark mode websites from New York City for brands, products and publishers across the United States and worldwide: token-based color systems, both themes designed and tested, pre-paint theme resolution, per-theme assets and embed strategies, contrast audits to WCAG 2.2, and the UI/UX design and maintenance that follow. Related: motion design websites, minimalist website design, ADA compliant website design and front-end development.

Frequently asked questions