Dark mode has become a preferred interface option for many users, offering a visually soothing experience especially in low-light environments. If you are a React developer looking to implement dark mode in your applications, you\u2019ve come to the right place. In this article, we will explore the concepts and methods for implementing dark mode effectively in a React application.<\/p>\n
Dark mode is a display setting that uses a dark color palette for app interfaces, providing a low-haemoglobin view that reduces eye strain compared to bright, white backgrounds. It not only enhances user experience but can also save battery life on OLED displays.<\/p>\n
Before we dive into implementing dark mode, let\u2019s set up a simple React application. Run the following command in your terminal to create a new React app:<\/p>\n
npx create-react-app dark-mode-example<\/code><\/pre>\nNavigate into your newly created app:<\/p>\n
cd dark-mode-example<\/code><\/pre>\nNow, you can start the development server with:<\/p>\n
npm start<\/code><\/pre>\nImplementing Dark Mode: Step-by-Step<\/h2>\nStep 1: Defining Theme Styles<\/h3>\n
To implement dark mode, we first need to define styles for both light and dark modes. Create a new file named themes.js<\/strong> in the src<\/strong> folder of your application:<\/p>\nconst lightTheme = { \n backgroundColor: '#ffffff', \n color: '#000000' \n}; \n\nconst darkTheme = { \n backgroundColor: '#000000', \n color: '#ffffff' \n}; \n\nexport { lightTheme, darkTheme }; \n<\/code><\/pre>\nStep 2: Creating a Theme Context<\/h3>\n
Now, let’s create a context to manage the theme throughout your application. Create a new file called ThemeContext.js<\/strong> in the src<\/strong> folder:<\/p>\nimport React, { createContext, useState, useEffect } from 'react'; \nimport { lightTheme, darkTheme } from '.\/themes'; \n\nexport const ThemeContext = createContext(); \n\nconst ThemeProvider = ({ children }) => { \n const [theme, setTheme] = useState(lightTheme); \n const [isDarkMode, setIsDarkMode] = useState(false); \n\n useEffect(() => { \n setTheme(isDarkMode ? darkTheme : lightTheme); \n }, [isDarkMode]); \n\n const toggleTheme = () => { \n setIsDarkMode(!isDarkMode); \n }; \n\n return ( \n \n {children} \n \n ); \n}; \n\nexport default ThemeProvider; \n<\/code><\/pre>\nStep 3: Wrapping Your Application with ThemeProvider<\/h3>\n
To make the theme available throughout your application, you need to wrap your application with the ThemeProvider<\/strong>. Open index.js<\/strong> and do the following:<\/p>\nimport 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 4: Using the Theme in Your Components<\/h3>\n
Next, you can use the theme context in your components. Open App.js<\/strong> and update it as follows:<\/p>\nimport React, { useContext } from 'react'; \nimport { ThemeContext } from '.\/ThemeContext'; \n\nconst App = () => { \n const { theme, toggleTheme } = useContext(ThemeContext); \n \n return ( \n \n Hello, World!<\/h1> \n