In modern web development, user experience is paramount. As a developer, one way to enhance the experience is by incorporating a theme switcher in your applications. This allows users to toggle between different themes\u2014typically a light and dark mode\u2014that suits their visual preferences. In this blog, we will walk through creating a simple yet effective theme switcher in a React application.<\/p>\n
A theme switcher is a user interface component that enables users to change the appearance of the application based on their preference. It usually toggles between predefined styles, such as light and dark themes. This not only adds a personal touch but can also help reduce eye strain and improve accessibility.<\/p>\n
If you don\u2019t already have a React application set up, you can create one quickly using Create React App. Open your terminal and run:<\/p>\n
npx create-react-app theme-switcher<\/code><\/pre>\nOnce your application is created, navigate to the project directory:<\/p>\n
cd theme-switcher<\/code><\/pre>\nNow, let’s install styled-components<\/strong> to facilitate styling in our React app:<\/p>\nnpm install styled-components<\/code><\/pre>\nCreating the Theme Context<\/h2>\n
To manage our themes centrally, we will utilize React Context. This allows us to share theme data across our components without prop drilling.<\/p>\n
Create a new file named ThemeContext.js<\/strong> in the src<\/strong> folder:<\/p>\ntouch src\/ThemeContext.js<\/code><\/pre>\nIn ThemeContext.js<\/strong>, set up a context to provide theme information:<\/p>\nimport React, { createContext, useContext, useState } from 'react';
\nconst ThemeContext = createContext();
\nexport const useTheme = () => useContext(ThemeContext);
\nexport const ThemeProvider = ({ children }) => {
\n const [theme, setTheme] = useState('light');
\n const toggleTheme = () => {
\n setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
\n };
\n return (
\n <ThemeContext.Provider value={{ theme, toggleTheme }}>
\n {children}
\n <\/ThemeContext.Provider>
\n );
\n};
<\/code><\/pre>\nIntegrating the Theme Provider<\/h2>\n
Next, we will wrap our application in the ThemeProvider<\/strong> so that the theme context can be accessed throughout our component tree. Open the src\/index.js<\/strong> file and modify it as follows:<\/p>\nimport React from 'react';
\nimport ReactDOM from 'react-dom';
\nimport '.\/index.css';
\nimport App from '.\/App';
\nimport { ThemeProvider } from '.\/ThemeContext';
\nReactDOM.render(
\n <ThemeProvider>
\n <App \/>
\n <\/ThemeProvider>
\n, document.getElementById('root'));
<\/code><\/pre>\nCreating the Theme Switcher Component<\/h2>\n
Now it’s time to create the component responsible for toggling the theme. Create a new file ThemeSwitcher.js<\/strong> in the src<\/strong> folder:<\/p>\ntouch src\/ThemeSwitcher.js<\/code><\/pre>\nNext, implement the theme switcher feature:<\/p>\n
import React from 'react';
\nimport { useTheme } from '.\/ThemeContext';
\nconst ThemeSwitcher = () => {
\n const { theme, toggleTheme } = useTheme();
\n return (
\n <button onClick={toggleTheme}>Switch to {theme === 'light' ? 'Dark' : 'Light'} Mode<\/button>
\n );
\n};
\nexport default ThemeSwitcher;
<\/code><\/pre>\nImplementing Styles for Themes<\/h2>\n
We will now use styled-components to create a simple theme management style. In your src<\/strong> directory, create a file called themes.js<\/strong>:<\/p>\ntouch src\/themes.js<\/code><\/pre>\nPopulate themes.js<\/strong> with the theme definitions:<\/p>\nexport const lightTheme = {
\n background: '#ffffff',
\n color: '#000000'
\n};
\nexport const darkTheme = {
\n background: '#000000',
\n color: '#ffffff'
\n};
<\/code><\/pre>\nApplying Styles Using ThemeProvider<\/h2>\n
Now, we need to apply these themes using styled-components<\/strong>. In your App.js<\/strong> file, import the necessary modules.<\/p>\nimport React from 'react';
\nimport { ThemeProvider as StyledThemeProvider } from 'styled-components';
\nimport { useTheme } from '.\/ThemeContext';
\nimport ThemeSwitcher from '.\/ThemeSwitcher';
\nimport { lightTheme, darkTheme } from '.\/themes';
\nconst App = () => {
\n const { theme } = useTheme();
\n return (
\n <StyledThemeProvider theme={theme === 'light' ? lightTheme : darkTheme}>
\n <div style={{
\n background: theme === 'light' ? lightTheme.background : darkTheme.background,
\n color: theme === 'light' ? lightTheme.color : darkTheme.color,
\n minHeight: '100vh',
\n padding: '20px'
\n }}>
\n <h1>Welcome to the Theme Switcher App<\/h1>
\n <ThemeSwitcher \/>
\n <\/div>
\n <\/StyledThemeProvider>
\n );
\n};
\nexport default App;
<\/code><\/pre>\nPutting It All Together<\/h2>\n
Your directory structure should look like this:<\/p>\n
\n- src\/<\/li>\n
- ThemeContext.js<\/li>\n
- ThemeSwitcher.js<\/li>\n
- themes.js<\/li>\n
- App.js<\/li>\n<\/ul>\n
Now, start your application with:<\/p>\n
npm start<\/code><\/pre>\nYour application should open in the default web browser, and you should see a button that allows switching between light and dark modes.<\/p>\n
Conclusion<\/h2>\n
In this article, we have explored how to create a simple theme switcher in a React application using Context and styled-components. Not only does this feature add a layer of personalization for users, but it also contributes to a more accessible and flexible web experience. With just a bit of code, you can significantly enhance the user interface of your applications.<\/p>\n
Feel free to expand on this example by adding additional themes, animations, or even integrating local storage to remember user preferences across sessions. Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"
Creating a Theme Switcher in React In modern web development, user experience is paramount. As a developer, one way to enhance the experience is by incorporating a theme switcher in your applications. This allows users to toggle between different themes\u2014typically a light and dark mode\u2014that suits their visual preferences. In this blog, we will walk<\/p>\n","protected":false},"author":82,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[398],"tags":[224],"class_list":["post-7202","post","type-post","status-publish","format-standard","category-react","tag-react"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/7202","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/users\/82"}],"replies":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/comments?post=7202"}],"version-history":[{"count":1,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/7202\/revisions"}],"predecessor-version":[{"id":7203,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/7202\/revisions\/7203"}],"wp:attachment":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/media?parent=7202"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/categories?post=7202"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/tags?post=7202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}