Agent skill for adding thoughtfully designed dark mode to existing UIs, balances contrast across text, surfaces, borders, and images for Claude Code, Cursor, Codex, and more.
Qué hace
ui.sh Add Dark Mode is a curated agent skill that adds a thoughtfully designed dark mode to an existing light UI. It adjusts text, backgrounds, borders, and shadows for appropriate contrast, and delegates raster image conversion to a companion dark-mode-image skill.
Dark mode done wrong looks like every light color value flipped, jarring contrast, washed-out illustrations, and surfaces that glow instead of recede. ui.sh Add Dark Mode treats dark mode as a design problem, not a CSS toggle.
ui.sh is a collection of agent skills built by Adam Wathan (creator of Tailwind CSS) and Steve Schoger (co-author of Refactoring UI). The skills ride on top of whichever coding agent you already use: Claude Code, Cursor, Codex, OpenCode, or Amp. Add Dark Mode is one skill in that suite, focused entirely on retrofitting dark mode onto an existing light UI.
Install the skill with the npx installer (npx @uidotsh/install add-dark-mode --token=<token>), then invoke /add-dark-mode inside your agent session. The skill adjusts text, backgrounds, borders, and shadows to maintain appropriate contrast across both modes. It also scans the codebase for raster images, illustrations, screenshots, and SVGs that need dark-mode variants, then hands image work off to the companion dark-mode-image skill. If you are using Codex's image generation model, the skill will attempt to generate dark-mode-optimized versions of those rasters automatically. You can also target a specific image directly: /dark-mode-image illustration.jpg.
The separation of concerns here is deliberate: surface styling stays in Add Dark Mode; pixel-level image adaptation goes to a dedicated skill. That split keeps each invocation focused and avoids bloated, do-everything prompts.
ui.sh is invite-only and, per Wathan, "uncomfortably early." The skill primitive itself is relatively new. Builders who need a stable, production-hardened dark mode pipeline should factor in that the platform is still being shaped in public.
Add Dark Mode is the right reach when your agent has produced a solid light-mode UI and you need dark mode that looks considered, not bolted on. It handles the design judgment calls that naive color inversion misses, and it delegates image work cleanly to a companion skill.
Características
Notas de campo
Revisado el Jun 26, 2026
Ideal para
Resultados para creadores
Ten cuidado
Probado con
Profundiza
Independent third-party review of ui.sh by Tailkits covering its origin (Adam Wathan & Steve Schoger), core pitch, and positioning as an AI design toolkit for coding agents.
Tailwind Weekly's editorial coverage of ui.sh's shift to local-first skills, providing a concrete changelog moment and independent commentary on the product's evolution.
ui.sh Add Dark Mode is a curated agent skill that retrofits a thoughtfully designed dark mode onto an existing light UI. Rather than inverting colors, it adjusts text, backgrounds, borders, and shadows to maintain appropriate contrast in both modes. It is part of the broader ui.sh suite, built by Adam Wathan and Steve Schoger, and runs inside coding agents like Claude Code, Cursor, Codex, OpenCode, and Amp.
Install it via the npx ui.sh installer: `npx @uidotsh/install add-dark-mode --token=<your-token>`. Once installed, invoke it inside your agent session with the slash command `/add-dark-mode`. To convert a specific image, use `/dark-mode-image filename.jpg`. Multiple skills can be installed at once by omitting the skill name from the install command.
The sources do not specify a public price or an open-source license for ui.sh Add Dark Mode. Access requires a ui.sh invite token, and the platform is currently invite-only. Builders should check ui.sh directly for current access and pricing details.
Add Dark Mode is best for projects that already have a solid light-mode UI and need dark mode added without manual color audit work. It is especially useful when the codebase includes raster images, illustrations, or SVGs that also need dark-mode variants, since the skill delegates that image work automatically to the companion dark-mode-image skill. It works across any agent that supports MCP, including Claude Code, Cursor, and Codex.
Generic dark mode implementations typically rely on CSS class toggles or simple color inversions that produce poor contrast and washed-out images. The ui.sh skill, built by the Tailwind CSS and Refactoring UI authors, applies design judgment to text hierarchy, surface colors, borders, and shadows rather than just flipping values. A separate community skill ('Dark Mode Implementer' on claudemarketplaces.com) covers Tailwind class strategy, CSS variables, and React context with SSR hydration, that alternative is better suited when you need a full React theme provider with localStorage persistence from scratch.
The platform is invite-only and Adam Wathan himself describes it as 'uncomfortably early,' so API stability and long-term support are not guaranteed. Dark-mode image generation requires Codex's image generation model, which may not be available in all setups. The skill also requires a valid ui.sh token, making it unavailable for fully offline or self-hosted workflows.
Una habilidad de IA que proporciona a los agentes de codificación inteligencia de diseño, reglas de razonamiento y estilos de interfaz para generar UI/UX profesional en distintas plataformas y frameworks.
Best for Arrancar un sistema de diseño a partir de la descripción de un proyecto.Una habilidad de diseño para Claude Code, Cursor y Codex que se niega a parecer generada por IA: elige una macroestructura para el encargo, aplica uno de veinte temas y ejecuta decenas de filtros anti-repetición antes de emitir el resultado.
Best for Diseñar UI que no parezca generada por IALa colección pública de Agent Skills de ejemplo para Claude de Anthropic: carpetas autocontenidas de instrucciones, scripts y recursos que abarcan tareas creativas, técnicas y empresariales, incluidas las skills de documentos que impulsan las capacidades de archivos de Claude.
Best for Aprender a crear Agent SkillsOpen-source collection of 45+ AI agent skills for marketing, CRO, SEO, copywriting, analytics, and growth, built for Claude Code, Cursor, and any Agent Skills-compatible agent.
Best for Technical marketers and founders using Claude Code, Cursor, Windsurf, or OpenAI Codex who want marketing domain knowledge baked inOpen-source PM skills marketplace: 68 AI skills and 42 workflows across 9 Claude plugins for product managers doing discovery, strategy, execution, and launch.
Best for PMs using Claude Code or Claude Cowork who want framework-driven decisions baked into daily AI workflowsA catalog of repeatable AI agent workflows with built-in feedback loops, plus an installable skill for finding, adapting, and designing your own loops.
Best for Teams using Codex, Cursor, or Claude Code who want agents to iterate reliably instead of making one-shot guesses