Привет! Итак, если вы похожи на меня и любите атмосферу темного режима, возможно, вы подумали о том, чтобы добавить его на свой веб-сайт. Его довольно легко настроить, используя немного CSS и JavaScript. Вот как я это сделал.

Шаг 1. Настройка HTML

Во-первых, вам нужна кнопка или переключатель, с помощью которого пользователи смогут переключаться между светлым и темным режимами. Для этого примера я использовал простую кнопку (при желании вы можете использовать значок):

Toggle Dark Mode

Эта кнопка будет триггером переключения режимов.

Шаг 2. Добавление CSS для светлого и темного режимов

Далее вам нужно определить, как будут выглядеть светлый и темный режимы. В вашем CSS вы настроите стили по умолчанию (которые будут вашим светлым режимом), а затем добавите класс темного режима, который переопределяет эти стили.

body {
    background-color: white;
    color: black;
    transition: background-color 0.3s, color 0.3s;
}

.dark-mode {
    background-color: #121212;
    color: #ffffff;
}

Вот что происходит:

• Светлый режим (по умолчанию): Тело имеет белый фон и черный текст. Я добавил переход, чтобы сделать изменения плавными при переключении между режимами.
• Темный режим: Класс .dark-mode меняет фон на темно-серый, а текст на белый.

Шаг 3. Переключение между режимами с помощью JavaScript

Теперь мы заставляем кнопку что-то делать. Этот фрагмент JavaScript будет переключать класс .dark-mode в теле при каждом нажатии кнопки.

const toggleButton = document.getElementById('dark-mode-toggle');
const body = document.body;

toggleButton.addEventListener('click', () => {
    body.classList.toggle('dark-mode');

    // Save the user's preference in local storage
    if (body.classList.contains('dark-mode')) {
        localStorage.setItem('theme', 'dark');
    } else {
        localStorage.setItem('theme', 'light');
    }
});

Вот разбивка:

• Переключение класса: При нажатии кнопки мы переключаем класс .dark-mode на теле. Это меняет стили между светлым и темным режимами.
• Сохранение предпочтений: Я добавил немного больше, сохранив предпочтения пользователя в localStorage. Это означает, что если они выберут темный режим, он останется таким, даже если они уйдут и вернутся на сайт.

Шаг 4. Загрузка предпочтений пользователя при загрузке страницы

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

window.addEventListener('load', () => {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme === 'dark') {
        body.classList.add('dark-mode');
    }
});

Если вы используете React, процесс очень похож, но вы будете управлять всем внутри своих компонентов. Вот как это сделать:

1. Настройка состояния и класса CSS для темного режима:

Используйте useState React для управления состоянием темного режима и примените соответствующий класс к корневому элементу:

   import React, { useState } from 'react';

   function App() {
       const [darkMode, setDarkMode] = useState(false);

       const toggleDarkMode = () => {
           setDarkMode(!darkMode);
       };

       return (
           

               
                   {darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
               
           
       );
   }

   export default App;

В этом примере:

• Состояние darkMode определяет, активен ли темный режим.
• Функция toggleDarkMode включает и выключает темный режим.

1. CSS для темного режима:

Добавьте класс .dark-mode в свой CSS, как и раньше:

   body {
       background-color: white;
       color: black;
       transition: background-color 0.3s, color 0.3s;
   }

   .dark-mode {
       background-color: #121212;
       color: #ffffff;
   }

1. Локальное хранилище:

Если вы хотите, чтобы настройки темы сохранялись, вы можете добавить эту небольшую настройку:

   import React, { useState, useEffect } from 'react';

   function App() {
       const [darkMode, setDarkMode] = useState(() => {
           const savedTheme = localStorage.getItem('theme');
           return savedTheme === 'dark';
       });

       useEffect(() => {
           localStorage.setItem('theme', darkMode ? 'dark' : 'light');
       }, [darkMode]);

       return (
           

                setDarkMode(!darkMode)}>
                   {darkMode ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
               
           
       );
   }

   export default App;

Вот что происходит:

• Начальное состояние: Начальное состояние darkMode устанавливается на основе значения, хранящегося в localStorage.
• Хук эффекта: Хук useEffect сохраняет текущие настройки темы при каждом изменении темного режима.

И всё! Это более простой способ добавить темный режим в ваше приложение React, не усложняя ситуацию.