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.

Install to Claude Code

npx -y skills add owl-listener/designer-skills --skill dark-mode-design --agent claude-code