Color and dark mode skill.
Teaches your AI coding agent to build color as a system: role tokens in OKLCH, true neutral greys, one accent, dark mode and light mode designed separately, and contrast checked by a script.
Good interfaces use less color than you would think. With this skill your agent finishes the greys first, then adds a single accent taken from what the product is about rather than the usual AI purple, and designs the dark and light themes as two palettes rather than one inverted from the other. A bundled script checks every text and control pair against WCAG contrast and flags colors the screen cannot show.
- Skill
wensity-color- Plan
- Included with Wensity Pro
- Loads when
- Choosing a palette, setting up theme tokens, adding dark or light mode, or fixing contrast
- Works in
- Claude Code, Codex, Cursor, GitHub Copilot, Windsurf, Gemini CLI, OpenCode
- Format
- Agent Skills (SKILL.md), plain files in your project
- Pack
- One of the Wensity design skills for AI coding agents
Install
1. Sign in once. The CLI asks for an API token from your dashboard and saves it, so you never paste it into a chat.
pnpm dlx wensity@latest login
npx wensity@latest login
yarn dlx wensity@latest login
bunx wensity@latest login
2. Add the skill. It goes into every agent the CLI finds in your project.
pnpm dlx wensity@latest skills add wensity-color
npx wensity@latest skills add wensity-color
yarn dlx wensity@latest skills add wensity-color
bunx wensity@latest skills add wensity-color
Color and dark mode comes with Wensity Pro, together with every Pro skill, component, block and template.
Get ProWhen it loads
You never call a skill by name. Your agent reads the short description at the top of every installed skill and loads this one when the work calls for it. Requests like these bring it in:
- Set up a proper color system with dark and light themes for this app.
- The colors look muddy and the contrast is low. Fix them.
- Add dark mode to this shadcn/ui project.
What it covers
- OKLCH tokens by role
- Background, three surface levels, three border strengths, three text levels, accent, focus and status, each with a contrast target.
- shadcn/ui mapping
- Which skill token goes in which shadcn variable, including the trap where shadcn's accent is a hover tint and not the brand color.
- Neutrals and the accent
- True neutral greys with no tint carry the layout, and the accent is tuned separately for dark and for light.
- Two real themes
- How elevation, shadows, saturated colors and images change between dark and light, with no flash of the wrong theme.
- Gradients and charts
- Gradients in one hue family without banding or a muddy middle, and chart palettes that stay readable.
- The contrast check
- A script your agent runs after every palette change, which exits with an error when a pair fails.
Flip the theme
One orders screen for a coffee roaster, shown dark and light at the same time. Flip the switch to trade hex values picked by eye for one set of roles, then show the colours to see what each part asks for.
Wholesale orders
3 open, 1 past due
Little Ferry Café
24 bags
Osteria Nove
12 bags
Hart & Lowe Bakery
40 bags
Dark: 3 of 7 text and control colours fail contrast.
Wholesale orders
3 open, 1 past due
Little Ferry Café
24 bags
Osteria Nove
12 bags
Hart & Lowe Bakery
40 bags
Light: 6 of 7 text and control colours fail contrast.
Without the skill: Each spot got a hex chosen by eye, and light mode is the dark set turned over. The same orange carries white text in both, the greys go faint, and the status words vanish on white.
Check a pair
Choose a text colour and a background to read their contrast ratio, measured live. When a pair fails for body text, fix it the way the skill does: by moving lightness alone.
Text colour: Pebble
Background: White
Without the skill
Spring roast is in
Washed Ethiopian with stone fruit and black tea. Orders placed by Thursday ship Monday.
2.67:1
- Body textNeeds 4.5:1
- Large text, 24px and upNeeds 3:1
- IconsNeeds 3:1
Without the skill: Shipped as picked: too faint for body text on white, and nothing checked it.
With the skill
Spring roast is in
Washed Ethiopian with stone fruit and black tea. Orders placed by Thursday ship Monday.
4.56:1
- Body textPasses
- Large text, 24px and upPasses
- IconsPasses
With the skill: Pebble moved darker until body text passed. Same hue, still recognisably pebble.
Key rules
- One accent
- The brand color is saved for the main button, links, focus and what is selected. A colorful screen is a sign it is overused.
- Choose from the subject
- The accent comes from the product's world, not from the default blue or the purple-to-blue AI gradient.
- Status only for status
- Warning and success colors show up only when something has actually failed, needs attention or worked.
- Design both themes
- Light mode is never dark mode inverted. Each theme gets its own values.
- No gradient text, no glow
- Gradients are for surfaces. Depth comes from precise shadows and hairlines.
- Check, then ship
- Contrast is measured, not guessed, and failures are fixed by moving lightness.
Keep the greys neutral
Pick an accent and watch the panels around it. Greys from a tinted ramp carry their own colour into every screen; true neutral greys step back and let the accent be the only colour.
Accent: Teal
Without the skill
Team
3 of 5 seats used
Team
3 of 5 seats used
Without the skill: The greys come from a slate ramp with a blue cast. Pick copper or amber and the accent fights the panels, and the light card reads faintly blue.
With the skill
Team
3 of 5 seats used
Team
3 of 5 seats used
With the skill: Every grey is a true neutral. Pick any accent and the surfaces step back, so the button is the only colour on the card.
Blend two colours
Pick a second colour and drag the probe across the gradient. The meter shows how much colour survives at each point, and the bar marks where the blend is greyest.
Blue to yellow
Without the skill
Without the skill: Blended channel by channel, the two hues cancel out and the middle sinks into a grey smudge.
With the skill
With the skill: Blended in OKLCH, the colour keeps its strength the whole way across and passes through clean hues.
Files
Everything installs as plain files in your project, in a folder named after the skill.
SKILL.md- The token set, the rules and the Tailwind CSS wiring.
scripts/contrast.mjs- Checks every theme block in your CSS for contrast and gamut. Read-only, runs in CI.
Works well with
Surfaces and depth
ProA four-level depth ladder, shadows, hairlines, radius, buttons, inputs, icons, glass and image frames.
Typography
FreeFonts, a role-based type scale, line height, tracking, measure, line breaks, numbers and font loading.
DESIGN.md generator
ProPulls a project's real design system into DESIGN.md, or starts from four contrast-checked starter systems.