Dark Mode Design
This teaches Claude to design dark mode interfaces that actually work, not just inverted colors. It covers the full stack: surface elevation through lighter shades instead of shadows, color desaturation for dark backgrounds, and proper contrast ratios for accessibility. The surface hierarchy guidance is especially useful, with specific recommendations like #121212 for backgrounds and #E0E0E0 for text instead of pure white. It also handles the stuff people forget, like dimming images, providing dark variant logos, and respecting prefers-color-scheme while still offering manual toggles. Good if you're building a design system or need to ship dark mode that doesn't look like a rushed afterthought.
- skills.sh installs
- 2.7K
- GitHub stars
- 3.3K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add owl-listener/designer-skills --skill dark-mode-design --agent claude-codeInstalls into .claude/skills of the current project.
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
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/owl-listener/designer-skills
- Category
- Design & UI/UX
- First seen
- Jun 3, 2026
More from owl-listener/designer-skills
All 68- User Flow Diagram2.7K
- Icon System2.6K
- Layout Grid2.6K
- Heuristic Evaluation2.6K
- Data Visualization2.6K
- Spacing System2.5K
- Responsive Design2.5K
- Wireframe Spec2.5K
- Micro Interaction Spec2.5K
- Loading States2.5K
- Animation Principles2.5K
- Design Critique2.5K
- Design Qa Checklist2.5K
- Design Token Audit2.5K
- State Machine2.4K
- Error Handling Ux2.4K
- Design Token2.4K
- Usability Test Plan2.4K
- Accessibility Audit2.4K
- Case Study2.4K
- Ux Writing2.4K
- Journey Map2.4K
- Component Spec2.4K
- Design Principles2.4K
Recommended
More Design & UI/UX
animation-principlesowl-listener/designer-skillsApply animation principles to UI motion for purposeful, polished interactions.2.5Kskills.sh installsaccessibility-auditowl-listener/designer-skillsConduct a comprehensive accessibility audit against WCAG guidelines with severity ratings and remediation steps.2.4Kskills.sh installs
claude-designjiji262/claude-design-skillProduce thoughtful, high-fidelity design artifacts in HTML — landing pages, slide decks, interactive prototypes, animated videos, posters, wireframes, and visua2.3Kskills.sh installs
muapi-ui-designsamuraigpt/generative-media-skillsGenerate high-fidelity UI/UX mockups for mobile and web apps using Atomic Design principles — creates wireframes and design systems via muapi.ai2.2Kskills.sh installs
antfu-designantfu/skillsantfu-style design conventions, broadened. UnoCSS-first, class-based semantic tokens with dual light/dark for tooling and devtools UIs, plus design-read, anti-s2.1Kskills.sh installsmotion-systemowl-listener/designer-skillsDefine a motion system with duration tokens, easing vocabulary, and reduced-motion handling for consistent animation across a product.2.1Kskills.sh installs