Theming in shadcn/ui

[00:00 - 00:13] 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 classes when the dark mode is enabled.

[00:14 - 00:23] When you've switched to the dark mode by clicking the theme toggle, the site automatically changes the background on foreground colors to match the theme. How does it work?

[00:24 - 00:34] What happened under the hood that made the colors change? That's where themes come in in shadcn/ui. Themes are the colors sheet of your site.

[00:35 - 00:50] So I'll decide to change the background on foreground colors when you change the theme value. The dark class on the main HTML element switches the CSS variables that the root layer shadcn/ui components use these variables for styling.

[00:51 - 01:11] When the variable values are changed, the components color change as well. 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 by the double hyphen eat font prefix and can be used by using the var function.

[01:12 - 01:21] CSS variables can be changed dynamically when class names are changed. shadcn/ui colors are defined by a list of CSS variables.

[01:22 - 01:30] The variables integrated into tailwinds, so they are available using tailwind utilities. For example, the BG background utility.

[01:31 - 01:47] The available colors shadcn/ui uses are the background, muted, card, foreground, disruptive, accent, input and border. These are the default ones. For each theme, shadcn/ui defines the list of CSS variables that are used to style the components.

[01:48 - 02:02] Let's see it in action. Go to app/styles.css For each theme, shadcn/ui defines the list of CSS variables that are used to style the components.

[02:03 - 02:24] The light theme defines the following CSS variables on the root selector, background and foreground, muted and muted foreground, pop over and pop over foreground, border, input, card, primary, secondary, accent, discructive, ring and radius. Radius is not a color, but a measuring unit.

[02:25 - 02:42] Now, the direct theme defines the same variables, but with different values based on the body class name. When the body class name is dark, these CSS variables will be applied to the document. Navigate to the site on your favorite browser.

[02:43 - 02:58] Open the developer tools, element tab. You can right click and inspect to open the element tab. You should see the dark or light classes at the body. Now, change the theme and see the values changes accordingly.

[02:59 - 03:15] Let's see the root values here on the side on the style panel. 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 changed on the layout file.

[03:16 - 03:32] 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's another point where shadcn/ui shines. Let's change the foreground value to be something more blue.

[03:33 - 03:48] Navigate to your editor and change the dark foreground value to be something else. And change the dark foreground value to be something else. You can change it to whatever you'd like. Now, go back to the site.

[03:49 - 04:04] And you can see that the text color is 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 shadcn/ui teams, it's very easy to add and reuse those colors.

[04:05 - 04:27] On your newsletter site, for example, there is already a reused color. We call it a brand one. The text or in 700, we use for the text. And is there a way to reuse it across the app would be to create a new shadcn/ui color token. When you add a new color, shadcn/ui adds a BG, a heathen new color, and text heathen new color classes for you.

[04:28 - 04:44] Basically, a new utility that you can use. So let's add a new color and call it brand. It involves two steps. The first one is adding a CSS variable under the root and dark definitions. And the second one is adding a tailwind color token for the utilities.

[04:45 - 05:06] Let's start with the CSS variables. Go to the editor and open the globals.css file. Now, on the root, add the brand definition. And do the same for dark mode.

[05:07 - 05:29] Great. Notice that shadcn/ui uses the HCL color values. There is a bit more description about that below if you want to read about it more. Now, go to tailwind.config.js and you will find there a list of colors. The Sh adCNUI is extending in tailwind.

[05:30 - 05:57] 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 shadcn/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 function. And tailwind will add a brand color token for us.

[05:58 - 06:16] Now, let's replace all the text or in 700 instances on our application. With text brand, do command, shift, F on Visual Studio Code. And find if you use another editor, you can try find the find and replace functionality and search for text orange 700.

[06:17 - 06:32] 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.

[06:33 - 06:46] Now, once we want to change this color, we want to find and replace it in a lot of files. We can simply change it in one place. Now, let's see it in action. Go back to the site.

[06:47 - 07:10] And on dark mode, you can see that the text or in 700 that was before was changed a bit. If you go to the light mode, it stays the same. Now, shadcn/ui offer the page where you can customize and copy paste a theme Go to https://ui.shadcn.com And go to the themes page. Now, click on a theme. You can also customize it.

[07:12 - 07:22] You can change the rad use the mode, the style and the color. And choose your favorite color. I've choose green. Now copy and paste it code.

[07:23 - 07:43] And you can simply see the site changes. Go to the editor. Paste the new definition instead of the existing ones. And when you go back to the site, you can see that the colors have changed dramatically. Right now, we are not using any text foreground class name, but let's change it as well.

[07:44 - 07:59] Let's replace text brand to text primary. And you can see on the site that all the text colors was changed to green. The button color is one.

[08:00 - 08:14] In this lesson, you have learned how the streaming works in shadcn/ui under the hood, how to change colors and how to add new ones. In the next lesson, you are going to learn about another feature of shadcn/ui, which is styles.