Dark Mode Design
- 1.1k installs
- 1.9k repo stars
- Updated June 14, 2026
- owl-listener/designer-skills
dark-mode-design is a designer skill that helps developers create accessible, eye-comfortable dark mode interfaces with proper contrast, elevation, and color hierarchy beyond simple inversion.
About
dark-mode-design is an owl-listener designer skill that instructs coding agents to craft polished dark mode interfaces rather than inverting light palettes. Core principles include lowering overall luminance to reduce eye strain, expressing elevation through progressively lighter surface shades instead of shadows, desaturating bright accent colors for dark backgrounds, and maintaining readable contrast ratios. The skill defines a surface hierarchy from darkest background through elevated Surface 1 and Surface 2 layers, with concrete hex guidance such as #121212 for base backgrounds. Developers reach for dark-mode-design when shipping dashboards, mobile apps, or browser extensions where dark theme quality affects accessibility audits and user comfort. The skill applies expert design judgment to hierarchy, contrast, and color adaptation so agents output implementable UI guidance instead of generic dark-theme toggles.
- Reduces overall luminance to decrease eye strain
- Uses surface elevation with lighter shades instead of shadows
- Desaturates bright colors for dark backgrounds while preserving contrast
- Defines explicit Surface Hierarchy from #121212 background through Surface 3
- Provides color adaptation rules for primary, error, text, and border colors
Dark Mode Design by the numbers
- 1,077 all-time installs (skills.sh)
- +51 installs in the week ending Jul 29, 2026 (Skillselion tracking)
- Ranked #369 of 1,888 Design & UI/UX skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Jul 31, 2026 (Skillselion catalog sync)
npx skills add https://github.com/owl-listener/designer-skills --skill dark-mode-designAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1.1k |
|---|---|
| repo stars | ★ 1.9k |
| Security audit | 3 / 3 scanners passed |
| Last updated | June 14, 2026 |
| Repository | owl-listener/designer-skills ↗ |
How do you design accessible dark mode UI?
Create comfortable, accessible, and visually polished dark mode interfaces that reduce eye strain and maintain proper hierarchy.
Who is it for?
Frontend developers and designers implementing dark themes in SaaS, mobile, or extension UIs who need accessibility-aware hierarchy beyond invert-colors.
Skip if: Teams only toggling a CSS prefers-color-scheme media query on an unchanged light palette without revisiting contrast or elevation.
When should I use this skill?
A UI needs a dark theme with proper surface hierarchy, contrast, and color adaptation rather than a simple light-to-dark inversion.
What you get
Dark mode color palettes, surface elevation hierarchy, contrast-safe component specs, and desaturated accent guidance ready for implementation.
- dark palette specs
- surface hierarchy map
- contrast-safe component guidance
Files
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
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.698k164k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.486k29.4k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst382k15.8k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k470
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.284k66.9k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.282k109kHow it compares
Use dark-mode-design when agents need systematic dark-theme color and elevation rules instead of ad hoc hex picks or automatic inversion.
FAQ
What makes dark-mode-design different from inverting colors?
dark-mode-design lowers overall luminance, desaturates accents, and builds elevation through lighter surface layers instead of shadows. The skill enforces contrast and hierarchy so dark interfaces remain readable and comfortable rather than harsh inverted palettes.
What surface levels does dark-mode-design recommend?
dark-mode-design specifies a darkest background base, then Surface 1 and Surface 2 layers that grow progressively lighter to show elevation. Example guidance includes #121212 for the base background with lighter shades for elevated cards.
Is Dark Mode Design safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.