// Guides KtUI theming with CSS variables, light/dark mode, and semantic colors. Use this skill when the user asks about KtUI colors, theme, dark mode, customizing appearance, or CSS variables for KtUI.
| name | ktui-theming |
| description | Guides KtUI theming with CSS variables, light/dark mode, and semantic colors. Use this skill when the user asks about KtUI colors, theme, dark mode, customizing appearance, or CSS variables for KtUI. |
Use this skill when working with KtUI theming—colors, dark mode, and custom appearance. KtUI uses CSS variables and a background/foreground convention; prefer these over inventing custom classes.
-background suffix (e.g. bg-primary uses var(--primary)). Foreground colors use -foreground (e.g. text-primary-foreground).bg-background, text-foreground, bg-primary, text-card, kt-btn, kt-card) so theming stays consistent.Define or override in your Tailwind entry (e.g. style.css). KtUI expects at least:
--background, --foreground; --card, --card-foreground; --popover, --popover-foreground.--primary, --primary-foreground; --secondary, --secondary-foreground.--muted, --muted-foreground; --accent, --accent-foreground.--destructive, --destructive-foreground.--border, --input, --ring.--radius (e.g. 0.5rem).Use oklch() or any valid CSS color. Example:
:root {
--background: oklch(1 0 0);
--foreground: oklch(14.1% 0.005 285.823);
--primary: oklch(62.3% 0.214 259.815);
--primary-foreground: oklch(1 0 0);
--radius: 0.5rem;
}
.dark scope (or your dark-mode class). KtUI docs use .dark for dark theme.@custom-variant dark (&:is(.dark *)); in your Tailwind entry so utilities like dark:bg-background work..dark class on <html> (or a wrapper) to switch between light and dark variables.Prefer the official variable list and examples from these pages over guessing variable names or values.