Theming

Using CSS Variables and OKLCH colors for theming.

You can choose between using CSS variables (recommended) or utility classes for theming.

CSS Variables

<div class="bg-background text-foreground">
  <!-- Your ZardUI components here -->
</div>

ZardUI uses CSS variables for theming by default. This provides better performance and easier customization compared to utility classes.

TailwindCSS v4 Configuration

Copy and paste the following into your src/styles.css file:

Update your src/app/app.config.ts file in case CLI did not modify it:

Utility classes

<div class="bg-zinc-950 dark:bg-white text-zinc-50 dark:text-zinc-950">
  <!-- Your ZardUI components here -->
</div>

You can also use utility classes for theming if you prefer more explicit control over colors.

Convention

We use a simple background and foreground convention for colors. The background variable is used for the component background and the foreground variable is used for the text color.

Background and foreground

background

Component background color

foreground

Component text color

Given the following OKLCH variables:

--primary: 222.2 84% 4.9%;
--primary-foreground: 210 40% 98%;

The primary variable is the background color and the primary-foreground variable is the text color.

Note: The background suffix is omitted when the variable is used for the background color of the component.

List of variables

Here's the list of variables available for customization:

Adding new colors

To add new colors, you need to add them to your CSS file using the TailwindCSS v4 @theme directive.

src/styles.css

/* Add to your src/styles.css */
@theme {
  --color-warning: oklch(0.84 0.16 84);
  --color-warning-foreground: oklch(0.28 0.07 46);
}
 
@theme dark {
  --color-warning: oklch(0.41 0.11 46);
  --color-warning-foreground: oklch(0.99 0.02 95);
}

You can now use the warning utility class in your Angular components:

<div class="bg-warning text-warning-foreground">Warning message</div>

Base Colors

For reference, here's a list of the base colors that are available.

Neutral

Stone

Zinc

Gray

Slate

Other color formats

While ZardUI primarily uses OKLCH for better color accuracy and perceptual uniformity, you can also use other color formats with TailwindCSS v4:

@theme {
  /* OKLCH (recommended) */
  --color-primary: oklch(0.64 0.22 260);
  
  /* RGB */
  --color-secondary: rgb(59 130 246);
  
  /* HSL */
  --color-accent: hsl(210 100% 50%);
  
  /* HEX */
  --color-muted: #6b7280;
}

See the TailwindCSS documentation for more information on using different color formats.