Theming

CSS variables are automatically configured when you use the SlateUI CLI to initialize your project.

Utility classes are available as an alternative to CSS variables for theming.

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

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

Given the following CSS variables:

The background color of the following component will be var(--primary) and the foreground color will be var(--primary-foreground).

Here's the list of variables available for customization:

styles.css