Переключение между светлой и темной модами в React

Введение

В этом проекте вы научитесь создавать React-приложение, которое позволяет пользователям переключаться между светлой и темной темами. Проект продемонстрирует использование React Context API и хука useContext для управления глобальным состоянием темы.

👀 Предпросмотр

предпросмотр проекта

🎯 Задачи

В этом проекте вы научитесь:

создавать ThemeContext с использованием React Context API;
использовать ThemeContext в компоненте App для изменения стиля всего приложения в зависимости от темы;
использовать ThemeContext в компоненте Card для изменения стилей карточек в зависимости от темы;
оборачивать компонент App в ThemeProvider, чтобы контекст темы был доступен по всему приложению.

🏆 Достижения

После завершения этого проекта вы сможете:

понять, как использовать React Context API для управления глобальным состоянием;
применить хук useContext для доступа к значениям контекста;
реализовывать разные стили в зависимости от текущей темы;
переключать тему и обновлять глобальное состояние.

Настройка проекта

В этом шаге вы научитесь настраивать проект и устанавливать необходимые зависимости.

Откройте свой редактор кода и перейдите в директорию проекта.

├── components
│ └── Card.js
├── contexts
│ └── ThemeContext.js
├── App.css
├── App.js
├── index.css
├── index.js
├── reportWebVitals.js
└── setupTests.js

Описание файлов:

Директория components содержит все файлы компонентов.
Директория contexts содержит файл ThemeContext.js, который необходимо заполнить.

Поскольку это React-проект, нам нужно установить зависимости, выполнив следующую команду:

npm install

После установки зависимостей следуйте этим шагам, чтобы открыть проект:

Запустите локальный сервер, выполнив следующую команду в терминале:

npm start

Откройте веб-сервер справа в кодировочной среде. Вы увидите статический эффект, показанный ниже. В настоящее время нажатие кнопки "Темная тема" не вызывает никаких изменений.

неисправная кнопка темной темы

Создать ThemeContext

В этом шаге вы научитесь создавать ThemeContext с использованием React Context API. Следуйте шагам ниже, чтобы выполнить этот шаг:

Откройте файл ThemeContext.js, расположенный в директории src/contexts.
Создайте ThemeContext с использованием React.createContext():
```
export const ThemeContext = React.createContext();
```

Создайте компонент ThemeProvider, который будет оборачивать компонент App и предоставлять контекст темы:

export const ThemeProvider = (props) => {
  const [theme, setTheme] = React.useState("light");
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {props.children}
    </ThemeContext.Provider>
  );
};

Компонент ThemeProvider инициализирует состояние theme значением "light" и предоставляет значения theme и setTheme контексту.

Использовать ThemeContext в компоненте App

В этом шаге вы научитесь использовать ThemeContext в компоненте App для изменения стиля всего приложения в зависимости от темы.

Откройте файл src/App.js.
Используйте хук useContext, чтобы получить значение theme из ThemeContext:
```
const { theme } = useContext(ThemeContext);
```
Обновите JSX компонента App, чтобы применить разные стили в зависимости от значения theme:
```
return (
  <div className={theme === "light" ? "app app-light" : "app app-dark"}>
    <Card></Card>
  </div>
);
```

Классы app-light и app-dark будут применяться к основному элементу div в зависимости от значения theme.

Использовать ThemeContext в компоненте Card

В этом шаге вы научитесь использовать ThemeContext в компоненте Card для изменения стилей карточек в зависимости от темы.

Откройте файл src/components/Card.js.
Используйте хук useContext, чтобы получить значения theme и setTheme из ThemeContext:
```
export const Card = () => {
  const { theme, setTheme } = useContext(ThemeContext);
  //...
};
```
Реализуйте функцию handleThemeToggle, чтобы переключать тему:
```
const handleThemeToggle = (e) => {
  setTheme(theme === "light" ? "dark" : "light");
};
```

Эта функция обновит значение theme в ThemeContext, когда кнопка будет нажата.

Обернуть компонент App в ThemeProvider

В этом финальном шаге вы научитесь оборачивать компонент App в ThemeProvider, чтобы контекст темы был доступен по всему приложению.

Откройте файл src/index.js.
Импортируйте ThemeProvider из файла ThemeContext.js:
```
import { ThemeProvider } from "./contexts/ThemeContext";
```

Оберните компонент App в ThemeProvider в функции ReactDOM.render:

root.render(
  <React.StrictMode>
    <ThemeProvider>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

Теперь компонент App и его дочерние компоненты могут получать значения theme и setTheme из ThemeContext с использованием хука useContext.

После завершения задания эффект должен быть таким:

гиф-анимация демонстрации переключения темы

Поздравляем! Вы завершили проект. Теперь вы должны быть в состоянии переключаться между светлой и темной модами, нажав кнопку в компоненте карточки.

Резюме

Поздравляем! Вы завершили этот проект. Вы можете практиковаться в более многих лабораторных работах в LabEx, чтобы улучшить свои навыки.

Переключение между светлой и темной темами