Dark Mode Design
owl-listener/designer-skillsDesigning for dark mode means creating interfaces that are easy on the eyes. The goal is to reduce eye strain while keeping everything readable and beautiful. Dark mode is not just a color swap. It needs careful choices for contrast, surface depth, and color saturation.
Anyone who builds websites or apps benefits from good dark mode design. Users in low light will thank you. This skill teaches you how to pick the right dark backgrounds, adjust colors, and test for accessibility. Accessibility matters. You need at least 4.5:1 contrast for text and a manual toggle for users.
Follow simple principles like using lighter shades for elevated surfaces instead of shadows. Desaturate bright colors and test in real dark environments. Smooth transitions between light and dark modes make the experience polished and professional.
Add Dark Mode Design skill to your workflow
Global
mkdir -p ~/.claude/skills/dark-mode-designProject
mkdir -p .claude/skills/dark-mode-designSource Repository
More Design & UI/UX Claude Code Skills
Prototypemattpocock/skills
Quick throwaway prototypes to test logic or UI before building
Lark Whiteboardlarksuite/cli
View, edit, and export Lark whiteboards as images or code easily
Sleek Design Mobile Appssleekdotdesign/agent-skills
Turn your app ideas into mobile screens just by describing them
Brainstormingobra/superpowers
Brainstorm your ideas into a clear design and get approval before building anything
Ui Ux Pro Maxnextlevelbuilder/ui-ux-pro-max-skill
All-in-one UI/UX design assistant with styles, colors, fonts, and guidelines for any platform
Redesign Existing Projectsleonxlnx/taste-skill
Upgrade your existing website or app with a professional design audit
Stitch Design Tasteleonxlnx/taste-skill
Create premium, non-generic UI designs with strict color, typography, and layout rules
Brandkitleonxlnx/taste-skill
Create premium brand-kit images that feel intentional, minimal, and presentation-ready