Theming

InstallationCustomization

Customize colors, radius and fonts with CSS variables.

Everything in krz-ui is driven by CSS variables. Override them anywhere — globally or on any wrapper.

CSS variables

globals.css
:root {
  --krz-primary: #0ea5e9;
  --krz-primary-2: #22d3ee; /* second stop of the brand gradient */
  --krz-radius: 8px;
  --krz-font: "Poppins", sans-serif;
}

Tokens

VariableDescription
--krz-primaryBrand color used for primary actions and focus rings.
--krz-primary-2Second stop of the brand gradient.
--krz-primary-textBrand color for text (words and numbers) — a darker, readable shade of --krz-primary.
--krz-primary-strongBrand color for borders, icons and focus rings — visible on light backgrounds.
--krz-primary-contrastText and icons drawn on top of the brand color.
--krz-bg / --krz-surfacePage and component backgrounds.
--krz-borderDefault border color.
--krz-text / --krz-text-mutedPrimary and secondary text colors.
--krz-radiusDefault corner radius (also -sm, -lg, -full).
--krz-fontFont family for every component.

Dark mode

Dark mode follows the OS by default. To control it yourself, set data-theme="dark" or data-theme="light" (or the class dark / light) on <html> or any wrapper.

<html data-theme="dark">...</html>