Dark Mode Generator
One accent color in, a matched light and dark theme out. The accent itself gets relit for each background rather than reused as-is.
Light mode
The quick brown fox
jumps over the lazy dog.
background
#F7F7F5
text
#171717
accent
#2969E6
Dark mode
The quick brown fox
jumps over the lazy dog.
background
#171717
text
#F7F7F5
accent
#3B7BFB
The accent itself shifted from #2969E6 to #3B7BFB to hold 4.5:1 contrast against each background, rather than reusing one color for both. The two versions have a 1.3:1 contrast ratio against each other.
Why the accent color changes
Background and text invert cleanly between light and dark mode, near-white becomes near-black and back again. Accent colors don't work the same way: a color chosen for good contrast against a white background usually doesn't have enough contrast against a near-black one, so it needs to get lighter, not just swap roles. That's why real design systems ship a separate accent token per theme instead of reusing one value.
Dark mode generator FAQ
Is dark theme the same as dark mode or night mode?
Yes, dark mode, dark theme, and night mode are the same idea under different names, a low-light color scheme with a dark background instead of a white one. This generator produces the same relit accent-color pair regardless of which term you use for it.