Automatically generates accessible dark mode color palettes and implementation code from light mode designs.
The Dark Mode Generation skill enables Claude to intelligently transform light mode components into high-quality dark mode variants by analyzing existing colors and applying accessibility-conscious transformations. It handles the heavy lifting of color inversion, contrast ratio preservation (WCAG 2.2), and theme system implementation, generating everything from CSS variables and Tailwind configurations to interactive theme toggle components and updated Storybook stories. This is an essential tool for developers looking to implement production-ready dark mode support in minutes rather than hours.
Key Features
01Intelligent color inversion with contrast preservation
02Seamless Storybook integration with side-by-side previews
03Automated CSS variable and Tailwind CSS generation
04WCAG 2.2 accessibility compliance checking
05Ready-to-use React theme toggle components
060 GitHub stars
Use Cases
01Automating theme-specific Storybook documentation for UI components
02Generating accessible color palettes for high-contrast accessibility modes
03Adding dark mode support to an existing light-only design system
