{"id":5379,"date":"2025-04-29T13:32:38","date_gmt":"2025-04-29T13:32:37","guid":{"rendered":"https:\/\/namastedev.com\/blog\/?p=5379"},"modified":"2025-04-29T13:32:38","modified_gmt":"2025-04-29T13:32:37","slug":"dark-mode-in-react-the-easy-way","status":"publish","type":"post","link":"https:\/\/namastedev.com\/blog\/dark-mode-in-react-the-easy-way\/","title":{"rendered":"Dark Mode in React the Easy Way"},"content":{"rendered":"
Dark Mode in React the Easy Way<\/h1>\n
In recent years, dark mode has surged in popularity across applications and operating systems. It not only reduces eye strain in low-light conditions but also enhances battery life for OLED screens. Implementing dark mode in React apps has never been easier, and in this article, we’ll explore a straightforward method for doing so. Whether you’re a beginner just starting with React or a seasoned developer looking to implement this feature efficiently, this guide is for you.<\/p>\n
Understanding Dark Mode and Its Benefits<\/h2>\n
Dark mode, as the name suggests, is a user interface design that displays light text on a dark background. Here are some key benefits:<\/p>\n
\n
Reduced Eye Strain:<\/strong> Dark themes can reduce glare and make it easier on the eyes, especially in dim environments.<\/li>\n
Battery Saving:<\/strong> On OLED and AMOLED screens, dark pixels use less power, thus extending battery life.<\/li>\n
Enhanced Readability:<\/strong> Many users find content easier to read and comprehend in dark mode.<\/li>\n<\/ul>\n
Preparing Your React Application<\/h2>\n
Before we implement dark mode, ensure you have a basic React application set up. We will use create-react-app<\/strong> to quickly bootstrap our application. If you haven\u2019t created one yet, you can do so with the following command:<\/p>\n
Once your app is ready, navigate to the project directory:<\/p>\n
cd dark-mode-example<\/code><\/pre>\n
Setting Up State Management for Dark Mode<\/h2>\n
We will manage the dark mode state using React’s built-in useState<\/strong> and useEffect<\/strong> hooks. Our application will remember user preferences using local storage.<\/p>\n
Creating the Theme Context<\/h3>\n
First, let’s create a context to share the dark mode state across our components. Create a new file called ThemeContext.js<\/strong> in the src<\/strong> directory:<\/p>\n
touch src\/ThemeContext.js<\/code><\/pre>\n
Now, add the following code to your ThemeContext.js<\/strong> file:<\/p>\n
import React, { createContext, useContext, useState, useEffect } from 'react';\n\nconst ThemeContext = createContext();\n\nexport const ThemeProvider = ({ children }) => {\n const [isDarkMode, setIsDarkMode] = useState(() => {\n \/\/ Get the user's preference from local storage or default to false\n return JSON.parse(localStorage.getItem('darkMode')) || false;\n });\n\n useEffect(() => {\n \/\/ Save the user's preference in local storage\n localStorage.setItem('darkMode', JSON.stringify(isDarkMode));\n document.body.className = isDarkMode ? 'dark' : 'light';\n }, [isDarkMode]);\n\n const toggleTheme = () => {\n setIsDarkMode((prevMode) => !prevMode);\n };\n\n return (\n \n {children}\n \n );\n};\n\nexport const useTheme = () => useContext(ThemeContext);\n<\/code><\/pre>\n
Applying the Theme Context in Your Application<\/h2>\n
Now that we have our theme context set up, let’s integrate it into our main App.js<\/strong> file.<\/p>\n
import React from 'react';\nimport { ThemeProvider } from '.\/ThemeContext';\nimport TodoApp from '.\/TodoApp'; \/\/ assume we will create a TodoApp component for demonstration\n\nconst App = () => {\n return (\n \n \n \n );\n}\n\nexport default App;\n<\/code><\/pre>\n
Building a Sample Component to Test Dark Mode<\/h2>\n
Next, we\u2019ll create a simple component to showcase the dark mode functionality. For this example, we will create a TodoApp<\/strong> component. Create a new file called TodoApp.js<\/strong> in the src<\/strong> directory:<\/p>\n
touch src\/TodoApp.js<\/code><\/pre>\n
Now, add the following code to your TodoApp.js<\/strong> file:<\/p>\n