Theming

Using CSS Variables for theming.

How Theming works

For now, theming works only using CSS variables, as shown below

<div class="bg-background text-foreground"></div>

Convention

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:

app.css

--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;

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

<div class="bg-primary text-primary-foreground">Hello</div>

CSS variables must be defined without color space function. See the Tailwind CSS documentation for more information.

List of variables

Here's the list of variables available for customization:

Default background color of <body/>...etc

--background: 0 0% 100%;
--foreground: 222.2 47.4% 11.2%;

Muted backgrounds such as in switch

--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;

Background color for the card component

--card: 0 0% 100%;
--card-foreground: 222.2 47.4% 11.2%;

Background color for popovers such as dropdown menu and popover

--popover: 0 0% 100%;
--popover-foreground: 222.2 47.4% 11.2%;

Default border color

--border: 214.3 31.8% 91.4%;

Border color for inputs such as input, select, textarea

--input: 214.3 31.8% 91.4%;

Primary colors for button

--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;

Secondary colors for button

--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;

Used for accents such as hover effects on dropdown menu items, select item...etc

--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;

Used for destructive actions such as destructive buttons

--destructive: 0 100% 50%;
--destructive-foreground: 210 40% 98%;

Used for focus ring-3

--ring: 215 20.2% 65.1%;

Border radius for card, input and buttons

--radius: 0.5rem;

Adding new colors

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

app.css

:root {
  --warning: 38 92% 50%;
  --warning-foreground: 48 96% 89%;
}

.dark {
  --warning: 48 96% 89%;
  --warning-foreground: 38 92% 50%;
}

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        warning: "hsl(var(--warning))",
        "warning-foreground": "hsl(var(--warning-foreground))",
      },
    },
  },
}

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

app.blade.php


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

Other color formats

ShadCN recommends 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.