Чтобы реализовать темный режим с помощью React Hooks, вы можете использовать различные методы. Вот несколько подходов:

1. Использование классов CSS. Вы можете определить отдельные классы CSS для светлого и темного режимов и переключаться между ними на основе состояния, управляемого React Hooks. Используйте ловушку useEffect, чтобы обновить имя класса при изменении режима.

import React, { useState, useEffect } from 'react';
import './styles.css';
function App() {
  const [darkMode, setDarkMode] = useState(false);
  useEffect(() => {
    if (darkMode) {
      document.body.classList.add('dark-mode');
    } else {
      document.body.classList.remove('dark-mode');
    }
  }, [darkMode]);
  return (
    <div>
      <button onClick={() => setDarkMode(!darkMode)}>
        Toggle Dark Mode
      </button>
      {/* Rest of your app */}
    </div>
  );
}

2. Использование встроенных стилей. Вместо применения классов CSS вы можете использовать встроенные стили для динамического обновления внешнего вида элементов. Вы можете хранить стили как для светлого, так и для темного режима в отдельных объектах и ​​переключаться между ними в зависимости от состояния.

import React, { useState } from 'react';
function App() {
  const [darkMode, setDarkMode] = useState(false);
  const lightStyles = {
    backgroundColor: 'white',
    color: 'black',
  };
  const darkStyles = {
    backgroundColor: 'black',
    color: 'white',
  };
  return (
    <div style={darkMode ? darkStyles : lightStyles}>
      <button onClick={() => setDarkMode(!darkMode)}>
        Toggle Dark Mode
      </button>
      {/* Rest of your app */}
    </div>
  );
}

3. Использование поставщика контекста. Вы можете создать контекст для управления состоянием темного режима и предоставить его компонентам, которым необходим доступ к нему. Это позволяет переключать режим любого компонента в контексте.

import React, { useState, createContext } from 'react';
const DarkModeContext = createContext();
function DarkModeProvider({ children }) {
  const [darkMode, setDarkMode] = useState(false);
  const toggleDarkMode = () => {
    setDarkMode(!darkMode);
  };
  return (
    <DarkModeContext.Provider value={{ darkMode, toggleDarkMode }}>
      {children}
    </DarkModeContext.Provider>
  );
}
function App() {
  return (
    <DarkModeProvider>
      <div>
        <ToggleDarkModeButton />
        {/* Rest of your app */}
      </div>
    </DarkModeProvider>
  );
}
function ToggleDarkModeButton() {
  const { darkMode, toggleDarkMode } = useContext(DarkModeContext);
  return (
    <button onClick={toggleDarkMode}>
      Toggle Dark Mode: {darkMode ? 'On' : 'Off'}
    </button>
  );
}

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