In today\u2019s modern web applications, providing users with a personalized experience is essential. One popular feature that allows for this is a theme switcher<\/strong>, which lets users toggle between light and dark modes or even custom themes. In this tutorial, we’ll explore how to create a simple yet effective theme switcher using React. By the end of this article, you should have a solid understanding of building theme switchers, utilizing context for state management, and working with CSS to apply themes dynamically.<\/p>\n Before diving into code, let\u2019s first understand how theme switching works conceptually. The primary goal is to allow users to switch between different styles on the same content without reloading the page. This process generally involves:<\/p>\n If you haven’t already set up a React environment, you can quickly do so using Create React App. Open your terminal and run:<\/p>\n Once the setup is complete, navigate into the project folder:<\/p>\n Next, let\u2019s install styled-components<\/strong> to help manage our styles more effectively:<\/p>\n Let\u2019s start by defining our light and dark themes. You can create a new file named themes.js<\/strong> in the src<\/strong> directory. Here\u2019s how you can define your themes:<\/p>\n Now that we\u2019ve defined our themes, the next step is to create a context to manage the current theme state. Create a new file named ThemeContext.js<\/strong> in the src<\/strong> directory:<\/p>\n Next, we need to integrate the theme provider into our application. Open the src\/index.js<\/strong> file and wrap your <App \/><\/strong> component with the ThemeProvider<\/strong>:<\/p>\n Now, let\u2019s create the component that will actually toggle the themes. You can create a new file named ThemeSwitcher.js<\/strong> in the src<\/strong> directory:<\/p>\nUnderstanding the Basics<\/h2>\n
\n
Setting Up Your React Environment<\/h2>\n
npx create-react-app theme-switcher<\/code><\/pre>\ncd theme-switcher<\/code><\/pre>\nnpm install styled-components<\/code><\/pre>\nDefining Your Theme Styles<\/h2>\n
const lightTheme = {\n background: \"#ffffff\",\n color: \"#000000\",\n};\n\nconst darkTheme = {\n background: \"#000000\",\n color: \"#ffffff\",\n};\n\nexport { lightTheme, darkTheme }; <\/code><\/pre>\nCreating Theme Context<\/h2>\n
import React, { createContext, useState } from \"react\";\nimport { lightTheme, darkTheme } from \".\/themes\";\n\nconst ThemeContext = createContext();\n\nconst ThemeProvider = ({ children }) => {\n const [theme, setTheme] = useState(lightTheme);\n\n const toggleTheme = () => {\n setTheme((prevTheme) => (prevTheme === lightTheme ? darkTheme : lightTheme));\n };\n\n return (\n \n {children}\n \n );\n};\n\nexport { ThemeContext, ThemeProvider }; <\/code><\/pre>\nIntegrating the Theme Switcher<\/h2>\n
import React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport App from \".\/App\";\nimport { ThemeProvider } from \".\/ThemeContext\";\n\nReactDOM.render(\n \n \n ,\n document.getElementById(\"root\")\n); <\/code><\/pre>\nCreating the Theme Switcher Component<\/h2>\n
import React, { useContext } from \"react\";\nimport { ThemeContext } from \".\/ThemeContext\";\n\nconst ThemeSwitcher = () => {\n const { theme, toggleTheme } = useContext(ThemeContext);\n\n const switchStyles = {\n background: theme.background,\n color: theme.color,\n padding: \"10px\",\n border: \"none\",\n cursor: \"pointer\",\n };\n\n return (\n