. Theming lets you change the look of your site.

In the previous lesson, you rendered the 

 components and changed the site theme to 

 modifier and how to use it to change some classes when the 

, the site automatically changes the background and foreground colors to match the theme.

How does it work? What happened under the hood that made the colors change?

CSS variables are entities defined by CSS authors that represent specific values to be reused throughout a document.

Like variables in most programming languages, CSS variables store CSS values that can be reused throughout the document by referring to their name.

CSS Variables can be changed dynamically when class names are changed.

 colors are defined by a list of CSS variables and then integrated into Tailwind so they are available using Tailwind utilities, like 

, which is not a default Tailwind utility.
Adding a Tailwind utility color is as simple as adding it to the tailwind.config.js file, and you'll see how to do it in the next sections.

 defines a list of CSS variables that are used to style the components.
For example, the 

 theme defines the following CSS variables on the 

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 47.4% 11.2%;

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

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

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;

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

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

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

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

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

    --ring: 215 20.2% 65.1%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 224 71% 4%;
    --foreground: 204 94% 94%;

    --muted: 223 47% 11%;
    --muted-foreground: 215.4 16.3% 56.9%;

    --accent: 216 34% 17%;
    --accent-foreground: 210 40% 98%;

    --popover: 224 71% 4%;
    --popover-foreground: 215 20.2% 65.1%;

    --border: 216 34% 17%;
    --input: 216 34% 17%;

    --card: 224 71% 4%;
    --card-foreground: 213 31% 91%;

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

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

    --destructive: 0 63% 31%;
    --destructive-foreground: 210 40% 98%;

    --ring: 216 34% 17%;

    --radius: 0.5rem;
  }
}

 theme defines the same variables but with different values based on the body 

---
title: Theming in shadcn/ui
description: Learn about shadcn/ui themes and styles
code: https://gitlab.com/fullstackio/books/newline-course-apps/building-sleek-web-applications-with-shadcn-ui-app/-/tree/main/newsly/04.02-change?ref_type=heads
privateVideoUrl: https://stream.mux.com/9DAcC8gzAOOqyuRF1jBOxgyjg322RH3W3nKcS5JGebQ.m3u8
---

Theming is an essential feature of `shadcn/ui`. Theming lets you change the look of your site.

In the previous lesson, you rendered the `ThemeProvider` and `ThemeToggle` components and changed the site theme to `dark`. You have also learned about the `dark:` modifier and how to use it to change some classes when the `dark` mode is enabled.

When you've switched to the `dark` mode by clicking the `ThemeToggle`, the site automatically changes the background and foreground colors to match the theme.

How does it work? What happened under the hood that made the colors change?

-   **The `.dark` class on the main html element switches the CSS Variables at the root layer.**
-   **shadcn/ui components use these variables for styling.**
-   **When the variable values are changed, the component's colors change as well.**

Let's break this sentence down.

### CSS Variables

> **CSS variables are entities defined by CSS authors that represent specific values to be reused throughout a document.** > [MDN definition](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)

Like variables in most programming languages, CSS variables store CSS values that can be reused throughout the document by referring to their name.

CSS variables are defined using the `--` prefix and can be used by using the `var()` function.

CSS Variables can be changed dynamically when class names are changed.

### shadcn/ui Colors as CSS Variables

`shadcn/ui` colors are defined by a list of CSS variables and then integrated into Tailwind so they are available using Tailwind utilities, like `bg-background`, which is not a default Tailwind utility.
Adding a Tailwind utility color is as simple as adding it to the tailwind.config.js file, and you'll see how to do it in the next sections.

The list of colors in `shadcn/ui` includes:

-   `background` and `foreground`: the default `body` variables
-   `muted`: some components backgrounds such as `<TabsList />`, `<Skeleton />` and `<Switch />`
-   `card`: the `<Card />` background color, and `Popover` is used for the `<DropdownMenu />`, `<HoverCard />`, and `<Popover />` backgrounds
-   `border`: default border-color
-   `input`: `<Input />`, `<Select />`, and `<Textarea />` border-color
-   `primary`: default `<Button />` background, and `Secondary` is used for the `secondary` `Button` variant
-   `accent`: hover effects
-   `destructive`: destructive actions, like the `<Button variant="destructive" />` component
-   `ring`: focused ring color
-   `radius`: border radius of all components

For each theme, `shadcn/ui` defines a list of CSS variables that are used to style the components.
For example, the `light` theme defines the following CSS variables on the `:root` selector:

