# ui.sh Dark Mode Image By **ui-sh** ยท Skills Agent skill that regenerates light-mode raster images as true dark-mode variants using gpt-image-2, for interface builders using Claude Code, Cursor, or Codex. - Source: https://ui.sh/skills/dark-mode-image - Install: `npx @uidotsh/install dark-mode-image --token=[token]` - Tags: dark-mode, image-generation, agent-skill, ui, tailwind, open-ai, raster, invite-only - Pricing: unknown - Upvotes: 0 ## Features - Regenerates raster images (PNG, etc.) for dark backgrounds via AI image generation - Preserves composition, softness, fades, and overall character of the original - Handles screenshots, product mockups, illustrations, photos, and textures - Produces real dark-mode image files, not CSS filter approximations - Powered by OpenAI gpt-image-2 through the Codex model requirement - Integrates into existing coding agent workflows via the ui.sh installer - Single-command invocation: /dark-mode-image - Part of a broader ui.sh skill suite for AI-assisted interface building --- ## Why it matters CSS `filter: invert()` is a shortcut, not a solution. It shifts hues, kills brand colors, and makes images look wrong on dark surfaces. ui.sh Dark Mode Image generates a genuine dark-mode variant of a raster image by handing the work off to OpenAI's gpt-image-2 model, so the result looks designed, not flipped. ## 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 install into whatever coding agent you already use: Claude Code, Cursor, Codex, OpenCode, or Amp. Dark Mode Image is the skill specifically for raster assets, sitting alongside Add Dark Mode (which handles code and component theming). ## How it works Install the skill through the ui.sh installer with your token, then invoke it with a single command pointing at a file: `/dark-mode-image product-screenshot.png`. The skill routes the image to Codex, which uses gpt-image-2 to produce a new version suited for dark backgrounds. Per the skill's own docs, it preserves the original's size, composition, softness, fades, and character. ## Zoom in This skill is raster-only. It covers screenshots, illustrations, product mockups, photos, backgrounds, and textures. It does not handle SVG or CSS-based assets. For component-level dark mode in code, the sibling skill Add Dark Mode is the right reach. ## Yes, but ui.sh is currently invite-only, and Wathan himself describes the current state as "uncomfortably early." The Dark Mode Image skill also has a hard model dependency: Codex with gpt-image-2. That requirement narrows which agent setups will work without additional configuration. ## The bottom line If your interface uses raster images and you're shipping dark mode, this skill removes one of the most tedious manual steps: producing adapted image assets that actually look right on dark surfaces. It's a narrow skill, but the problem it solves is real and the approach is fundamentally more correct than any CSS workaround. ## FAQ ### What does ui.sh Dark Mode Image actually do? ui.sh Dark Mode Image is an agent skill that converts light-mode raster images into dark-mode variants using AI image generation. It runs through Codex, which uses OpenAI's gpt-image-2 model, and produces a new image file adapted for dark surfaces. Critically, it generates a real image asset rather than approximating the effect with a CSS filter, so the result preserves the original's composition, softness, and visual character. ### How do I install and use this skill? Install it via the ui.sh npx installer by running `npx @uidotsh/install dark-mode-image --token=[your-token]`. Once installed, invoke it inside your coding agent with `/dark-mode-image ` pointing at the raster image you want to adapt. You need a valid ui.sh token, which requires an invite, since the platform is currently invite-only. ### Is ui.sh Dark Mode Image free or open source? The sources do not specify a price or license for this skill. Access to ui.sh requires an invite, and installation requires a token, suggesting it is not fully open. Pricing details are not publicly stated in the available documentation. ### What is this skill best for? This skill is best for interface builders who have light-mode raster assets (screenshots, product mockups, illustrations, photos, backgrounds, or textures) that need proper dark-mode counterparts. It is the right tool when CSS filter hacks are producing unacceptable results and you need image files that look intentionally designed for a dark surface. ### How does this compare to the ui.sh Add Dark Mode skill? Dark Mode Image and Add Dark Mode solve different parts of the dark mode problem. Add Dark Mode works on UI code and component theming, handling color tokens, CSS variables, and Tailwind configuration. Dark Mode Image handles raster asset files specifically, regenerating the image itself for dark backgrounds. For a full dark mode implementation you would likely use both, reaching for Dark Mode Image only when raster assets are involved. ### What are the main limitations of this skill? The skill only handles raster images: SVG files and CSS-based visuals are out of scope. It has a hard dependency on Codex with OpenAI's gpt-image-2 model, so agent setups that don't include that model won't work. Additionally, ui.sh is currently invite-only and described by its creator as 'uncomfortably early,' meaning the platform is actively evolving and some rough edges should be expected. --- [View on Analog](https://analoghq.ai/ui-sh/skills/ui-sh-dark-mode-image)