Темный режим реализован на многих популярных сайтах и приложениях, таких как Twitter, Instagram, WhatsApp и YouTube. Но как добавить его на свой сайт?
Давайте посмотрим, как это делает пользовательский интерфейс Twitter.
Давайте создадим нечто подобное. Возможно, он не будет таким необычным, как средство смены тем в Twitter, но мы рассмотрим технические аспекты, используя альтернативные таблицы стилей и JavaScript, чтобы включить набор CSS, содержащий определение темы.
Давайте посмотрим, что мы здесь пытаемся создать.
Нажимая на эти кнопки, мы мгновенно переключаем тему CSS для всего сайта. А в оставшейся части этого руководства я покажу вам, как добавить функциональность темного режима на ваш собственный сайт или PWA.
Если вы можете понять альтернативные таблицы стилей в этом руководстве по темному режиму, вы можете воспроизвести их на своем собственном веб-сайте ... включая Wordpress или другие подобные вспомогательные инструменты. Все сводится к ванильному JavaScript и CSS. Вы даже можете создать свои собственные плагины темного режима для других сайтов!
3 типа каскадных таблиц стилей
Помимо того, как CSS включен в ваш документ (встроенный, внутренний и внешний)… есть еще 3 других способа о каскадных таблицах стилей. Они бывают постоянными, предпочтительными и альтернативными.
Постоянный - это стиль CSS, который всегда включен и сочетается с активной таблицей стилей. Чтобы указать постоянную таблицу стилей, добавьте атрибут rel = «stylesheet» к тегу link и пропустите атрибут title. Это просто обычный способ указания таблицы стилей:
<!-- Persistent Style Sheet --> <link src = "style.css" rel = "stylesheet" />
Предпочтительная таблица стилей - это стиль по умолчанию, который включается после завершения загрузки страницы. Чтобы создать его, добавьте атрибут title к тегу link CSS.
<!-- Alternate Style Sheet (just add a title) -->
<link src = "dark.css"
rel = "stylesheet"
title = "dark" />
Альтернативные таблицы стилей можно менять без перезагрузки страницы. Это то, что нам нужно, чтобы использовать динамический переключатель тем! Например, чтобы указать режимы темный и светлый в одном документе, вы можете сделать что-то вроде этого:
<!-- Dark Mode Alternate Style Sheet -->
<link src = "dark.css"
title = "dark" />
rel = "alternate stylesheet" />
<!-- Light Mode Alternate Style Sheet -->
<link src = "light.css"
title = "light"
rel = "alternate stylesheet" />
Обратите внимание, что каждая тема CSS идентифицируется по имени title. Но это только первый шаг. Теперь нам нужно написать скрипт для переключения таблиц стилей.
Динамическое переключение между таблицами стилей
Когда я проводил свое исследование, я обнаружил пару старых функций JavaScript с альтернативными таблицами стилей, плавающих в Интернете. Но они были немного устаревшими, поэтому я написал свои собственные.
Суть в том, что вам нужно установить для свойства disabled значение false для альтернативного объекта таблицы стилей, который вы хотите включить.
<!-- Switch to a named alternate stylesheet -->
function setActiveStyleSheet(title) {
/* Grab a list of all alternate style sheets */
let css = `link[rel="alternate stylesheet"]`;
let stylesheets = document.querySelectorAll(css);
/* Walk all alternate style sheets and disable them */
stylesheets.forEach(sheet => sheet.disabled = true);
/* Select style sheet we want to "turn on" */
let selector = `link[title="${title}"]`;
let stylesheet = document.querySelector(selector);
/* Enable the style sheet */
stylesheet.disabled = false;
}
Чтобы переключиться на новую таблицу стилей динамически, сначала необходимо отключить все доступные альтернативные таблицы стилей. Если вы этого не сделаете, вы обнаружите, что ваша альтернативная таблица стилей не работает. Это обязательный шаг.
После этого мы активируем тот, который указан в аргументе title.
<!-- Attach event to a button -->
let DarkModeButton = document.getElementById("DarkModeButton");
DarkModeButton.addEventListener("click",
event => setActiveStyleSheet("darkmode"));
Вы можете прикрепить функцию setActiveStyleSheet в качестве обратного вызова для события «щелчок» на кнопке, ответственной за ее включение. Обратите внимание, что в приведенном выше примере предполагается, что у нас есть таблица стилей с title = “darkmode”
Или вы можете просто использовать атрибут onclick непосредственно в элементе:
<div id = "DarkModeButton"
onclick = "setActiveStyleSheet('darkmode')"></div>
Это все, что касается динамического переключения таблиц стилей CSS. Но есть еще один момент!
Если пользователь покидает сайт после выбора альтернативной темы, мы должны убедиться, что, когда пользователь вернется, мы загрузим последнюю выбранную тему. Это можно сделать с помощью файлов cookie, но в этом руководстве я буду делать это с помощью localStorage.
Запоминание выбранной темы
Мы можем использовать localStorage для запоминания ранее выбранной темы. Код прост. Каждый раз, когда выбирается тема, мы сохраняем ее название в элементе localStorage с именем «тема». Давайте обновим функцию, которую мы уже написали на предыдущем шаге:
<!-- Switch to a named alternate stylesheet -->
function setActiveStyleSheet(title) {
/* Grab a list of all alternate style sheets */
let css = `link[rel="alternate stylesheet"]`;
let stylesheets = document.querySelectorAll(css);
/* Walk all alternate style sheets and disable them */
stylesheets.forEach(sheet => sheet.disabled = true);
/* Select style sheet we want to "turn on" */
let selector = `link[title="${title}"]`;
let stylesheet = document.querySelector(selector);
/* Enable the style sheet */
stylesheet.disabled = false;
/* NEW: Store this theme in HTML5 localStorage */
localStorage.setItem("theme", title);
}
Обратите внимание, что был добавлен новый вызов localStorage. Теперь каждый раз, когда включается альтернативная таблица стилей, она будет сохраняться под ключевым словом «тема».
Теперь, если пользователь покидает сайт и снова входит на него (после закрытия вкладки браузера), нам нужно восстановить тему по умолчанию, которая была сохранена в localStorage.
Для этого давайте прочитаем из локального хранилища событие DOMContentLoaded (вскоре после того, как DOM завершила полную загрузку) и используем значение, хранящееся в элементе темы, для выбора таблицы стилей:
<!-- Switch to a named alternate stylesheet -->
window.addEventListener('DOMContentLoaded', (event) => {
console.log('DOM fully loaded and parsed');
let title = localStorage.getItem("theme");
setActiveStylesheet(title);
})
Вот и все! Теперь у вас есть полный выбор альтернативной темы темы CSS. И если вам интересно, как это выглядит после реализации, вот небольшая анимация, которую я записал, чтобы продемонстрировать ее в действии:
Темный режим просто потрясающий. Большинство людей, которых я спрашивал, предпочитают просматривать свои любимые приложения в темном режиме. Это также может быть хорошим портфолио!