```css { actualFilename=../../code/newsly/04.02-change/styles/globals.css endLine=72 startLine=1 statedFilename=styles/globals.css url=https&#x3A;//gitlab.com/fullstackio/books/building-sleek-web-applications-with-shadcn-ui/module_04/lesson_04.03/.../code/newsly/04.02-change/styles/globals.css }
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 47.4% 11.2%;

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

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

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;

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

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

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

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

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

    --ring: 215 20.2% 65.1%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 224 71% 4%;
    --foreground: 204 94% 94%;

    --muted: 223 47% 11%;
    --muted-foreground: 215.4 16.3% 56.9%;

    --accent: 216 34% 17%;
    --accent-foreground: 210 40% 98%;

    --popover: 224 71% 4%;
    --popover-foreground: 215 20.2% 65.1%;

    --border: 216 34% 17%;
    --input: 216 34% 17%;

    --card: 224 71% 4%;
    --card-foreground: 213 31% 91%;

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

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

Eyal Cohen

Theming in shadcn/ui

In the previous lesson, you render the theme provider and theme toggle

components and change the site theme to dark.

You have also learned about the dark modifier and how to use it to change some

When you've switched to the dark mode by clicking the theme toggle, the site

automatically changes the background and foreground colors to match the theme.

What happened under the hood that made the colors change?

That's where themes come in in Shadci anyway.

Themes are the colors sheet of your site, so how did the site change the

background and foreground colors when you change the theme value?

The dark class on the main HTML element switches the CSS variables that are out

Shadci anyway components use these variables for styling.

When the variable values are changed, the components color changes well.

Like variables in most programming languages, CSS variables store CSS values

that can be used throughout the document by referring to their name.

CSS variables are defined by the double-heathon prefix and can be used by using

CSS variables can be changed dynamically when class names are changed.

Shadci and UI colors are defined by a list of CSS variables.

The variables integrated into tailwind, so they are available using tailwind

utilities, for example the BG background utility.

The available colors Shadci and UI uses are the background, muted, card,

foreground, disruptive, accent, input and border.

For each theme, Shadci and UI defines a list of CSS variables that are used to

The light theme defines the following CSS variables on the root selector,

background and foreground, muted and muted foreground, popover and popover

primary, secondary, accent, destructive, ring and values.

Radius is not a color, but a measuring unit.

Now the dark theme defines the same variables but with different values based

When the body class name is dark, these CSS variables will be applied to the

Navigate to the site on your favorite browser.

Open the developer tools, element tab, you can click, right click and inspect

You should see the dark or light classes at the body.

Now change the theme and see the values changes accordingly.

You can see the root values that we've seen a second ago.

Change the class of the HTML to dark and you can see that the values have been

Now how can you customize the theme and change the colors?

You can just edit the default colors freely since you control the colors code.

Here is another point where Shads and UI shines.

Let's change the foreground value to be something more blue.

Navigate to your editor and change the dark foreground value to be something

Change the dark foreground value to be something else you can change it to

Now go back to the site and you can see that the text color has changed.

When I'm writing web applications, I usually use a few colors a lot.

A lot of time, a lot of instances. By using Shads and UI teams, it's very easy

On your news, newsly site for example, there is already a reused color.

We call it a brand one. The text orange 700 we use for the text.

An easier way to reuse it across the app would be to create a new Shads and UI

When you add a new color, Shads and UI adds a BG.

Heave a new color and text heave a new color classes for you.

Basically a new utility that you can use. So let's add a new color and call it

It involves two steps. The first one is adding a CSS variable under the root

And the second one is adding a tailwind color token for the utilities.

Go to the editor and open the globals.css file.

Now on the root, add the brand definition.

Great. Notice that Shads and UI uses the HCL color values.

There is a bit more description about it below if you want to read about it

Now go to tailwind.config.js and you will find there a list of colors the Chads

We are going to add a brand one into it. Go to tailwind.config.js.

And you can see here the list of colors the Chads and UI have already added.

Which we are familiar with the border input ring for example and many more.

Now paste the brand definition which uses the CSS variables on top of the HCL

And tailwind will add a brand color token for us.

Now let's replace all the text orange 700 instance on our application with text

Do command shift F on visual studio code and find if you use another editor you

can try finding the find and replace functionality.

Now click on the small icon here and replace everything with text brand.

Click on this button, call replace and now the application will use the text

brand class name instead of the text orange 700.

Now once we want to change this color we want to need to find and replace it in

a lot of files we can simply change it in one place.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript