Automatically generate dark mode CSS and Tailwind variants for your UI components using AI.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install dark-mode
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install dark-mode using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Dark Mode Generator?
The Dark Mode Generator is a specialized utility designed to eliminate the manual labor involved in creating theme-switched interfaces. As part of the Openclaw Skills ecosystem, it leverages AI to analyze existing color palettes and design tokens, producing semantically correct dark mode alternatives that maintain high contrast and aesthetic appeal. Whether you are retrofitting a legacy project or building a new design system from scratch, this tool ensures your application remains accessible in any lighting condition by automating the styling process.
Dark Mode Generator Use Cases
- Retrofitting existing codebases with dark mode support without manual styling.
- Generating Tailwind dark: classes for new React, Vue, or HTML components.
- Creating CSS custom property sets for theme switching in advanced design systems.
- Rapidly prototyping UI variations for both light and dark themes using Openclaw Skills workflows.
How Dark Mode Generator Works
- The tool parses the target component or directory to identify existing style definitions and design tokens.
- It extracts hex codes, RGB values, and CSS classes used for backgrounds, text, and borders.
- An AI model analyzes the semantic hierarchy to determine appropriate dark mode equivalents.
- The skill generates copy-paste ready code or updates files with the requested format, such as Tailwind or CSS-vars.
Dark Mode Generator Setup
Ensure you have Node.js 18+ installed. Using this as part of your Openclaw Skills workflow requires no local installation, as the utility can be executed directly via npx.
npx ai-dark-mode --help
To process a specific file and generate Tailwind classes, run:
npx ai-dark-mode ./src/components/Button.tsx --format tailwind
Dark Mode Generator Data Schema & Taxonomy
The skill processes source code files and outputs updated style definitions. It maps light-theme properties to dark-theme equivalents as part of the Openclaw Skills data transformation layer.
| Attribute | Description |
|---|---|
| Input Path | File or directory containing components (.tsx, .jsx, .css) |
| Format | Selection of output style (tailwind, css-vars, or standard-css) |
| Design Tokens | Optional reference to existing color palettes for consistency |
Dark Mode Generator Advanced Features
- Recursive directory processing to update entire component libraries in a single command.
- Multi-format support including Tailwind CSS, CSS Custom Properties, and CSS-in-JS libraries.
- Design token integration to ensure output matches your brand's specific palette within Openclaw Skills automation.
- Intelligent contrast ratio checking to ensure accessibility compliance between themes.
SKILL.md
Loading
Related Openclaw Skills
Dark Mode Generator
An automated tool that injects dark mode support into React components using CSS variables or Tailwind prefixes.
CSVKit Next
A high-performance, zero-dependency CLI toolkit for filtering, transforming, merging, and analyzing CSV data at scale.
CSS to Tailwind Converter
Automatically convert vanilla CSS files into Tailwind CSS utility classes using AI-driven mapping.
CSP Generator
An automated utility to analyze web resources and generate secure Content Security Policy headers to mitigate XSS vulnerabilities.
Data Transform Generator
A zero-config CLI utility that uses AI to generate complete ETL and data transformation scripts for seamless system migrations.
deps-analyzer
A smart dependency auditor that identifies unused packages and security risks using AI to streamline your project's footprint.
Featured*
