shadcn/ui Dark Mode

[00:00 - 00:14] In this module you are going to learn about theming and customizations with shadcn/ui. You are going to enable the dark mode, adjust the site to the dark mode, customize the default theme and animations and understand what ShadCNUI styles are.

[00:15 - 00:25] This lesson will be focused on dark mode and theme. The template you've used to create the news website, the next template, comes with a theme provider and a theme toggle, components.

[00:26 - 00:36] So let's open the theme toggle. The theme toggle component is a button that allows the user to switch between light and dark modes.

[00:37 - 00:47] It shows a sun or moon icons based on the current theme and calls the set theme function when the user clicks the button. Let's allow users to change the theme.

[00:48 - 01:00] Right now we are not rendering theme toggle at all. So go to site header, import theme toggle and render it after the categories.

[01:01 - 01:17] Randea, in your favorite terminal, if you have an issue feel free to reach out on the discord and go to localhost:3000. Perfect, you can now see the sun icon being rendered and once you click on it, the site theme will change to dark.

[01:18 - 01:23] This means that the background and text color have changed. Let's see it again.

[01:24 - 01:37] Now the outer background, we've created earlier, the bg sky 50, stay the same and it doesn't really feed the dark mode. You'd need to make a smaller adjustment, but how can you change it only for dark mode?

[01:38 - 01:51] This is where the dark modifier comes in. Similar to the size modifier you've learned about in the previous module, the MD or LG screen size modifier, we can apply some class names only in dark mode.

[01:52 - 02:12] Let's go to app/layout.tsx and add a dark bg gray class to the background, outer background. Find the bg sky 50 class name and next we'll add a dark bg gray and save it.

[02:13 - 02:18] Now go back to the site. And now the background fits the dark mode.

[02:19 - 02:30] But how does tailwind and shud scene run knows when the dark mode is enabled on the site? This is done through a combination of a react context called theme provider and CSS variables.

[02:31 - 02:41] The theme provider is responsible for managing the theme state of the application. Theme provider passes to its children a value that includes the theme.

[02:42 - 02:55] It keeps the state for the theme and it provides a way to change the theme, which is either dark or light. Child components of theme provider can call this used theme hook and get back the current theme and the set theme function.

[02:56 - 03:05] Under the hood, the theme provider uses next theme packages to enable all of that functionality. So the component looks like that we're going to look at it more in a second.

[03:06 - 03:26] This theme is an abstraction for easily managing themes in next.js application. It detects the device preferred theme, it monitor the system theme changes using media queries, it preserve the user's theme selection between sessions and it applied themes by modifying the document class or attribute.

[03:27 - 03:34] Next theme package code is around 300 lines. I really encourage you to go and look at that code if you want to improve in understanding other people code.

[03:35 - 03:50] There is a link on the course text at the bottom. You can view the package default theme in local storage by opening the developer tools in your browser, either CMD OPENI or MAC or F12 on Windows and navigate to the application tab.

[03:51 - 04:09] Then click on the local storage on the sidebar and you can see that there is a key theme with a value which will be either light or dark or system. When the user reenters the page using the same device and browser, the theme will be restored from local storage by the theme provider and next theme.

[04:10 - 04:20] Now navigates to the element tab in local storage and look at the HTML tab. You'll see that the class attribute is set to light and the style property has a color scheme light value.

[04:21 - 04:26] But why do the site colors change? How does the theme in concept work under you?

[04:27 - 04:32] The answer is in CSS variables that shadcn/ui and tailwind and we will dive deeply into them in the next lesson.