A dark theme is not a light theme with every color inverted. It needs its own surface, text, border, and accent decisions. Start by deciding which content deserves emphasis, then use a limited set of surface levels to show grouping.
Build a surface and text hierarchy
Choose a page background, a slightly distinct card or menu surface, and a border color that is visible without competing with content. Set primary and secondary text separately. Avoid making every surface pure black or every text color pure white; strong extremes can make the interface harsh and erase useful distinctions.
Retune brand and status colors
A bright accent that works on a pale surface may glow on a dark one. Adjust its lightness or saturation and test both the filled control and its label. Check success, warning, and error colors on the same surfaces; do not rely on color alone to communicate a status.
Review the theme in real components
- Check body text, metadata, borders, buttons, links, and form states.
- Test the combinations people will actually read, including muted text.
- Compare the theme at normal and high brightness and on more than one screen if possible.
A contrast ratio can flag a weak text pair, but the layout still needs visual review. Use the WCAG contrast checker alongside a UI palette draft.