Using React to implement dark mode requires attention to state management, style switching and user preference storage. First, manage the darkMode status through useState and switch with buttons; 2. Realize style switching by dynamically adding or removing CSS classes (such as dark-mode), or combine CSS variables and ThemeProvider for finer granular control; 3. Use localStorage to persist user preferences to ensure that the mode you selected last time is still maintained after refresh. These steps together ensure the complete implementation of dark mode functions and the user experience consistency.

Dark mode toggle is a common feature in modern web applications, and React projects are no exception. Implementation is not complicated, but there are several key points that need to be paid attention to, such as state management, style switching and user preference storage.

Use React State Management Topic Switch

First, you need a state to control whether it is currently dark or bright. Usually we use useState to save this state:

 const [darkMode, setDarkMode] = useState(false);

Then use a button to switch the state:

 <button onClick={() => setDarkMode(!darkMode)}>Toggle Dark Mode</button>

This part of the logic is simple and straightforward, but what really works is how to map this state to the page style.

Dynamically switch CSS classes or variables

A common practice is to add a class name for the body or root element, such as dark-mode , and then define the corresponding style rules in CSS:

 useEffect(() => {
  if (darkMode) {
    document.body.classList.add('dark-mode');
  } else {
    document.body.classList.remove('dark-mode');
  }
}, [darkMode]);

Corresponding to CSS:

 body {
  background: white;
  color: black;
}

body.dark-mode {
  background: #121212;
  color: #e6e6e6;
}

This approach is very effective for overall theme switching, especially if you already have a complete CSS style.

Save user preferences (optional but recommended)

If you want the user to refresh the page after switching and still maintain preference, you can use localStorage to store the current status:

 const getInitialMode = () => {
  const savedMode = localStorage.getItem('darkMode');
  return savedMode ? JSON.parse(savedMode) : false;
};

const [darkMode, setDarkMode] = useState(getInitialMode);

useEffect(() => {
  localStorage.setItem('darkMode', JSON.stringify(darkMode));
  // Synchronously update class
}, [darkMode]);

In this way, the user defaults to the bright color mode when the first visit is available. Once the user switches once, he will remember the last selection the next time he opens the page.

More flexible with CSS variables or theme systems

If your project uses CSS variables or CSS-in-JS solutions like styled-components and emotion , you can also combine ThemeProvider to achieve finer granular control.

Take styled-components as an example:

• Define two theme objects: lightTheme and darkTheme
• Wrap your component tree with ThemeProvider
• When switching, change the incoming topic object

This is suitable for projects that require deep custom theme styles, but it is relatively more complex.

Basically that's it. The core is three points: state control, style switching, and persistence preference. It is not difficult, but it is easy to ignore details, such as initial value processing, style priority, cross-page consistency and other issues.

The above is the detailed content of Implementing a Dark Mode Toggle in React. For more information, please follow other related articles on the PHP Chinese website!