A dark theme alternative that reduces eye strain in low-light environments and saves battery life on OLED screens.
Dark mode has become a standard expectation for modern applications. It improves accessibility for users with light sensitivity, reduces eye strain in dark environments, and can extend battery life on mobile devices. It also offers a sleek, premium aesthetic.
The base layer. Usually a very dark gray, not pure black.
Lighter than background to indicate elevation (cards, modals).
Desaturated primary color for better contrast and reduced eye strain.
High emphasis text. Off-white to avoid harsh contrast against dark backgrounds.
Medium emphasis text for supporting content.
See how your dark theme colors work together to create depth and hierarchy.
Use dark grays (e.g., #121212) instead of pure black (#000000) to reduce eye strain and smearing on OLED screens.
In dark mode, use lighter shades of gray to indicate elevation (closer to the user) rather than shadows.
Saturated colors vibrate against dark backgrounds. Use desaturated or pastel tones for better readability.
Ensure text maintains sufficient contrast (WCAG AA) against the dark background.
Respect the user's operating system preference (prefers-color-scheme) by default.
Provide a visible toggle for users to override the system setting.
Check that images and illustrations look good on dark backgrounds; invert or adjust if necessary.