Setup TailwindCSS in create-react-app

Extend your TailwindCSS Colors using CSS Variables for your Themes

Create a ThemeContext to access the theme in your React Applications

Theming using TailwindCSS and CSS Variables

In this lesson, we are going to create a Custom context for our theme called `ThemeContext`. Using context for our theme is a simple and clean way to make the theme value accessible to all your application using React. You will also learn how to create a custom hook to access your context values within your app components.

Horacio Herrera: [0:00] Let's create our ThemeContext to change this class depending on the user's selection. Let's create a file called ThemeContext.js. Inside here, we import React from 'react', and we create our ThemeContext. That'll be closed to React.createContext and is put as a default value theme: 'light'.

[0:26] Let's create our custom ThemeProvider to store our theme selected value, so let's do export function ThemeProvider. That will accept some props. We'll only going to use children for now.

[0:41] Let's create our provider state. That will be [theme, setTheme] = React.useState, and this will be also theme: 'light' as a default value. Then, let's create a function that will toggle theme that does not accept any value and it will just call set theme, changing the current theme.

[1:07] We are using a function here, if current theme = theme light, then change it to theme dark. Otherwise, change it to theme light. Then, we return our ThemeContext.Provider, passing as a value, our theme value and our toggle theme function.

[1:33] Inside our theme context, we're going to render our children, and just close ThemeContext.Provider, format the code, and we're almost done. Finally, to make it easier to use our theme, let's create a custom hook and we're going to call it...Just scroll a little bit here, export function use theme.

[1:58] Use theme will return just our React.useContext and we pass our theme context to it. Let's make it safer by setting up some validation on our context and now we're good to go. Now, let's go to our index.js, import theme provider from ThemeContext and wrap our app with our new theme provider.

[2:26] Let's format our code. Finally, we can go to our app.js, and we can call our new custom hook [inaudible] theme. To import it, import useTheme from ThemeContext and then just apply this to our application.

[2:44] If we run now our code and we have a typo here, it's ThemeContext, and we can see that our wrapper div has the theme Lightglass applied. If we go to our ThemeContext and change the default value to dark, you see that the dark theme is applied. In review, we here create our ThemeContext needed to store our selected theme.

[3:12] We also created a ThemeProvider that stores our theme selected and also we created a function to change the theme. Finally, we created a useTheme custom hook to access the value of our ThemeContext.

[3:28] In our index.js file, we imported ThemeProvider and wrapped our application with the ThemeProvider, and finally we went to app.js, and we invoked our custom hook to get our theme and apply it to the class name of our wrapper.

Course

Theming using TailwindCSS and CSS Variables

Create a ThemeContext to access the theme in your React Applications

Share this video with your friends