Checklist: dark mode #

This page is for designers who check a dark mode. Background: Dark mode overview.

Contents #

1. Tokens
2. Looks
3. Behavior

Tokens #

• To do: No color literal in rules; every color is a token (Design tokens).
• To do: Every color token has a dark value, defined next to the light one.
• To do: color-scheme: dark in the dark block (form controls and scrollbars follow).
• To do: For admin designs: the admin styling rules test passes (The admin styling rules test).

Looks #

• To do: No white or light box on a dark page (cards, tables, code blocks, dialogs, third-party widgets).
• To do: Text contrast at least 4.5:1 on every dark surface, including hover and selected states (Color contrast).
• To do: Borders visible but not glaring; surfaces distinguishable (page, card, raised).
• To do: Logo readable on the dark header (SVG images).
• To do: Icons follow the text color.
• To do: Focus ring visible on dark surfaces.
• To do: Checked at 1440 px and 960 px with scale 2.

Behavior #

• To do: Follows the system setting when no choice is made, also when the system changes while the page is open.
• To do: A switch (if any) offers light, dark and system, says its state, is keyboard accessible (The theme toggle and the pre-paint guard).
• To do: No light flash when loading a page in dark mode.
• To do: The choice survives reloads and navigation.
• To do: Printing produces a light page.

Related pages #

• Tutorial: add dark mode
• Dark mode with prefers-color-scheme
• Free documentation: this page is free to copy, translate and improve under the GNU FDL 1.3.