KTUI
Docs
Theming

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 p-4 rounded-lg">
  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).

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.

PreviouseApproachNextJavaScript