Dark mode checklist - Max Design

Published: 15 September 2026

This checklist covers some of the most common things to check when reviewing a design or interface in dark mode. Every item can be answered with yes or no. A no identifies something that may need attention.

Design checklist

Have you set light and dark values for page, component and surface backgrounds?
Have you set light and dark values for text, including secondary and muted text?
Have you set light and dark values for links, borders, dividers, icons and form controls?
Do text, icons, borders and controls have sufficient contrast in both modes?
Are hover, focus, active, selected, visited and disabled states defined in both modes?
Are error, warning and success colours distinct and recognisable in both modes?
Have you checked pure black backgrounds with pure white text to make sure they are comfortable to read?
Do brand and accent colours work well against dark backgrounds?
Are shadows still visible against dark surfaces?
Do overlays and gradients work against dark backgrounds?
Do logos, illustrations, charts and diagrams work against both light and dark backgrounds?
Are transparent images free from unwanted light or dark edges in both modes?
Where one image cannot work in both modes, have you provided separate light and dark versions?

Notes on colour choices

On pure black and pure white: very high contrast can make text appear to glow or blur for some people. Some people with low vision also find light text on a dark background easier to read, so the aim is to tune dark mode rather than avoid it.

On brand and accent colours: highly saturated colours that work well on a light background can feel too strong against a dark one.

Development checklist

The first four items are covered in more detail in Simple steps for declaring a dark mode colour scheme.

Have you added a color-scheme meta element so the browser can use the right page colour from the start and avoid a flash of the wrong colour? This is optional.
Have you declared color-scheme in CSS to tell the browser which colour schemes the page supports?
Have you provided light and dark styles using prefers-color-scheme or light-dark()?
Have you set different browser interface colours for light and dark mode using theme-color? This is optional.

Where separate dark mode images are needed, have you provided dark image alternatives?

<picture>
  <source srcset="logo-dark.svg" media="(prefers-color-scheme: dark)">
  <img src="logo-light.svg" alt="Example logo">
</picture>

Do background images and other assets designed for a light background still work on a dark background?
Have you avoided unnecessary hard-coded colours by using semantic colour variables or design tokens where appropriate?
Does third-party content such as maps, video players, payment widgets, captchas and iframes remain readable in dark mode?
Do email templates and PDFs generated by the site still display correctly?
Do styled form controls, including inputs, selects, checkboxes and placeholder text, remain readable in both modes?
Does accent-color work on checkboxes, radios, range inputs and progress bars in both modes?
Do SVG fill and stroke values follow the current colour scheme, using currentColor where appropriate?
Do pseudo-elements such as ::before and ::after use colours that work in both modes?
Do print styles avoid inheriting the dark theme?
If you offer a light and dark toggle, does the user's choice override the system preference and persist across pages?
Does the interface still work in forced-colours mode, such as Windows contrast themes? Forced colours work differently from dark mode, so test them separately.

Final check

Have you tested every page and component in both light and dark mode, including hover and focus states, form and validation states, and disabled and selected states?
Have you tested dark mode on different devices and platforms, rather than relying on a single setup?