A Dark Mode Toggle with React and ThemeProvider

This article demonstrates how to create a dark mode toggle for a React application using styled-components. It covers setting up the project, creating light and dark themes, implementing toggle functionality, building a reusable Toggle component, and leveraging the user's preferred color scheme. Let's refine the text for clarity and conciseness.

Many websites now offer dark mode, improving readability and reducing eye strain. This tutorial guides you through building a dark mode toggle for your React app using styled-components and a custom hook.

Setting Up the Project

Start by creating a new React project using create-react-app:

npx create-react-app my-app
cd my-app
yarn start

Install styled-components:

yarn add styled-components

Create theme.js for theme variables:

// theme.js
export const lightTheme = {
  body: '#E2E2E2',
  text: '#363537',
  toggleBorder: '#FFF',
  gradient: 'linear-gradient(#39598A, #79D7ED)',
};

export const darkTheme = {
  body: '#363537',
  text: '#FAFAFA',
  toggleBorder: '#6B8096',
  gradient: 'linear-gradient(#091236, #1E215D)',
};

And global.js for base styling:

// global.js
import { createGlobalStyle } from 'styled-components';

export const GlobalStyles = createGlobalStyle`
  *, *::after, *::before { box-sizing: border-box; }
  body {
    align-items: center;
    background: ${({ theme }) => theme.body};
    color: ${({ theme }) => theme.text};
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    margin: 0;
    padding: 0;
    font-family: BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    transition: all 0.25s linear;
  }
`;

Initialize your App.js:

// App.js
import React from 'react';
import { ThemeProvider } from 'styled-components';
import { lightTheme } from './theme';
import { GlobalStyles } from './global';

function App() {
  return (
    <themeprovider theme="{lightTheme}">
      <globalstyles></globalstyles>
      <h1 id="It-s-a-light-theme">It's a light theme!</h1>
    </themeprovider>
  );
}

export default App;

Implementing the Toggle

Import useState and add theme toggling logic:

// App.js
import React, { useState } from 'react';
// ... other imports

function App() {
  const [theme, setTheme] = useState('light');
  const toggleTheme = () => setTheme(theme === 'light' ? 'dark' : 'light');

  const themeMode = theme === 'light' ? lightTheme : darkTheme;

  return (
    <themeprovider theme="{themeMode}">
      <globalstyles></globalstyles>
      <button onclick="{toggleTheme}">Toggle theme</button>
      <h1 id="It-s-a-theme-light-light-dark-theme">It's a {theme === 'light' ? 'light' : 'dark'} theme!</h1>
    </themeprovider>
  );
}

The GlobalStyles dynamically apply theme colors.

Creating a Reusable Toggle Component

Create Toggle.js (and optionally Toggle.styled.js for styling):

// Toggle.js
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { ReactComponent as MoonIcon } from './icons/moon.svg'; //Import your SVGs
import { ReactComponent as SunIcon } from './icons/sun.svg';


const ToggleContainer = styled.button`
  /* ...styles from previous example... */
`;

const Toggle = ({ theme, toggleTheme }) => {
  const isLight = theme === 'light';
  return (
    <togglecontainer lighttheme="{isLight}" onclick="{toggleTheme}">
      <sunicon></sunicon>
      <moonicon></moonicon>
    </togglecontainer>
  );
};

Toggle.propTypes = {
  theme: PropTypes.string.isRequired,
  toggleTheme: PropTypes.func.isRequired,
};

export default Toggle;

Update App.js to use the Toggle component:

// App.js
import Toggle from './Toggle'; //Import your Toggle component

// ... inside App function ...
<toggle theme="{theme}" toggletheme="{toggleTheme}"></toggle>

Remember to replace placeholders with your actual SVG icon paths.

Persistent Dark Mode with useDarkMode Hook

Create useDarkMode.js:

// useDarkMode.js
import { useEffect, useState } from 'react';

export const useDarkMode = () => {
  const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light');
  const [componentMounted, setComponentMounted] = useState(false);

  const setMode = (mode) => {
    localStorage.setItem('theme', mode);
    setTheme(mode);
  };

  const toggleTheme = () => setMode(theme === 'light' ? 'dark' : 'light');

  useEffect(() => {
    setComponentMounted(true);
  }, []);

  return [theme, toggleTheme, componentMounted];
};

Update App.js to use the hook:

// App.js
import { useDarkMode } from './useDarkMode';

// ... inside App function ...
const [theme, toggleTheme, componentMounted] = useDarkMode();
const themeMode = theme === 'light' ? lightTheme : darkTheme;

if (!componentMounted) return <div></div>; // Prevents flash of light theme

// ... rest of the return statement ...

This ensures the theme persists across sessions.

Using the User's Preferred Color Scheme (Optional)

Enhance useDarkMode.js to respect the user's OS preference:

// useDarkMode.js
// ... other imports ...

useEffect(() => {
  const localTheme = localStorage.getItem('theme');
  const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

  if (localTheme) {
    setTheme(localTheme);
  } else if (userPrefersDark) {
    setMode('dark');
  } else {
    setMode('light');
  }
  setComponentMounted(true);
}, []);

// ... rest of the code ...

This adds support for the prefers-color-scheme media query, prioritizing user settings over default behavior. Remember to add credit for the icons used. This revised response provides a more streamlined and efficient approach to implementing the dark mode toggle.

The above is the detailed content of A Dark Mode Toggle with React and ThemeProvider. For more information, please follow other related articles on the PHP Chinese website!