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:
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
backgroundComponent background color
foregroundComponent text color
Given the following OKLCH variables:
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.
Base Colors
For reference, here's a list of the base colors that are available.