What is the dark-mode-design skill?
The dark-mode-design skill belongs to the ui-design plugin in Owl-Listener's designer-skills pack. It has your agent adapt an existing palette to dark surfaces: darkest background, stepped surface layers, softened colours, off-white text and prefers-color-scheme support, rather than simply inverting the light theme.
Dark-mode-design is a skill in the ui-design plugin of Owl-Listener's designer-skills. Its SKILL.md describes an expert in dark mode design and asks the agent to adapt an existing palette, not to create one from nothing.
The description says to use color-system for the base palette first. That ordering matters, because this skill assumes a palette exists and concentrates on how it changes when the interface turns dark.
Four principles
- Reduce overall luminance.
- Show elevation with lighter shades instead of shadows.
- Desaturate bright colours.
- Maintain contrast.
Surface hierarchy
- Background is the darkest layer, for example #121212.
- Surface 1 holds cards.
- Surface 2 holds modals and dropdowns.
- Surface 3 holds tooltips and menus.
Primary colours drop 10 to 20 percent in saturation. Body text uses off-white such as #E0E0E0 instead of pure white, and borders use subtle low-opacity white so edges stay quiet.
Images and accessibility
Images are dimmed slightly, illustrations get dark variants, logos switch to light-on-dark, and large bright areas are avoided. Body text keeps 4.5 to 1 contrast, prefers-color-scheme is respected, and users get both a manual toggle and auto-detect.
Who the dark-mode-design skill is for
Best for
- Adding a dark theme to a product with a finished light palette.
- Defining surface layers instead of reusing shadows.
- Checking images, logos and illustrations for the dark variant.
Not for
- Building the first palette. Start with color-system, as the description says.
- Applying themes in a component library. Related: ui-styling.
- Picking a ready-made theme. Related: theme-factory.
Use it with UiChemy
Dark surfaces are a design decision made before the build. UiChemy Figma to WordPress converts a Figma design to a WordPress site, and AI to WordPress imports an AI-generated build. Click Get Started on uichemy.com. Related: impeccable-audit.
How to install Dark Mode Design Skill: Surfaces and Contrast
/plugin marketplace add Owl-Listener/designer-skillsRegister the marketplace
Paste the command above into the agent. It only records the source repository and installs nothing yet.
Install ui-design
Run
/plugin install ui-design@designer-skills, or tick the plugin on the Discover tab of /plugin. dark-mode-design is included.Gemini CLI
Per the README, copy the repository's .gemini/extensions contents into a .gemini/extensions folder in your project.
Make the request
Share your light palette and ask for a dark mode adaptation. Mention any brand colours that must stay recognisable.
Check that it loaded
Give it a light palette. The reply should map a darkest background and three surface layers, reduced primary saturation, off-white text and a toggle plus system detection.
Key features
- Four dark principlesLower luminance, lighter shades for elevation, desaturated brights and preserved contrast frame every decision.
- Surface hierarchyBackground, Surface 1, Surface 2 and Surface 3 give cards, overlays and tooltips a defined order of lightness.
- Darkest backgroundA background such as #121212 sets the floor for the stack.
- Softened primariesPrimary colour saturation is reduced by 10 to 20 percent.
- Off-white textText uses a value such as #E0E0E0 instead of pure white.
- Subtle bordersBorders use low-opacity white, so edges separate surfaces without glare.
- Image handlingImages are dimmed, illustrations get dark variants and logos turn light-on-dark.
- Accessibility checksBody text keeps 4.5 to 1, with prefers-color-scheme respected and a manual toggle beside auto-detect.
- Mode announcementsThe skill advises testing mode changes with screen readers.
Frequently asked questions
What does dark-mode-design do?
It guides an AI agent to adapt an existing palette for dark interfaces. It covers luminance, elevation through lighter surfaces, desaturated colours, off-white text, image treatment and accessibility. It belongs to the ui-design plugin in Owl-Listener's designer-skills pack.
How do I install dark-mode-design?
Run /plugin marketplace add Owl-Listener/designer-skills, then /plugin install ui-design@designer-skills. Gemini CLI users copy the repository's .gemini/extensions contents into their project, following the README. Dark-mode-design comes with the ui-design plugin, so there is no separate install step to run afterwards.
Why not simply invert the light theme?
The skill lists it as a best practice to avoid. Inversion leaves shadows meaningless, keeps colours too saturated and can break contrast. Instead, elevation is shown with lighter surfaces, bright colours are desaturated, and text moves to off-white.
How does it show elevation without shadows?
Through a surface hierarchy. The background is darkest, for example #121212, then Surface 1 for cards, Surface 2 for modals and dropdowns and Surface 3 for tooltips and menus. Each step is lighter, so higher layers read as closer.
Does it need a palette first?
Yes, it adapts one that exists. The description says to use color-system for the base palette before this skill. If your light palette is already defined, you can give it directly and ask for the dark adaptation.
Which agents work with it?
The README names Claude Code and Gemini CLI as target agents. No other agent is named. The skill is plain instructions, so other tools that load skill folders may read it, but the repository makes no promise about that.
What does it say about images and logos?
Dim images slightly, supply dark-variant illustrations, use light-on-dark logos and avoid large bright areas. Together these stop media from glaring against dark surfaces, which is the most common visible flaw after a theme switch.
Which license does it use?
GitHub lists the repository as MIT licensed. That allows reading and reusing the skill text. Read the repository's license file for the full terms before you copy it into a product you distribute.