How do I install the Dark Mode skill?

Run npx skillmds@latest add dvcrn/dark-mode in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Dark Mode safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: executes scripts, makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Dark Mode?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Dark Mode free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Dark Mode?

dvcrn (@dvcrn) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Dark Mode by dvcrn — Agent Skill

Name: Dark Mode
Rating: 4.5 (4 reviews)
Author: dvcrn

File contents

Dark Mode Generator

Tired of manually writing dark mode variants? This tool scans your components and generates the CSS or Tailwind classes you need. Point it at a file, get dark mode support back. No overthinking required.

One command. Zero config. Just works.

Quick Start

npx ai-dark-mode ./src/components/Button.tsx

What It Does

Analyzes your component's existing styles and color usage
Generates matching dark mode variants that actually look good
Works with plain CSS, Tailwind, or CSS-in-JS
Outputs clean, copy-paste ready code
Respects your existing design system colors

Usage Examples

# Generate dark mode for a single component
npx ai-dark-mode ./src/components/Card.tsx

# Process an entire directory
npx ai-dark-mode ./src/components/ --recursive

# Output Tailwind dark: classes
npx ai-dark-mode ./src/Button.tsx --format tailwind

# Generate CSS custom properties
npx ai-dark-mode ./src/styles/main.css --format css-vars

Best Practices

Start with your design tokens - If you have a color palette defined, the AI will reference it for consistent results
Review contrast ratios - The tool tries to maintain readability but always double check accessibility
Test in both modes - Generated styles are smart but not perfect. Toggle between modes to catch edge cases
Keep backgrounds in mind - Dark mode isn't just inverting colors. Think about elevation and depth

When to Use This

You inherited a codebase with no dark mode and need to add it fast
Building a new component and want dark variants from the start
Converting a design system to support theme switching
Quick prototyping where you want both modes without manual work

Part of the LXGIC Dev Toolkit

This is one of 110+ free developer tools built by LXGIC Studios. No paywalls, no sign-ups, no API keys on free tiers. Just tools that work.

Find more:

GitHub: https://github.com/LXGIC-Studios
Twitter: https://x.com/lxgicstudios
Substack: https://lxgicstudios.substack.com
Website: https://lxgic.dev

Requirements

No install needed. Just run with npx. Node.js 18+ recommended.

npx ai-dark-mode --help

How It Works

The tool parses your component file, extracts color values and style definitions, then uses AI to generate semantically appropriate dark mode alternatives. It understands that light backgrounds become dark, text colors flip for contrast, and subtle grays need careful adjustment.

License

MIT. Free forever. Use it however you want.

---name: dark-modedescription: Add dark mode support to components using AI. Use when building theme toggles or retrofitting dark mode.---# Dark Mode GeneratorTired of manually writing dark mode variants? This tool scans your components and generates the CSS or Tailwind classes you need. Point it at a file, get dark mode support back. No overthinking required.**One command. Zero config. Just works.**## Quick Start```bashnpx ai-dark-mode ./src/components/Button.tsx```## What It Does- Analyzes your component's existing styles and color usage- Generates matching dark mode variants that actually look good- Works with plain CSS, Tailwind, or CSS-in-JS- Outputs clean, copy-paste ready code- Respects your existing design system colors## Usage Examples```bash# Generate dark mode for a single componentnpx ai-dark-mode ./src/components/Card.tsx# Process an entire directorynpx ai-dark-mode ./src/components/ --recursive# Output Tailwind dark: classesnpx ai-dark-mode ./src/Button.tsx --format tailwind# Generate CSS custom propertiesnpx ai-dark-mode ./src/styles/main.css --format css-vars```## Best Practices- **Start with your design tokens** - If you have a color palette defined, the AI will reference it for consistent results- **Review contrast ratios** - The tool tries to maintain readability but always double check accessibility- **Test in both modes** - Generated styles are smart but not perfect. Toggle between modes to catch edge cases- **Keep backgrounds in mind** - Dark mode isn't just inverting colors. Think about elevation and depth## When to Use This- You inherited a codebase with no dark mode and need to add it fast- Building a new component and want dark variants from the start- Converting a design system to support theme switching- Quick prototyping where you want both modes without manual work## Part of the LXGIC Dev ToolkitThis is one of 110+ free developer tools built by LXGIC Studios. No paywalls, no sign-ups, no API keys on free tiers. Just tools that work.**Find more:**- GitHub: https://github.com/LXGIC-Studios- Twitter: https://x.com/lxgicstudios- Substack: https://lxgicstudios.substack.com- Website: https://lxgic.dev## RequirementsNo install needed. Just run with npx. Node.js 18+ recommended.```bashnpx ai-dark-mode --help```## How It WorksThe tool parses your component file, extracts color values and style definitions, then uses AI to generate semantically appropriate dark mode alternatives. It understands that light backgrounds become dark, text colors flip for contrast, and subtle grays need careful adjustment.## LicenseMIT. Free forever. Use it however you want.

Frequently asked questions

Dark Mode