KtUI Theming

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.

Convention

• Background/foreground: KtUI follows a Shadcn-inspired convention. Background colors omit the -background suffix (e.g. bg-primary uses var(--primary)). Foreground colors use -foreground (e.g. text-primary-foreground).
• Semantic classes: Use KtUI semantic utilities (e.g. bg-background, text-foreground, bg-primary, text-card, kt-btn, kt-card) so theming stays consistent.

Key CSS variables

Define or override in your Tailwind entry (e.g. style.css). KtUI expects at least:

• Surfaces: --background, --foreground; --card, --card-foreground; --popover, --popover-foreground.
• Brand: --primary, --primary-foreground; --secondary, --secondary-foreground.
• Muted / accent: --muted, --muted-foreground; --accent, --accent-foreground.
• Destructive: --destructive, --destructive-foreground.
• Borders and inputs: --border, --input, --ring.
• Radius: --radius (e.g. 0.5rem).