WordPress — Темный режим без плагина: JS, localStorage


Добавляем ночной режим на сайт WordPress с помощью JS и localStorage

Я не люблю плагины, не потому что они плохо сделаны, а потому что мне нужно более конкретное решение, и так в большинстве случаев.

Недавно сделать себе темный режим на пару сайтов. Нарыл неплохой код у янки — делюсь.

Стили

/*dark mode*/
body {
    transition: background-color .3s;
}

body[data-light-mode=dark]  {
    background-color: #1d1c1c;
    color: #c1bdbd;
}
#day_night {
    padding: 2px;
    font-size: 1em;
    background: #8d8c8c;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: .3s;
}

#day_night:hover {
    opacity:.5;
}

body[data-light-mode="dark"] button
{
    color: #000;
}
body[data-light-mode="dark"] p,
body[data-light-mode="dark"] span,
body[data-light-mode="dark"] h3
{
    color: #c1bdbd;

}
body[data-light-mode="dark"] a {
    color: #f3eded;
}
body[data-light-mode="dark"] li.page-item a {
    background-color: #1d1c1c;
    color: #1d9995;
}
body[data-light-mode="dark"] li.active span{
    background-color: #061a24;
    color: #ffffff;
}
Кнопка
<button class="float-right" id="day_night" onclick="toggle_light_mode()">
    <img style="z-index: 999" src="/wp-content/themes/mytheme/pics/day-night.png" alt="Дневной и ночной режим" title="Дневной и ночной режим">
</button>

Картинку можно поставить любую, и измените название темы на свое. Или просто укажите путь к вашей картинке. Вместо картинки можно просто что то написать.

Скрипт

<script>
    function toggle_light_mode() {
        var app = document.getElementsByTagName("BODY")[0];
        if (localStorage.lightMode == "dark") {
            localStorage.lightMode = "light";
            app.setAttribute("data-light-mode", "light");
        } else {
            localStorage.lightMode = "dark";
            app.setAttribute("data-light-mode", "dark");
        }
    }

    var app = document.getElementsByTagName("BODY")[0];
    if (localStorage.lightMode == "dark") {
        app.setAttribute("data-light-mode", "dark");
    }
</script>

Скрипт только в header — тогда не будет задержки при перелистывании страниц. Если его в футер — то вначале загружается белая тема а потом переключается на темную. заметно глазу.

Код не мой — где то нарыл, стили и цвета поменял под себя. Так что пользуйтесь.

Рубрика: Wordpress

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *