Dark Mode
Design Systems VocabularyAn alternative color scheme that uses dark backgrounds with light text, reducing eye strain in low-light conditions and often saving battery on OLED screens.
Visual Examples
Example 1
Example 2
Example 3
Visual examples for Dark Mode coming soon.
How It Works in Apps/Websites
Dark mode inverts the typical light-background/dark-text color scheme. Instead of black text on white, you get light gray or white text on dark gray or black backgrounds. A good dark mode isn't just inverting colors—it requires careful consideration of contrast, elevation (using lighter surfaces instead of shadows), and accent colors that work on dark backgrounds. Most modern apps offer a toggle or follow the system preference.
How AI Interprets This Term
When you say 'dark mode', AI understands this as a color scheme with: near-black backgrounds (#0a0a0a to #1a1a1a), light gray or white text (#e5e5e5 to #ffffff), reduced contrast compared to light mode, lighter surfaces for elevated elements (cards, modals), and accent colors adjusted for visibility on dark backgrounds. Images may need slight adjustments or overlays.
Prompt Examples
Copy-paste these prompts to use in your AI tools.
Create a dashboard with dark mode styling
Design a settings page in dark mode with: background #0f0f0f, cards with #1a1a1a background, white headings, gray body text #a3a3a3, and blue accent #60a5fa for buttons and links
Show the same card component in light mode and dark mode side by side, demonstrating proper color adjustments for each
Compare With
Related or contrasting terms to help you understand the differences.
Variants & States
Variants
States
Usage Guidelines
When to Use
- •As a user preference option in any app
- •For apps used in low-light environments
- •Content consumption apps (reading, video)
- •Developer tools and code editors
- •Following system-wide preferences
When NOT to Use
- •As the only option (always offer light mode too)
- •When your content heavily relies on light-background imagery
Related Terms
Contrast Ratio
A measurement of the luminance difference between foreground and background colors, expressed as a ratio (e.g., 4.5:1), determining text readability and accessibility compliance.
Design Tokens
Named entities that store visual design attributes (colors, typography, spacing) as reusable values, enabling consistent design across platforms and products.