Can I use this with Tailwind CSS?

Absolutely. The skill supports both standard CSS variables and Tailwind CSS class-based or media-query-based dark mode configurations.

Is the generated code accessible?

Yes, the skill prioritizes WCAG 2.2 compliance, ensuring text and interactive elements maintain required contrast ratios for both standard and high-contrast dark themes.

What files does this skill generate?

It typically creates a centralized color theme file (CSS), a functional theme toggle component, Storybook previews, and implementation documentation.

Does this skill just invert colors?

No, it uses intelligent transformations to adjust brand colors and surfaces for optimal contrast and readability, rather than simple mathematical inversion which often fails accessibility standards.

Does it work with existing Storybook setups?

Yes, it is designed to integrate with Storybook to create side-by-side theme previews and updated story variants for comprehensive UI testing.

Dark Mode Generator

Name: Dark Mode Generator
Author: flight505

byflight505

デザインツール

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.

主な機能

Intelligent color inversion with contrast preservation
Seamless Storybook integration with side-by-side previews
Automated CSS variable and Tailwind CSS generation
WCAG 2.2 accessibility compliance checking
Ready-to-use React theme toggle components
0 GitHub stars

ユースケース

Automating theme-specific Storybook documentation for UI components
Generating accessible color palettes for high-contrast accessibility modes
Adding dark mode support to an existing light-only design system

概要

主な機能

Intelligent color inversion with contrast preservation
Seamless Storybook integration with side-by-side previews
Automated CSS variable and Tailwind CSS generation
WCAG 2.2 accessibility compliance checking
Ready-to-use React theme toggle components
0 GitHub stars

ユースケース

Automating theme-specific Storybook documentation for UI components
Generating accessible color palettes for high-contrast accessibility modes
Adding dark mode support to an existing light-only design system