Добавьте темный режим на свой сайт WordPress

Темный режим в настоящее время очень популярен. В этом блоге я объясню, как я добавил Dark Mode в свой сайт WordPress, используя CSS и JavaScript.

Мой сайт WordPress создан с помощью Ementor и The Elementor’s Hello Theme. Но вы можете добавить темный режим на любой сайт WordPress.

Проверьте мой сайт, чтобы увидеть Darkmode в действии

Первый шаг

Чтобы добавить темный режим, вы должны написать пользовательские CSS на основе этого. Это не должно быть очень сложно, вы можете использовать функцию Browser Inspect, чтобы найти классы CSS и написать версию Dark Mode в этом классе.

Например, допустим, у вас есть цвет по умолчанию для H1 Tag Черный и в темном режиме, вы хотите, чтобы он был белым. Для этого ваш CSS должен выглядеть так.

h1{
color:black;
}
.dark h1{
color:white;
}

Надеюсь, вы поймете эту идею. К вашему сведению у меня менее 30 строк CSS для темного режима на моем сайте.

Второй шаг

После того, как у вас будет CSS, готовый к темному режиму, ваш следующий шаг будет иметь кнопку в заголовке, которая меняет режим темы. Это может быть кнопка с простым текстом темным и светом, или вы можете использовать значки. Я добавил приведенный ниже код в виджете HTML с Id из toggle_theme_button Анкет

Если вы заметили, что я ничего не добавил в раздел класса, и если вы сейчас опубликуете свой сайт, вы ничего не увидите. Мы добавим классы динамически на основе выбранного режима темы.

Теперь давайте обсудим несколько проблем, которые у нас есть перед нами и как их решить.

Проблемы

Теперь часть HTML и CSS сделана для некоторого JavaScript.

Добавьте .dark или .светлый класс в тело, когда нажимает на кнопке Toggle.
Добавьте разные классы в кнопку переключения, чтобы значки менялись на основе текущей темы.
Установите начальную тему, как только страница отображается.
Храните отобранную пользователем тему в LocalStorage, чтобы она оставалась прежней при изменении страницы.

Мы пройдемся через вышеупомянутый список снизу. Если мы перейдем к вершине, этот блог станет дольше, и мы должны рефактировать коды, как только мы столкнемся с разными проблемами.

Третий шаг

Давайте установим начальную тему, как только страница отобразится.

//set default theme on load
window.addEventListener("DOMContentLoaded", (event) => {
var theme = localStorage.getItem("theme");
  if (!theme) {
    localStorage.setItem("theme", "light");
  }
  setInitialThemeClass(theme);
console.log("Setting initial theme to - ",theme)
});

Как вы можете видеть в приведенном выше коде, я добавил Domcontentload Слушатель событий, чтобы проверить, есть ли у пользователя какие -либо предварительные предпочтения темы в L ocalstorage , если нет, мы назначаем дефолт светлый тема. После этого мы передаем выборную тему в функцию, называемую setInitialTheme (тема) Анкет Далее мы рассмотрим эту функцию.

Примечание – если вам любопытно, почему я использовал Domcontentload вместо нагрузка Слушатель событий. Я использовал нагрузка Слушатель событий сначала, и это работает, но проблема была нагрузкой, когда все загружено, что занимает некоторое время Так что, если вы измените страницу, вы заметите, что какая -то мерцание цвета. Domcontentload Пожары, как только загружается первоначальный документ HTML, поэтому я выбираю это.

Четвертый шаг

setInitialTheme (тема) Функция принимает текущую тему и добавляет этот класс в тело, либо свет, либо темный. И условие IF проверяет текущую тему и добавляет значок кнопки переключения на основе этого.

//Add initial theme class
var toggle_theme = document.getElementById("toggle_theme_button");
function setInitialTheme(theme) {
  document.body.classList.add(theme);
  if (theme === "dark") {
    toggle_theme.classList.add("icon-sun");
  } else {
    toggle_theme.classList.add("icon-moon");
  }
}

Пятый шаг

У нас есть начальная настройка темы, теперь мы должны работать над кнопкой Toggle Theme.

//Toggle theme button
toggle_theme.addEventListener("click", function () {
var theme = localStorage.getItem("theme");
  changeTheme(theme);
});

В приведенном выше коде мы добавляем Нажмите Слушатель событий на кнопку переключения и получение текущей темы от LocalStorage и передавая его Changetheme (тема) функция

Заключительный этап

Это последний шаг после этого у вас будет работающий темный режим на вашем сайте.

//Change the current theme
function changeTheme(theme) {
  if (theme === "light") {
    localStorage.setItem("theme", "dark");
    document.body.classList.add("dark");
    document.body.classList.remove("light");
    toggle_theme.classList.add("icon-sun");
    toggle_theme.classList.remove("icon-moon");
  } else {
    localStorage.setItem("theme", "light");
    document.body.classList.add("light");
    document.body.classList.remove("dark");
    toggle_theme.classList.add("icon-moon");
    toggle_theme.classList.remove("icon-sun");
  }
}

В этой функции мы принимаем текущую тему, и если текущая тема – светлый Мы меняемся LocalStorage тема в темный , добавление темный класс в тело и удаление свет Класс и для кнопки переключения, мы добавляем икона-сун класс и удаление икона-Мун класс и напротив в остальном разделе.

Конгресс 🙌 Теперь у вас есть работающая темная тема на вашем сайте WordPress.

Примечание- я начал писать блог несколько дней назад на Мой сайт И это мой первый пост на Dev, поэтому, если я что -то пропустил или у вас есть вопросы, пожалуйста, дайте мне знать в комментариях.

Оригинал: “https://dev.to/dipankarmaikap/add-dark-mode-to-your-wordpress-site-5a8c”