Реализация переключателя темной/светлой темы в приложении React повышает удобство работы пользователей и позволяет им настраивать визуальное представление. В этой статье мы рассмотрим различные методы реализации темной/светлой темы с использованием локального хранилища в React. Используя локальное хранилище, мы можем сохранять предпочтения темы пользователя между сеансами.

Метод 1. Использование классов CSS

Один из самых простых способов реализовать переключатель темной/светлой темы — применить различные классы CSS к корневому элементу вашего приложения React. Вот пример:

import React, { useEffect, useState } from 'react';
import './App.css';
const App = () => {
  const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light');
  useEffect(() => {
    document.documentElement.className = theme;
    localStorage.setItem('theme', theme);
  }, [theme]);
  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };
  return (
    <div className="container">
      <h1>My React App</h1>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
};
export default App;

В этом примере мы используем хук useStateдля управления текущим состоянием темы. Хук useEffectиспользуется для обновления класса CSS корневого элемента при каждом изменении темы. Значение темы сохраняется в локальном хранилище, чтобы сохранить предпочтения пользователя.

Метод 2. Использование библиотек CSS-in-JS

Другой подход — использовать библиотеки CSS-in-JS, такие как Styled-Components или Emotion. Эти библиотеки позволяют вам определять стили внутри ваших компонентов React. Вот пример использования стилевых компонентов:

import React, { useEffect, useState } from 'react';
import styled, { ThemeProvider } from 'styled-components';
const lightTheme = {
  background: '#ffffff',
  text: '#000000',
};
const darkTheme = {
  background: '#222222',
  text: '#ffffff',
};
const Container = styled.div`
  background: ${(props) => props.theme.background};
  color: ${(props) => props.theme.text};
`;
const App = () => {
  const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light');
  useEffect(() => {
    localStorage.setItem('theme', theme);
  }, [theme]);
  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };
  return (
    <ThemeProvider theme={theme === 'light' ? lightTheme : darkTheme}>
      <Container>
        <h1>My React App</h1>
        <button onClick={toggleTheme}>Toggle Theme</button>
      </Container>
    </ThemeProvider>
  );
};
export default App;

В этом примере мы определяем два объекта темы (lightThemeи darkTheme) и используем компонент ThemeProviderиз стилевых компонентов для предоставления theme для стилизованных компонентов. Активная тема хранится в локальном хранилище и переключается при нажатии кнопки.

Метод 3. Использование контекстного API

React Context API позволяет нам обмениваться данными по дереву компонентов без передачи реквизитов вручную. Мы можем использовать контекст для реализации переключателя тем. Вот пример:

import React, { createContext, useContext, useEffect, useState } from 'react';
const ThemeContext = createContext();
const lightTheme = {
  background: '#ffffff',
  text: '#000000',
};
const darkTheme = {
  background: '#222222',
  text: '#ffffff',
};
const App = () => {
  const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light');
  useEffect(() => {
    localStorage.setItem('theme', theme);
  }, [theme]);
  const toggleTheme = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };
  return (
    <ThemeContext.Provider value={theme === 'light' ? lightTheme : darkTheme}>
      <Container />
    </ThemeContext.Provider>
  );
};
const Container = () => {
  const theme = useContext(ThemeContext);
  return (
    <div style={{ background: theme.background, color: theme.text }}>
      <h1>My React App</h1>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
};
export default App;

В этом примере мы создаем ThemeContext, используя createContext, и предоставляем объект темы через контекст. Компонент Containerиспользует тему с помощью хука useContextи применяет соответствующие стили.

Реализовать переключатель темной/светлой темы с локальным хранилищем в React можно с помощью различных методов, обеспечивающих гибкость и возможности настройки. Независимо от того, решите ли вы использовать классы CSS, библиотеки CSS-in-JS или Context API, главное — сохранить предпочтения темы пользователя в локальном хранилище для постоянного хранения.

Разрешая пользователям переключаться между темными и светлыми темами, вы улучшаете их работу в Интернете и учитываете их визуальные предпочтения. Не забудьте предоставить пользователям понятный и интуитивно понятный способ переключения темы, например специальную кнопку или пункт меню.

Не забудьте тщательно протестировать свою реализацию в разных браузерах и устройствах, чтобы обеспечить единообразие взаимодействия с пользователем. Имея в своем распоряжении эти методы, вы можете легко реализовать переключатель темной/светлой темы в своих приложениях React.