An automated tool that injects dark mode support into React components using CSS variables or Tailwind prefixes.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install dark-mode-gen
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-gen 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 streamline the process of theme implementation in modern web projects. By integrating this into your Openclaw Skills library, you can transform static light-mode components into adaptive, theme-aware UI elements without manual effort.
This tool is particularly valuable for developers who need to implement dark mode across hundreds of components quickly. It works by intelligently parsing your component files and applying the necessary CSS variables or Tailwind utility classes to handle dark mode transitions effectively, ensuring your project meets modern design standards with minimal overhead.
Dark Mode Generator Use Cases
- Adding dark mode support to legacy projects or components that only have light themes.
- Standardizing theme implementation across large component libraries or directories.
- Rapidly prototyping dark-themed interfaces while maintaining design consistency.
- Converting hardcoded colors into flexible CSS variables for better maintainability.
How Dark Mode Generator Works
- The tool scans the target file or directory specified in the CLI command.
- It identifies existing color definitions, hardcoded styles, and layout structures within React components.
- Depending on the project configuration, it injects Tailwind dark: prefixes or wraps styles in prefers-color-scheme media queries.
- It preserves the original code structure and logic while ensuring contrast accessibility.
- Users can verify changes using the dry-run flag before finalizing the updates.
Dark Mode Generator Setup
To get started with this skill, ensure you have Node.js 18+ installed and an OPENAI_API_KEY set in your environment variables. No permanent installation is required; simply execute via npx to leverage Openclaw Skills functionality:
# Set your API key
export OPENAI_API_KEY='your_api_key_here'
# Run on a single file
npx ai-dark-mode ./src/components/Card.tsx
# Run on a directory
npx ai-dark-mode ./src/components/
Dark Mode Generator Data Schema & Taxonomy
The Dark Mode Generator organizes its operations based on the existing file structure of your project. It primarily interacts with component and style files:
| Feature | Description |
|---|---|
| Supported Formats | .tsx, .jsx, .js, .css |
| Styling Engines | Tailwind CSS, Styled-Components, CSS Variables |
| Output Logic | In-place modification of files or dry-run terminal output |
| Dependency | Requires Node.js and OpenAI API for intelligent style mapping |
Dark Mode Generator Advanced Features
- Bulk directory processing for large-scale theme migrations in a single command.
- Dry-run mode to preview style changes in the terminal without modifying source files.
- Intelligent detection of prefers-color-scheme to respect system-level user preferences.
- Compatibility with multiple styling paradigms including utility-first and CSS-in-JS.
SKILL.md
Loading
Related Openclaw Skills
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.
Cron Writer
Transform natural language descriptions into precise cron syntax with AI-powered validation and next-run previews.
Dark Mode Generator
Automatically generate dark mode CSS and Tailwind variants for your UI components using AI.
Data Transform Generator
A zero-config CLI utility that uses AI to generate complete ETL and data transformation scripts for seamless system migrations.
Featured*
