Configura TailwindCSS en tu Create React App

Configura los Colores de tu Tema con TailwindCSS y Variables CSS

Crea ThemeContext para acceder al tema de tus Aplicaciones React

Configura TailwindCSS para Producción

Crea Temas con TailwindCSS y Variables CSS

En ésta lección, vamos a create un Contexto personalizado para nuestro tema llamado `ThemeContext`. Usando el contexto de React para nuestro tema, es una manera limpia y simple de compartir éste valor y hacerlo muy accesible para cualquier componente de nuestra App. Aprenderemos también a cómo crear un hook personalizado para acceder a el valor de nuestro ThemeContext.

Instructor: [0:00] Creamos un fichero llamado themeContext.js. En este fichero vamos a crear nuestro contexto para guardar el valor del tema de nuestra aplicación. Creamos nuestro ThemeContext usando la función React.createContext. Como valor inicial le vamos a poner theme-light.

[0:21] Además, también vamos a crear un componente llamado ThemeProvider. En este recibiremos solo children de momento. Aquí crearemos el estado de nuestro tema usando useState que lo igualamos a theme y setTheme. Aquí como valor inicial también podemos poner theme-light.

[0:41] También vamos a crear una función para cambiar el tema llamada toggleTheme. Esta función solamente va a llamar a setTheme y vamos a cambiar el tema de uno a otro, entre theme-dark y theme-light. Voy a pasarle a setTheme una función que comprueba si el tema actual es theme-light, entonces lo cambiamos a theme-dark, y si no lo cambiamos a theme-light.

[1:06] Formateamos el código y este componente vamos a devolver nuestro ThemeContext.Provider pasándole el valor del theme y nuestra función toggleTheme. Dentro de este componente vamos a renderizar children.

[1:23] Por último, en este fichero, crearemos un custom hook, o un hook personalizado, para poder acceder a nuestro theme de manera más fácil. Le vamos a llamar useTheme. Accedemos al context utilizando React.useContext, pasándole nuestro ThemeContext.

[1:42] Verificamos si no existe y devolvemos un error que voy a copiar y a pegar para no aburrirles. Y si existe, devolvemos context. Vayamos a index.js, importamos ThemeProvider de ThemeContext, y envolvemos nuestro componente App con nuestro nuevo componente ThemeProvider.

[2:07] Por último, vamos a App.js, importamos nuestro hook personalizado llamado useTheme from ThemeContext y lo invocamos en nuestra App. De esta manera, podemos aplicar al className de nuestro div wrapper el valor de theme.

[2:27] Si ahora ejecutamos nuestra aplicación con yarn start, y parece que tenemos un typo en ThemeContext. Donde esto tenemos que hacerlo de React y también toggleTheme. Tenemos otro typo aquí.

[2:41] Como puedes ver, "Hello World" tiene color azul asignado al text-primary y aquí vemos que el div wrapper tiene asignada la clase theme-light. Si aquí en nuestro ThemeContext cambiamos la clase por defecto a theme-dark, vemos que cambia adecuadamente la clase a theme-dark.

[3:01] En resumen, hemos creado un fichero llamado ThemeContext en el que creamos nuestro ThemeContext usando createContext. Además, también exportamos un componente llamado ThemeProvider que es el que guarda el estado de nuestro theme.

[3:17] También hemos creado una función especial para cambiar nuestro theme. Y todo eso lo pasamos como valor a nuestro ThemeContext.Provider.

[3:26] Además, también hemos creado un custom hook, o un hook personalizadom llamado useTheme para acceder a nuestro contexto, que hace mucho más sencillo acceder a él desde nuestros componentes.

[3:38] También hemos ido a index.js y hemos envuelto nuestro componente App con nuestro nuevo componente ThemeProvider. Y, por último, en App.js estamos invocando nuestro hook personalizado llamado useTheme para obtener el valor actual de nuestro tema y aplicarlo al wrapper de nuestra aplicación.

Course

Crea Temas con TailwindCSS y Variables CSS

Crea ThemeContext para acceder al tema de tus Aplicaciones React

Share this video with your friends