dark-mode-gen

What This Skill Does

The dark-mode-gen skill is an automated developer assistant designed to streamline the implementation of dark mode across React-based codebases. Instead of manually refactoring hundreds of CSS properties or adding Tailwind dark: prefixes to every single element, this tool uses intelligent code parsing to analyze your components and inject the necessary theme-aware styles automatically. It supports a variety of styling patterns, including native CSS variables, CSS modules, Tailwind CSS, and styled-components, ensuring flexibility regardless of your project's current technical debt.

By leveraging the power of AI, the skill understands contextual color relationships, allowing it to transition light-mode color palettes into their logical dark-mode counterparts without disrupting the component layout or structure. It handles the complex logic of prefers-color-scheme media queries, providing a seamless user experience that respects system-level theme settings. This utility is a core component of the LXGIC Dev Toolkit, designed to drastically reduce the time developers spend on repetitive stylistic maintenance.

Installation

To begin using this skill within OpenClaw, execute the following command in your terminal:

clawhub install openclaw/skills/skills/lxgicstudios/dark-mode-gen

Note that while the tool is triggered through OpenClaw, it requires Node.js 18+ to execute properly. Additionally, since the skill utilizes generative AI to interpret and refactor code, ensure your environment has the OPENAI_API_KEY exported as an environment variable. No permanent local installation is required, as the utility leverages npx for runtime execution.

Use Cases

• Retrofitting legacy projects: Quickly convert large UI libraries to support dark mode without manual refactoring.
• Cross-file standardization: Ensuring consistency across a project where different developers may have used inconsistent naming conventions.
• Rapid Prototyping: Automating the stylistic boilerplate, allowing developers to focus on feature logic rather than CSS updates.
• Migration: Assisting in the shift from hardcoded hex codes to dynamic CSS variables for better design system maintainability.

Example Prompts

• "Hey OpenClaw, run dark-mode-gen on the ./src/components/Navigation.tsx file and make sure it respects system preferences."
• "Can you add dark mode support to the entire ./src/pages/ directory using Tailwind CSS classes?"
• "Perform a dry run of the dark-mode-gen skill on the sidebar component to show me the proposed style changes before I commit them."

Tips & Limitations

When using dark-mode-gen, it is best practice to always perform a --dry-run first. This allows you to inspect the suggested changes, ensuring that the AI has interpreted your existing color logic correctly. While the tool is highly accurate, complex custom CSS logic or dynamic styles generated through proprietary JS logic might require minor manual verification. Furthermore, remember that dark mode is not just about inverting colors; always verify that the contrast ratios remain accessible after the conversion. Finally, don't forget that assets like images or complex SVG illustrations might require separate, manual dark-mode variations that an automated script cannot inherently generate.