# ui.sh Add Dark Mode By **ui-sh** ยท Habilidades 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. - Source: https://ui.sh/skills/add-dark-mode - Install: `npx @uidotsh/install add-dark-mode --token=[token]` - Tags: dark-mode, ui, tailwind, agent-skill, open-source, design, css, cli - Pricing: unknown - Upvotes: 0 ## Features - Adds dark mode to existing light UIs via a single slash command - Adjusts text, backgrounds, borders, and shadows for correct contrast - Scans codebase for images, illustrations, screenshots, and SVGs needing dark variants - Delegates raster image conversion to the companion dark-mode-image skill - Supports targeted image conversion with /dark-mode-image - Integrates with Codex image generation model for automated dark-mode image output - Agent-agnostic: works with Claude Code, Cursor, Codex, OpenCode, and Amp - Installed via npx CLI with a ui.sh token --- ## Why it matters 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. ## The big picture 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. ## How it works Install the skill with the npx installer (`npx @uidotsh/install add-dark-mode --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`. ## Zoom in 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. ## Yes, but 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. ## The bottom line 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. ## FAQ ### What is ui.sh Add Dark Mode? 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. ### How do I install and use this skill? Install it via the npx ui.sh installer: `npx @uidotsh/install add-dark-mode --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. ### Is ui.sh Add Dark Mode free or open source? 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. ### What is this skill best for? 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. ### How does this compare to manually implementing dark mode or using a generic skill? 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. ### What are the limitations or risks of using this skill? 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. --- [View on Analog](https://analoghq.ai/pt-br/ui-sh/skills/ui-sh-add-dark-mode)