Theming

Docs

Theming

Customize KtUI with CSS variables for light and dark mode theming.

CSS Variables

KtUI uses CSS variables and Tailwind utilities for global theming, supporting light and dark modes with semantic classes like .kt-btn and .kt-card. This keeps your HTML clean and reduces Tailwind class clutter.

Basic Usage

Apply themes using semantic classes or Tailwind utilities:

<div class="bg-background text-foreground rounded-lg p-4">Themed Component</div>

Theming Convention

KtUI follows a background/foreground convention inspired by Shadcn:

Background: Sets the component's background (e.g., bg-primary).
Foreground: Sets text/icon color (e.g., text-primary-foreground).

Background colors omit the -background suffix (e.g., bg-primary uses var(--primary)). Foreground colors use -foreground (e.g., text-primary-foreground).

Example

With these variables:

:root {
  --background: oklch(1 0 0); /* White */
  --foreground: oklch(14.1% 0.005 285.823); /* Zinc-950 */
  --primary: oklch(62.3% 0.214 259.815); /* Blue-500 */
  --primary-foreground: oklch(1 0 0); /* White */
}

Style a button:

<button class="kt-btn kt-btn-outline text-primary">Outline button</button>

Colors

Key colors variables for theming:

:root {
  --background: oklch(1 0 0); /* White */
  --foreground: oklch(14.1% 0.005 285.823); /* Zinc-950 */
  --card: oklch(1 0 0);
  --card-foreground: oklch(14.1% 0.005 285.823);
  --primary: oklch(62.3% 0.214 259.815); /* Blue-500 */
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(96.7% 0.003 264.542); /* Zinc-100 */
  --secondary-foreground: oklch(21% 0.006 285.885);
  --muted: oklch(96.7% 0.003 264.542);
  --muted-foreground: oklch(55.2% 0.016 285.938);
  --destructive: oklch(57.7% 0.245 27.325); /* Red-600 */
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(94% 0.004 286.32); /* Zinc-100/200 */
  --input: oklch(92% 0.004 286.32);
  --ring: oklch(87.1% 0.006 286.286);
  --radius: 0.5rem;
}
 
.dark {
  --background: oklch(14.1% 0.005 285.823); /* Zinc-950 */
  --foreground: oklch(98.5% 0 0); /* Zinc-50 */
  --card: oklch(14.1% 0.005 285.823);
  --card-foreground: oklch(98.5% 0 0);
  --primary: oklch(54.6% 0.245 262.881); /* Blue-600 */
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(27.4% 0.006 286.033); /* Zinc-800 */
  --secondary-foreground: oklch(98.5% 0 0);
  --muted: oklch(21% 0.006 285.885); /* Zinc-900 */
  --muted-foreground: oklch(55.2% 0.016 285.938);
  --destructive: oklch(57.7% 0.245 27.325);
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(27.4% 0.006 286.033);
  --input: oklch(27.4% 0.006 286.033);
  --ring: oklch(27.4% 0.006 286.033);
}

Adding Custom Colors

To add new colors, define them in your CSS and Tailwind config:

:root {
  --warning: oklch(85.2% 0.199 91.936); /* Yellow-400 */
  --warning-foreground: oklch(0.28 0.07 46); /* White */
}
 
.dark {
  --warning: oklch(79.5% 0.184 86.047); /* Yellow-400 */
  --warning-foreground: oklch(0.28 0.07 46);
}
 
@theme inline {
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
}

For more on Tailwind colors, see the Tailwind CSS documentation.

PreviouseApproach NextJavaScript

On This Page

CSS Variables
- Basic Usage
Theming Convention
- Example
Colors
Adding Custom Colors