{"id":11137,"date":"2025-11-14T15:32:18","date_gmt":"2025-11-14T15:32:18","guid":{"rendered":"https:\/\/namastedev.com\/blog\/?p=11137"},"modified":"2025-11-14T15:32:18","modified_gmt":"2025-11-14T15:32:18","slug":"implementing-dark-mode-in-react-with-css-variables-and-context-api","status":"publish","type":"post","link":"https:\/\/namastedev.com\/blog\/implementing-dark-mode-in-react-with-css-variables-and-context-api\/","title":{"rendered":"Implementing Dark Mode in React with CSS Variables and Context API"},"content":{"rendered":"

Implementing Dark Mode in React with CSS Variables and Context API<\/h1>\n

In today\u2019s development landscape, user experience is paramount, and providing options like Dark Mode has become a trending feature. This blog will guide you through implementing Dark Mode in a React application using CSS Variables and the Context API. By the end of this article, you\u2019ll have a solid understanding of how to add this feature effectively while keeping your code clean and maintainable.<\/p>\n

What is Dark Mode?<\/h2>\n

Dark Mode is a color scheme that uses light-colored text, icons, and graphical user interface elements on a dark background. This mode reduces eye strain in low-light conditions and can also save battery life on OLED screens. With the increasing popularity of this feature, many developers now consider it a standard in modern web design.<\/p>\n

Why Use CSS Variables?<\/h2>\n

CSS Variables, also known as Custom Properties, provide a flexible way to manage styles in your application. They enable you to define values in one place and reuse them throughout your stylesheets. This is particularly beneficial when dealing with themes like Dark Mode, where you can switch styles by modifying just a few variable values.<\/p>\n

Setting Up Your React Project<\/h2>\n

First, ensure you have a React application set up. You can use Create React App for a straightforward setup. If you haven’t done this yet, run the following command:<\/p>\n

npx create-react-app dark-mode-example<\/code><\/pre>\n
After the setup is complete, navigate into the directory:<\/p>\n
cd dark-mode-example<\/code><\/pre>\n
Creating the Context for Dark Mode<\/h2>\n
The Context API allows you to share data across your React component tree without passing props down manually at every level. Let\u2019s create a context to manage the theme state.<\/p>\n
Create a new file called ThemeContext.js<\/strong> in the src<\/strong> directory:<\/p>\n
import React, { createContext, useState, useContext } from 'react';\n\nconst ThemeContext = createContext();\n\nexport const ThemeProvider = ({ children }) => {\n    const [isDarkMode, setIsDarkMode] = useState(false);\n\n    const toggleTheme = () => {\n        setIsDarkMode(prevMode => !prevMode);\n    };\n\n    return (\n        \n            {children}\n        \n    );\n};\n\nexport const useTheme = () => {\n    return useContext(ThemeContext);\n};<\/code><\/pre>\n
In this file, we’ve created a ThemeContext<\/strong>, a provider component that manages the dark mode state, and a custom hook useTheme<\/strong> to access the context in other components easily.<\/p>\n
Implementing CSS Variables for Themes<\/h2>\n
Next, let’s define some CSS variables for both light and dark themes. Open your index.css<\/strong> file and define the following styles:<\/p>\n
:root {\n    --background-color: #ffffff;\n    --text-color: #000000;\n}\n\n.dark-mode {\n    --background-color: #121212;\n    --text-color: #ffffff;\n}\n\nbody {\n    background-color: var(--background-color);\n    color: var(--text-color);\n    transition: background-color 0.3s ease, color 0.3s ease;\n}<\/code><\/pre>\n
Here, we have set some default CSS variables for the light mode and defined a dark-mode<\/strong> class that overrides these variables for dark mode. The transition effect will make theme changes smooth.<\/p>\n
Wrapping Your Application in the ThemeProvider<\/h2>\n
Now, we will wrap our application in the ThemeProvider<\/strong> we created earlier. Modify your src\/index.js<\/strong> file as follows:<\/p>\n
import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from '.\/App';\nimport { ThemeProvider } from '.\/ThemeContext';\nimport '.\/index.css';\n\nReactDOM.render(\n    \n        \n    ,\n    document.getElementById('root')\n);<\/code><\/pre>\n
Creating a Toggle Button for Dark Mode<\/h2>\n
With our context and CSS variables set up, let\u2019s implement a toggle button that switches between light and dark themes. Open your src\/App.js<\/strong> file and modify it:<\/p>\n
import React, { useEffect } from 'react';\nimport { useTheme } from '.\/ThemeContext';\n\nfunction App() {\n    const { isDarkMode, toggleTheme } = useTheme();\n\n    useEffect(() => {\n        document.body.classList.toggle('dark-mode', isDarkMode);\n    }, [isDarkMode]);\n\n    return (\n        
\n            
Hello, Dark Mode!<\/h1>\n            
Click the button below to toggle dark mode.<\/p>\n