Dark Mode Checker: Ship Accessible Light and Dark Themes

Designing dark mode requires a dedicated system of contrast decisions and token pairings.

I have inverted a light palette and called it dark mode. On my monitor it looked fine. On a phone in a dim room the borders vanished and the error red glowed. Contrast had not been checked, roles were mixed, and the tokens were not ready to export. Checking surfaces, text and semantic states as pairs takes longer up front and saves a round of patches after release.

Surfaces, text, borders, accents, success, warning and error all need to stay readable in both modes. That is why roles matter more than one off picks.

The Dark Mode Token Checker checks light text on light surfaces, dark text on dark surfaces, accent usability, semantic state contrast, role duplication and whether CSS export is ready. You get a contrast matrix, recommendations and copyable variables.

Start with broad palette checks in the Brand Color Accessibility Checker, then move safe roles into the Design Token Starter Generator.