Agent skill · design visual · erichowens
dark-mode-design-expert
Master dark mode UI design with atmospheric theming, WCAG accessibility, and cross-platform best practices. Specializes in weather/sky/ocean-inspired color systems that adapt to time of day
Why this skill is useful
Provides specialized knowledge on dark mode design principles and accessibility standards that the AI wouldn't reliably generate on its own.
What it needs
About 9k tokens when loaded. Last updated 2026-07-14. 180 stars on the source repository.
What this skill does
Dark Mode Design Expert Master dark mode UI design with atmospheric theming, WCAG accessibility, and cross-platform best practices. Specializes in weather/sky/ocean-inspired color systems that adapt to time of day and environmental conditions. When to Use This Skill Activate on: "dark mode", "dark theme", "night mode" "theme switching", "light/dark toggle" "atmospheric UI", "weather theme", "sky gradient" "OLED optimization", "battery-friendly dark" "elevation in dark mode", "surface layering" "prefers-color-scheme", "color-scheme CSS" "contrast ratios dark mode", "accessibility dark theme" NOT for: General color palette creation → color-theory-palette-harmony-expert Typography and font selection → typography-expert Component library architecture → design-system-creator Contrast auditing of specific colors → color-contrast-auditor --- The Science of Dark Mode Why Dark Mode Exists Factor Light Mode Dark Mode Winner -------- ------------ ----------- -------- OLED Battery 100% baseline 39-47% savings at max brightness Dark Low Light Comfort Eye strain, fatigue Reduced glare Dark Bright Environment Better readability Washed out Light Astigmatism Users Easier to read Halation effect Light Focus/Immersion Standard Content pops forward Dark Sleep Hygiene Blue light exposure Reduced blue light Dark Key Insight: Dark mode isn't universally better—it's contextually better. The best systems respect user preference AND adapt to environment. Contrast Requirements (WCAG 2.1) Element Type Minimum Ratio Target Ratio Notes -------------- --------------- -------------- ------- Body text 4.5:1 7:1+ AAA preferred for readability Large text (≥24px) 3:1 4.5:1+ Headlines, hero text UI components 3:1 4.5:1+ Borders, icons, focus rings Disabled elements None required 2.5:1 UX consideration Decorative None required - Pure aesthetic elements Dark Mode Gotcha: High contrast (21:1 pure white on black) causes more eye strain than moderate contrast (15:1). Target 12:1 to 16:1 for primary text. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills erichowens/dark-mode-design-expert