У попередній статті, а також давним-давно у ще одній статті я описував, як зробити кнопку "Темний режим" на WordPress-сайті. В обидвох випадках для запам'ятовування режиму використовувався запис у cookies, а також після зміни стилю відбувалося перезавантаження сторінки. Це було необхідно для зміни CSS-файлу, який відповідав за стилі кожного режиму.

Зараз ми розглянемо ще один спосіб, який працюватиме без перезавантаження сторінки. Як це зробити? Просто не вибирати різні файли стилів для кожного оформлення, а написати всі стилі в одному файлі, просто додавши допоміжний клас. Додавати клас ми будемо до основного тега html (щоб стовідсотково), а записувати всі зміни будемо не в cookies, а для різноманітності у відносно нову фішку HTML5 – localStorage.

localStorage – відносно нова особливість HTML5, що дозволяє зберігати будь-яку інформацію в браузері користувача завдяки JavaScript. Це схоже на JS-об'єкт, в який можна додавати та видаляти пари ключ/значення. Призначення localStorage практично те ж саме, що в cookies, в нього просто записується різна інформація, яку необхідно зберегти на потім. Переваги localStorage перед cookies – більший розмір виділеної пам'яті та локальна робота – дані зберігаються в браузері, але не передаються на сервер.

Функції localStorage ніби спеціально написані для наших потреб – записати значення стилю сайту і використовувати його, поки користувач не надумає його змінити 😉

В нашому прикладі буде створений блок div із класом darkmode-checker, який буде відстежувати наявність змінної my_darkMode в localStorage та перемикати його у випадку клацання по ньому.

Отже, створюємо JS-файл, для прикладу, із назвою darkmode.js та розміщуємо його в теці /assets/js свого шаблона. Наповнюємо його ось таким змістом:

;(function (window, document, undefined) {
    'use strict';
    if (!('localStorage' in window)) return;
    var darkMode = localStorage.getItem('my_darkMode');
    if (darkMode) {
        document.documentElement.className += ' darkmode';
    }
})(window, document);


;(function (window, document, undefined) {
    'use strict';
    if (!('localStorage' in window)) return;
    var darkMode = document.querySelector('#darkmode');
    if (!darkMode) return;
    darkMode.addEventListener('click', function (event) {
        event.preventDefault();
        document.documentElement.classList.toggle('darkmode');
        if ( document.documentElement.classList.contains('darkmode') ) {
            localStorage.setItem('my_darkMode', true);
            return;
        }
        localStorage.removeItem('my_darkMode');
    }, false);
})(window, document);

У першій функції ми перевіряємо, чи часом значення my_darkMode в localStorage іще не встановлене. Якщо встановлене, то відразу додається клас darkmode до елемента html в розмітці документа.

У другій функції йде перевірка, чи існує значення my_darkMode в localStorage, чи існує елемент div з id darkmode. Якщо існує, на нього вішається подія відстежування клаців. Таким чином при клацанні по даному div до елемента html додається або, за наявності, видаляється додатковий клас darkmode.

Тепер треба оголосити виклик даного скрипта у файлі functions.php:

wp_enqueue_script('color-switcher', get_template_directory_uri() . '/assets/js/darkmode.js', array('jquery'), '', true);

У місці, де потрібно вивести кнопку, додаємо простий код:

<div id="darkmode"></div>

Тепер для кожного елемента, якому треба змінити стиль при зміні режиму, додаємо перед ним клас darkmode:

body {
    --main-color: #282C34;
    --main-bg-color: #fff;
    color: var(--main-color);
    background: var(--main-bg-color);
}

.darkmode body {
    --main-color: #bebebe;
    --main-bg-color: #282C34;
}

А також задаємо оформлення кнопки для обидвох стилів:

#darkmode {
    display: inline-block;
    width: 60px;
    height: 35px;
    border-radius: 5em;
    background: var(--main-color);
}
#darkmode:before {
    content: "";
    display: block;
    width: 31px;
    height: 31px;
    position: absolute;
    border-radius: 50%;
    background: var(--main-bg-color);
    margin-top: 2px;
    margin-left: 2px;

}
#darkmode:after {
    content: "\f186";
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    position: absolute;
    font-size: 20px;
    margin-top: 3px;
    margin-left: 7px;
    color: var(--main-color);
}

.darkmode #darkmode {
    display: inline-block;
    width: 60px;
    height: 35px;
    border-radius: 35px;
    background: var(--main-color);
}
.darkmode #darkmode:before {
    content: "";
    display: block;
    position: absolute;
    width: 31px;
    height: 31px;
    border-radius: 50%;
    background: var(--main-bg-color);
    margin-top: 2px;
    margin-left: 27px;
}
.darkmode #darkmode:after {
    content: "\f185";
    font-family: "Font Awesome 5 Free";
    font-size: 20px;
    font-weight: 700;
    color: var(--main-color);
    position: absolute;
    margin-top: 3px;
    margin-left: 33px;

}

Можеш спробувати, ефект просто чудовий!