skills.rest
fusengine
fusengineCOMMUNITY
Explore all skills by this author →
Website𝕏@fusengineGitHub

shadcn-theming

Defines and audits shadcn/ui design tokens using OKLCH colors and dark mode CSS variables.

1|Updated Jul 29, 2026
Search Tags:#theming#design tokens#tailwind#dark mode#css variables#shadcn#oklch
One-click install
npx skills add https://github.com/fusengine/kimi-code --skill shadcn-theming-fusengine
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shadcn-theming
Source: https://github.com/fusengine/kimi-code/tree/main/plugins/shadcn-expert/skills/shadcn-theming
Command: npx skills add https://github.com/fusengine/kimi-code --skill shadcn-theming-fusengine

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Theming shadcn/ui projects requires consistent design tokens across light and dark modes, and mixing hex values with OKLCH or forgetting dark-mode overrides leads to broken, inconsistent UIs. This Skill provides the token hierarchy, validation checklist, and complete theme templates to configure shadcn/ui theming correctly. ## Core Features & Use Cases - Design Token Architecture: Documents the three-level hierarchy from primitive OKLCH values through semantic tokens (--primary, --accent) to component tokens (--card, --sidebar). - Dark Mode Support: Covers .dark class overrides and prefers-color-scheme strategies with next-themes integration for React. - Tailwind v4 Integration: Shows how to bridge CSS variables into Tailwind utilities via the @theme directive. - Use Case: When setting up a new Next.js project with shadcn/ui, use this Skill to generate a complete globals.css with light and dark OKLCH tokens, chart variables, and sidebar variables, then validate that no hard-coded hex values remain in components. ## Quick Start Ask the agent to set up a complete shadcn/ui theme with OKLCH tokens and dark mode support in globals.css.

Frequently Asked Questions about shadcn-theming

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up dark mode in shadcn/ui?▼

Define all tokens in :root for light mode and override every one inside a .dark class in globals.css. Toggle the class on the html element, typically using next-themes with attribute="class" and enableSystem for system preference support.

How to use OKLCH colors with shadcn/ui themes?▼

Write every token as oklch(L% C H), where lightness runs 0-100%, chroma 0-0.4, and hue 0-360. OKLCH gives perceptual uniformity and P3 wide-gamut support, and you should never mix it with hex or rgb values in the same theme.

Does shadcn/ui theming work with Tailwind v4?▼

Yes. Tailwind v4 uses the @theme directive in CSS instead of a config file. Map each CSS variable to a Tailwind color token, for example --color-primary: var(--primary), so utilities like bg-primary resolve to your custom properties.

Why is my shadcn/ui dark mode not working?▼

The most common cause is missing .dark overrides for tokens defined in :root, since every light token needs a dark equivalent. Also verify the dark class is actually applied to the html element and that components reference variables rather than hard-coded colors.

What CSS variables does shadcn/ui require?▼

Core variables include --background, --foreground, --card, --popover, --primary, --secondary, --accent, --muted, --destructive, --border, --input, --ring, and --radius, each with foreground variants. Optional sets cover --chart-1 through --chart-5 and sidebar variables.

Related Skills

Explore More Software Engineering Skills→
zaid-khan-codezaid-khan-code
3

shadcn-setup

Configure shadcn/ui and Tailwind CSS v4 for Next.js and React projects.

Community
Advanced
ftc8569ftc8569
2

tailwind

Provide Tailwind color tokens and component patterns for FTC Metrics UIs.

Official
Advanced
zivtechzivtech

design-token-critic

Audit design token systems for naming consistency and cross-platform parity.

Official
Advanced
mrodrigues1mrodrigues1

design-system-patterns

Generate design tokens and platform outputs with Style Dictionary pipelines.

Community
Advanced