В последние годы темный режим становится все более популярным, предлагая пользователям элегантную и удобную для глаз альтернативу традиционному светлому интерфейсу. Если вы разработчик React и хотите реализовать Dark Mode в своем приложении, вам повезло! В этой статье мы рассмотрим различные методы интеграции Dark Mode с использованием контекстного API React. Итак, хватайте инструменты для программирования и приступайте!

Метод 1: использование хуков useState и useEffect
Один простой подход к реализации темного режима — использование хуков useState и useEffect, предоставляемых React. Вот фрагмент для начала:

import React, { useState, useEffect } from 'react';
const App = () => {
  const [isDarkMode, setIsDarkMode] = useState(false);
  useEffect(() => {
    // Logic to toggle dark mode based on user preferences or system settings
  }, []);
  // Rest of your application's code
  return (
    <div className={isDarkMode ? 'dark-theme' : 'light-theme'}>
      {/* Your application's components */}
    </div>
  );
};
export default App;

Метод 2: использование контекста React
Context API React предоставляет мощный механизм для управления глобальным состоянием компонентов. Используя контекст, мы можем легко поделиться состоянием темного режима и функцией переключения во всем приложении. Вот пример того, как этого можно добиться:

import React, { createContext, useState } from 'react';
const DarkModeContext = createContext();
const DarkModeProvider = ({ children }) => {
  const [isDarkMode, setIsDarkMode] = useState(false);
  const toggleDarkMode = () => {
    setIsDarkMode((prevMode) => !prevMode);
  };
  return (
    <DarkModeContext.Provider value={{ isDarkMode, toggleDarkMode }}>
      {children}
    </DarkModeContext.Provider>
  );
};
export { DarkModeContext, DarkModeProvider };

Теперь оберните свое приложение компонентом DarkModeProvider на верхнем уровне. Вы можете получить доступ к состоянию темного режима и функции переключения в любом вложенном компоненте с помощью перехватчика useContext.

Метод 3: сохранение локального хранилища
Чтобы обеспечить бесперебойную работу, важно сохранить предпочтения пользователя в темном режиме. Один из способов добиться этого — сохранить режим в локальном хранилище браузера. Вот пример того, как включить постоянное локальное хранилище:

import React, { createContext, useState, useEffect } from 'react';
const DarkModeContext = createContext();
const DarkModeProvider = ({ children }) => {
  const [isDarkMode, setIsDarkMode] = useState(
    localStorage.getItem('darkMode') === 'true'
  );
  useEffect(() => {
    localStorage.setItem('darkMode', isDarkMode);
  }, [isDarkMode]);
  // Rest of the code remains the same
};
export { DarkModeContext, DarkModeProvider };

Реализация темного режима в React с использованием Context API открывает мир возможностей для создания визуально потрясающего и удобного для пользователя приложения. В этой статье мы рассмотрели три различных подхода: использование перехватчиков useState и useEffect, использование контекста React и добавление персистентности локального хранилища. Не стесняйтесь экспериментировать с этими методами и выберите тот, который лучше всего соответствует требованиям вашего проекта. Приятного кодирования!