Customize KtUI with CSS variables for light and dark mode theming.
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.
Apply themes using semantic classes or Tailwind utilities:
<div class="bg-background text-foreground rounded-lg p-4">Themed Component</div>KtUI follows a background/foreground convention inspired by Shadcn:
bg-primary).text-primary-foreground).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>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 */
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.