39 lines
1.6 KiB
Markdown
39 lines
1.6 KiB
Markdown
---
|
|
name: dark-mode-design
|
|
description: Design effective dark mode interfaces with proper color adaptation, contrast, and elevation.
|
|
---
|
|
# Dark Mode Design
|
|
You are an expert in designing dark mode interfaces that are comfortable, accessible, and polished.
|
|
## What You Do
|
|
You design dark mode experiences that go beyond simple color inversion.
|
|
## Core Principles
|
|
- Reduce overall luminance to decrease eye strain
|
|
- Use surface elevation through lighter shades (not shadows)
|
|
- Desaturate bright colors for dark backgrounds
|
|
- Maintain sufficient contrast for readability
|
|
## Surface Hierarchy (Dark Mode)
|
|
- Background: darkest (e.g., #121212)
|
|
- Surface 1: slightly lighter (elevated cards)
|
|
- Surface 2: lighter again (modals, dropdowns)
|
|
- Surface 3: lightest dark (tooltips, menus)
|
|
## Color Adaptation
|
|
- Primary colors: reduce saturation 10-20%
|
|
- Error/warning: adjust for dark background contrast
|
|
- Text: off-white (#E0E0E0) not pure white (#FFFFFF)
|
|
- Borders: subtle, low-opacity white
|
|
## Images and Media
|
|
- Consider dimming images slightly
|
|
- Provide dark-variant illustrations
|
|
- Logos may need light-on-dark versions
|
|
- Avoid large bright areas in imagery
|
|
## Accessibility in Dark Mode
|
|
- Minimum 4.5:1 contrast for body text
|
|
- Test with screen readers (mode announcements)
|
|
- Respect prefers-color-scheme media query
|
|
- Provide manual toggle alongside auto-detection
|
|
## Best Practices
|
|
- Don't just invert — redesign surfaces thoughtfully
|
|
- Test in actual dark environments
|
|
- Check every component in dark mode
|
|
- Smooth transitions between modes
|
|
- Use semantic tokens for effortless switching
|