Dark Mode

You might say

Add real dark mode: text, borders, charts, and code blocks must switch with the page.

Dark mode is a switchable dark interface theme state, not merely a page with a black background.When someone chooses dark mode or their system prefers it, backgrounds, text, borders, buttons, charts, and focus states need coordinated, sufficiently contrasting values. It serves different environments and preferences. A single dark poster or visual style is not automatically a switchable theme.

Know first

State Design Token

Dark Theme

Which interface values must change together from light to dark

Weekend trip

ITINERARY

Trip preferences

Destination

Departure date is still missing

Dark mode is a complete theme state

Color relationships change together: When backgrounds become dark, body text, muted hints, borders, buttons, inputs, charts, and code blocks all need contrast and hierarchy checks. Reversing one background alone is insufficient.

Respect a person's preference: A product can use prefers-color-scheme as a default and offer an explicit switch that remembers a choice. Focus, hover, selected, and error states must remain distinguishable after switching.

Quick checkChoose the best answer

After the team changes a page background to dark gray, input borders and error messages are almost invisible. What should happen next?

Audit text, borders, inputs, errors, focus, and charts for contrast and state in the dark theme—not only the backgroundMake the background even blacker; no other colors need changeHide error messages to make the dark page cleaner

You can say this to an AI Agent

Implement dark mode: use system `prefers-color-scheme` as a possible default and provide a user switch. Give background, text, borders, inputs, errors, focus, charts, and code blocks matching theme values. Then check default, hover, focus, and error states in both light and dark modes.

Learn next

1Design Token→2Browser Storage→