TwitterGithub

Theming

Using CSS Variables for theming.

spartan/ui is built on TailwindCSS with custom CSS variables:

Convention

As shadcn, 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.

Given the following CSS variables:

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

List of variables

Here's the list of variables available for customization:

Default background color of <body>,... etc.
Muted backgrounds such as <hlm-sekleton/>
Background color for <div hlmCard>...</>
Background color for popovers such as <brn-popover>...</>
Default border color
Border color for inputs such as <input hlmInput />, <textarea hlmInput >...</>
Primary colors for <button hlmBtn />
Secondary colors for <button hlmBtn />
Used for accents such as hover effects on <brnMenuItem hlm/>
Used for destructive actions such as <button hlmBtn variant="destructive" />
Used for focus ring
Border radius for card, input and buttons

Adding new colors

To add new colors, you need to add them to your CSS file and to your tailwind.config.js file.

app/src/styles.css

tailwind.config.js

You can now use the warning utility class in your components.

Other color formats

We recommend using HSL colors for theming but you can also use other color formats if you prefer.

See the Tailwind CSS documentation for more information on using rgb , rgba or hsl colors.

Dark Mode Installation