This tutorial, you will learn how to create a theme context that spans your entire Next.js application using React.
Make sure you have Node.js installed on your system. Then, you can create a new Next.js project using the following command in your terminal:
npm create-next-app my-theme-app
After the installation is complete, navigate to your new project directory:
cd my-theme-app
First, let’s create the theme context. Create a new file called ThemeContext.tsx in the components directory of your project and add the following code:
We will use the theme provider we just created throughout our application. Open the _app.tsx file in the root directory of your project and modify it as follows:
// components/ThemeContext.tsx
import React, { createContext, useContext } from 'react';
// Define el tipo para el contexto
interface ThemeContextType {
theme: string;
setTheme: React.Dispatch<React.SetStateAction<string>>;
}
// Crea el contexto
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
// Hook personalizado para usar el contexto
export const useTheme = () => {
const context = useContext(ThemeContext);
if (!context) {
throw new Error('useTheme debe ser usado dentro de un ThemeProvider');
}
return context;
};
// Proveedor del contexto
export const ThemeProvider: React.FC = ({ children }) => {
const [theme, setTheme] = React.useState<string>('light');
return (
<ThemeContext.Provider value={{ theme, setTheme }}>
{children}
</ThemeContext.Provider>
);
};
Now that we have set up the theme provider in our _app.tsx file, we can access the theme context from any component in our application.
// pages/_app.tsx
import React from 'react';
import { AppProps } from 'next/app';
import { ThemeProvider } from '../components/ThemeContext';
const MyApp: React.FC<AppProps> = ({ Component, pageProps }) => {
return (
<ThemeProvider>
<Component {...pageProps} />
</ThemeProvider>
);
};
export default MyApp;
For example, in any component where you want to change the theme, you can do the following:
// components/ThemeToggleButton.tsx
import React from 'react';
import { useTheme } from './ThemeContext';
const ThemeToggleButton: React.FC = () => {
const { theme, setTheme } = useTheme();
const toggleTheme = () => {
setTheme(theme === 'light' ? 'dark' : 'light');
};
return (
<button onClick={toggleTheme}>
Cambiar Tema a {theme === 'light' ? 'oscuro' : 'claro'}
</button>
);
};
export default ThemeToggleButton;
You can also use the theme context in your Next.js pages. For example, you can change the background color of the page based on the current theme. Here is an example of how you could do it:
// pages/index.tsx
import React from 'react';
import { useTheme } from '../components/ThemeContext';
const HomePage: React.FC = () => {
const { theme } = useTheme();
return (
<div style={{ backgroundColor: theme === 'light' ? '#fff' : '#333' }}>
<h1>Bienvenido a mi aplicación</h1>
{/* Contenido de la página */}
</div>
);
};
export default HomePage;
You have now successfully created a theme context that spans your entire Next.js application. This context will allow you to dynamically switch between different themes in your application, providing a more personalized user experience. You can continue to extend this context to include more theme settings or adapt it to the specific needs of your application.
