Theming

It is really simple to customize the colors used in the UI components.

List of variables

Add the following CSS variables to your global stylesheet to override the default colors used by our UI components:

:root {
  --background: white;
  --foreground: black;
  --primary: yellow;
  --primary-foreground: blue;
  --secondary: purple;
  --secondary-foreground: orange;
}

The background color of a Button component will be var(--primary) and the foreground color will be var(--primary-foreground). And the website background color will be var(--background) and the text color will be var(--foreground).

You can also create dark mode themes by overriding these variables inside a .dark class:

.dark {
  --background: black;
  --foreground: white;
  --primary: blue;
  --primary-foreground: yellow;
  --secondary: orange;
  --secondary-foreground: purple;
}

As you seen, we’re using a simple and consistent naming convention for the CSS variables based on background and foreground. The foreground suffix indicates that the variable is used for text or icon colors. The background, for whatever is behind this text or icon.

Note that the background suffix is omitted when the variable is used for a named color.