Як налаштувати нічний режим на своєму сайті: покрокова інструкція з CSS

Крок 1: Додайте базові стилі

Зазначте стандартні кольори для денного режиму у вашому CSS-файлі:

body {
    background-color: #ffffff;
    color: #333;
    transition: background-color 0.3s ease, color 0.3s ease;
}
            

Крок 2: Додайте стилі для нічного режиму

Створіть клас для темного режиму, який змінюватиме кольори фону та тексту:

body.dark-mode {
    background-color: #2b2b2b;
    color: #ddd;
}
            

Крок 3: Додайте JavaScript для перемикання

Реалізуйте кнопку, яка дозволяє користувачам вмикати та вимикати нічний режим:

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