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.

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→

Recommended tool

Web fine-tuning tool · Selector Pro

Select page elements for precise AI edits

Click a button, text, or card, note the change, then copy its exact location to AI.

Open Selector Pro website

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

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