add-dark-mode-support
OfficialSeamlessly add dark mode to frontend components.
Authorcodecrafters-io
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This skill enables applying dark mode styling to frontend components by utilizing Tailwind's dark: variant classes, simplifying theme consistency when building new components or adapting existing ones for dark contexts.
Core Features & Use Cases
- Dark mode activation via a DarkModeService and a root container toggle.
- Route-aware color schemes through RouteInfoMetadata to support light, dark, or both modes.
- Consistent color patterns (backgrounds, borders, text) across components for both themes.
Quick Start
Configure your app to enable dark mode by wiring the DarkModeService and adding the dark class to the root container. Update routes with RouteInfoMetadata to declare colorScheme support, and apply corresponding Tailwind dark: variant classes in components.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: add-dark-mode-support Download link: https://github.com/codecrafters-io/frontend/archive/main.zip#add-dark-mode-support Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.