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.
What it does
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.
Features
Field notes
Reviewed Jun 26, 2026
Best for
Builder outcomes
Watch out
Tested with
Go deeper
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.
Open-source AI design intelligence skill for Claude Code: UI styles, color palettes, font pairings, and UX guidelines in one searchable database.
Best for Builders who get solid AI-generated code but consistently end up with generic-looking interfacesA design skill for Claude Code, Cursor, and Codex that blocks AI visual clichés and generates structurally distinct, non-template UI, for builders and designers.
Best for Builders using Claude Code, Cursor, or Codex who want AI-generated UIs that avoid recognizable LLM visual fingerprintsAnthropic's official skill library for Claude: modular SKILL.md bundles that add repeatable, domain-specific workflows across docs, dev, design, and enterprise tasks.
Best for Teams who need Claude to follow repeatable, specialized workflows across many sessions without re-promptingOpen-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