Home/ Questions/Q 467
Next
In Process

DevzConnect Latest Questions

nicko
  • 0
  • 0
Beginner
Asked: 2025-02-20T00:57:13+00:00 In:

How do you implement dark mode in React?

  • 0
  • 0

An explanation of implementing dark mode in React.

beginnerinterviewquestionsreactreactjs
Share
Leave an answer

Leave an answer

Browse

1 Answer

  1. Henry Davis
    Beginner

    Implementing dark mode in React is a common feature that allows users to switch between a light and dark theme for better user experience. You can implement dark mode in React using different approaches, but one of the most common methods is to use CSS variables for theming, along with React’s state management to toggle the theme.

    Steps to Implement Dark Mode in React:

    1. Create a Theme Context or useState: The first step is to create a mechanism to store the current theme (light or dark). You can use React’s useState hook or use a context to manage the theme across the app.

    2. Define CSS for Light and Dark Mode: You can use CSS variables to define the colors and other styles for both light and dark modes.

    3. Toggle Theme: Implement a function or button that allows users to toggle between dark and light themes.

    4. Persist the Theme: Optionally, store the theme in localStorage or sessionStorage so that the theme persists when the user reloads the page.

    Step-by-Step Example:

    1. Setting up React State or Context for Theme

    We will use useState in this example for simplicity, but you can also use Context API for larger applications where theme state should be shared across many components.

    2. Define CSS for Light and Dark Mode

    In your CSS or CSS-in-JS solution, define variables for both light and dark themes. You can switch between them using a class.

    /* Define the light theme */
:root {
--background-color: white;
--text-color: black;
--button-bg: #4CAF50;
}

/* Define the dark theme */
[data-theme="dark"] {
--background-color: #121212;
--text-color: white;
--button-bg: #333;
}

    3. App Component with Theme Toggle

    Now, in your App.js, create a simple component with a button to toggle the theme.

    import React, { useState, useEffect } from 'react';
import './App.css'; // Make sure to import your CSS file

function App() {
// Step 1: Set up state for theme and check for saved preference in localStorage
const [isDarkMode, setIsDarkMode] = useState(false);

useEffect(() => {
// Check localStorage for saved theme preference
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
setIsDarkMode(true);
document.body.setAttribute('data-theme', 'dark');
} else {
setIsDarkMode(false);
document.body.setAttribute('data-theme', 'light');
}
}, []);

// Step 2: Toggle the theme and save the preference in localStorage
const toggleTheme = () => {
setIsDarkMode(!isDarkMode);
if (!isDarkMode) {
document.body.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');
} else {
document.body.setAttribute('data-theme', 'light');
localStorage.setItem('theme', 'light');
}
};

return (

<div className="App">
<h1>React Dark Mode Example</h1>
<button onClick={toggleTheme} style={{ backgroundColor: 'var(--button-bg)', color: 'var(--text-color)' }}>
{isDarkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
</button>
<p style={{ color: 'var(--text-color)' }}>This is a simple dark mode toggle in React.</p>
</div>
);
}
export default App;

    4. CSS (styles.css)

    Here is a sample CSS file (App.css) with variables for light and dark themes. Make sure to include it in your project.

    /* Define the light theme */
:root {
--background-color: white;
--text-color: black;
--button-bg: #4CAF50;
--button-text: white;
}

/* Define the dark theme */
[data-theme="dark"] {
--background-color: #121212;
--text-color: white;
--button-bg: #333;
}

.App {
background-color: var(--background-color);
color: var(--text-color);
padding: 20px;
transition: background-color 0.3s, color 0.3s;
}

button {
padding: 10px 20px;
border: none;
cursor: pointer;
font-size: 16px;
}

    Explanation:

    1. State Management:

      • The isDarkMode state manages whether the app is in dark mode or light mode.
      • We use useEffect to check if the user has a saved theme in localStorage and apply it when the component mounts.

    2. CSS Variables:

      • The theme-related styles (like background color, text color, etc.) are defined using CSS variables.
      • The :root selector defines the default (light) theme, and the [data-theme="dark"] selector applies the dark theme.

    3. Toggling the Theme:

      • When the user clicks the button, the toggleTheme function toggles the isDarkMode state.
      • It also updates the data-theme attribute on the body element to switch between light and dark themes.
      • The theme is persisted in localStorage, so when the page reloads, the theme remains the same.

    4. Smooth Transitions:

      • The transition property on .App allows a smooth change between light and dark modes when the user toggles the theme.

    Optional: Using Context for Global State

    If you want to share the theme state across multiple components in a larger app, you can use React’s Context API to manage the theme globally.

    Creating a Theme Context:

    import React, { createContext, useState, useEffect } from 'react';

const ThemeContext = createContext();

export function ThemeProvider({ children }) {
const [isDarkMode, setIsDarkMode] = useState(false);

useEffect(() => {
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
setIsDarkMode(true);
document.body.setAttribute('data-theme', 'dark');
} else {
setIsDarkMode(false);
document.body.setAttribute('data-theme', 'light');
}
}, []);

const toggleTheme = () => {
setIsDarkMode(!isDarkMode);
if (!isDarkMode) {
document.body.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark');
} else {
document.body.setAttribute('data-theme', 'light');
localStorage.setItem('theme', 'light');
}
};

return (
<ThemeContext.Provider value={{ isDarkMode, toggleTheme }}>
{children}
</ThemeContext.Provider>
);
}

export function useTheme() {
return React.useContext(ThemeContext);
}

    Then wrap your app with ThemeProvider in index.js:

    import React from 'react';
import ReactDOM from 'react-dom';
import { ThemeProvider } from './ThemeContext';
import App from './App';

ReactDOM.render(
<ThemeProvider>
<App />
</ThemeProvider>,
document.getElementById('root')
);

    Now, in any component, you can use the useTheme hook to access and toggle the theme:

    import { useTheme } from './ThemeContext';

function ToggleButton() {
const { isDarkMode, toggleTheme } = useTheme();
return (
<button onClick={toggleTheme}>
{isDarkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
</button>
);
}

    Conclusion:

    • Light and Dark Mode can be easily implemented in React by using CSS variables and React’s useState (or Context API) for managing the theme.
    • CSS transitions can provide smooth visual changes between themes.
    • localStorage can be used to persist the theme selection between page reloads.