ktui-theming

Original：🇺🇸 English

Translated

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.

2installs

Sourcekeenthemes/ktui

Added on2026-03-28

NPX Install

npx skill4agent add keenthemes/ktui ktui-theming

SKILL.md Content

View Translation Comparison →

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
```
).

Use

oklch()

or any valid CSS color. Example:

css

: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 mode

Variables: Override the same variables under a
```
.dark
```
scope (or your dark-mode class). KtUI docs use
```
.dark
```
for dark theme.
Tailwind: Add the dark variant, e.g.
```
@custom-variant dark (&:is(.dark *));
```
in your Tailwind entry so utilities like
```
dark:bg-background
```
work.
Theme switch: Use the KTThemeSwitch component or toggle the
```
.dark
```
class on
```
<html>
```
(or a wrapper) to switch between light and dark variables.

Documentation

Theming: ktui.io/docs/theming
Dark mode: ktui.io/docs/dark-mode
Installation (variables setup): ktui.io/docs/installation

Prefer the official variable list and examples from these pages over guessing variable names or values.