As web applications grow in complexity, enhancing user experience becomes more critical. One of the most popular features that can improve usability is a theme switcher, allowing users to switch between light and dark modes or other theme variations. In this guide, we’ll explore how to implement a theme switcher in a React application, step by step.<\/p>\n
Themed interfaces cater to user preferences, accessibility, and even battery life on mobile devices. Here are a few reasons to implement a theme switcher:<\/p>\n
Before we dive into code, ensure you have a working React application. If you don\u2019t have one, you can create a new app using Create React App:<\/p>\n
npx create-react-app theme-switcher<\/code><\/pre>\nOnce your application is set up, navigate to your project folder:<\/p>\n
cd theme-switcher<\/code><\/pre>\nStep 1: Create a Theme Context<\/h2>\n
React’s context API allows us to propagate theme state throughout our application without having to pass props at every level. Let’s create a context for managing the theme.<\/p>\n
import React, { createContext, useContext, useState } from 'react';\n\nconst ThemeContext = createContext();\n\nexport const ThemeProvider = ({ children }) => {\n const [theme, setTheme] = useState('light');\n\n const toggleTheme = () => {\n setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));\n };\n\n return (\n \n {children}\n \n );\n};\n\nexport const useTheme = () => useContext(ThemeContext);\n<\/code><\/pre>\nThis code snippet creates a theme context with a provider that shares the current theme and a function to toggle it.<\/p>\n
Step 2: Wrap Your Application in the ThemeProvider<\/h2>\n
Next, you\u2019ll need to ensure that your entire application has access to the ThemeContext. You can do this by wrapping your main app component in the ThemeProvider.<\/p>\n
import React from 'react';\nimport ReactDOM from 'react-dom\/client';\nimport App from '.\/App';\nimport { ThemeProvider } from '.\/ThemeContext';\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(\n \n \n \n);\n<\/code><\/pre>\nStep 3: Create a Theme Switcher Component<\/h2>\n
Now that we have our context set up, we can create a component that allows users to switch between themes.<\/p>\n
import React from 'react';\nimport { useTheme } from '.\/ThemeContext';\n\nconst ThemeSwitcher = () => {\n const { theme, toggleTheme } = useTheme();\n\n return (\n