什么是 深色模式生成器？

深色模式生成器是一款专门设计的实用工具，旨在简化现代 Web 项目中主题实现的过程。通过将其集成到您的 Openclaw Skills 库中，您可以无需手动操作，将静态浅色模式组件转换为自适应、感知主题的 UI 元素。

该工具对于需要在数百个组件中快速实现深色模式的开发者尤为重要。它通过智能解析您的组件文件，并应用必要的 CSS 变量或 Tailwind 工具类来有效处理深色模式转换，确保您的项目以最低的开销满足现代设计标准。

下载入口:https://github.com/openclaw/skills/tree/main/skills/lxgicstudios/dark-mode-gen

安装与下载

1. ClawHub CLI

从源直接安装技能的最快方式。

2. 手动安装

将技能文件夹复制到以下位置之一

优先级：工作区 > 本地 > 内置

3. 提示词安装

将此提示词复制到 OpenClaw 即可自动安装。

深色模式生成器 应用场景

• 为仅有浅色主题的遗留项目或组件添加深色模式支持。
• 在大型组件库或目录中标准化主题实现方式。
• 在保持设计一致性的同时，快速原型化深色主题界面。
• 将硬编码颜色转换为灵活的 CSS 变量，以提高可维护性。

1. 该工具扫描 CLI 命令中指定的目标文件或目录。
2. 它识别 React 组件中现有的颜色定义、硬编码样式和布局结构。
3. 根据项目配置，它注入 Tailwind 的 dark: 前缀或将样式封装在 prefers-color-scheme 媒体查询中。
4. 它在确保对比度可访问性的同时，保留原始代码结构和逻辑。
5. 用户可以在最终确认更新前，使用 dry-run 标志验证更改。

深色模式生成器 配置指南

要开始使用此技能，请确保已安装 Node.js 18+ 并在环境变量中设置了 OPENAI_API_KEY。无需永久安装；只需通过 npx 执行即可利用 Openclaw Skills 功能：

# 设置您的 API 密钥
export OPENAI_API_KEY='your_api_key_here'

# 在单个文件上运行
npx ai-dark-mode ./src/components/Card.tsx

# 在目录上运行
npx ai-dark-mode ./src/components/

深色模式生成器 数据架构与分类体系

深色模式生成器根据项目的现有文件结构组织其操作。它主要与组件和样式文件进行交互：

name: dark-mode-gen
description: Add dark mode support to components. Use when implementing dark theme.

Dark Mode Generator

Adding dark mode means updating every component with CSS variables or Tailwind dark: prefixes. This tool does it automatically for single files or entire directories.

One command. Zero config. Just works.

Quick Start

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

What It Does

• Adds dark mode styles to React components
• Works with CSS variables, Tailwind, or styled-components
• Handles prefers-color-scheme media queries
• Preserves existing styles and structure

Usage Examples

# Single component
npx ai-dark-mode ./src/components/Card.tsx

# Entire directory
npx ai-dark-mode ./src/components/

# Preview before writing
npx ai-dark-mode ./src/components/Card.tsx --dry-run

Best Practices

• Use CSS variables - easier to maintain than hardcoded colors
• Test both modes - make sure contrast is good in both
• Don't forget images - some graphics need light/dark variants
• Respect system preference - use prefers-color-scheme

When to Use This

• Adding dark mode to an existing project
• Converting components that only have light styles
• Standardizing dark mode implementation across files
• Quick prototyping with dark mode support

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://lxgicstudios.com

Requirements

No install needed. Just run with npx. Node.js 18+ recommended. Needs OPENAI_API_KEY environment variable.

npx ai-dark-mode --help

How It Works

Reads your component files, identifies color definitions and styles, then adds appropriate dark mode variants. For Tailwind it adds dark: prefixes. For CSS it uses CSS variables with prefers-color-scheme.

License

MIT. Free forever. Use it however you want.