Как переключаться между темным и светлым режимами в Drupal 8 (или 9) в зависимости от предпочтений пользователя

Насколько здорово было бы дать вашим пользователям возможность настраивать свой интерфейс в соответствии с их предпочтениями? Хотя многие пользователи предпочитают светлый интерфейс (светлый фон с темным текстом), некоторые пользователи выбирают темный интерфейс (темный фон со светлым текстом). Более темные интерфейсы воспринимаются как крутые и модные, а некоторые также считают, что это снижает нагрузку на глаза, особенно для разработчиков, которые проводят много времени перед экраном. Я считаю, что предоставление возможности вашим пользователям - это огромная победа с точки зрения доступности и удобства для пользователей. Есть несколько способов добиться этого. В этой статье мы обсудим, как переключаться между темным и светлым режимами веб-дизайна и реализовывать это в Drupal 8 или Drupal 9.

Мы сосредоточимся на двух методах реализации этого:
1. Использование только CSS.
2. Реализация переключателя CSS и JS.

Использование только CSS

Чтобы перейти в темный режим на любом веб-сайте с использованием только CSS, необходимо иметь в виду некоторые системные требования. Одним из таких важных требований является общесистемный темный режим . Если пользователь предпочитает использовать темный режим на своем ПК, тогда ему предоставляется веб-сайт, на котором отображается темный фон со светлым текстом на нем. Prefers-color-scheme (медиа-запрос) используется для определения того, запросил ли пользователь систему использовать светлую или темную цветовую тему.

Выполнение:

1. Объявите переменные CSS.
2. Используйте переменные везде, где это необходимо.

Результат:

Примечание. Чтобы эмулировать результат на некоторых неподдерживаемых устройствах, просто войдите в DevTool, нажав F12. Затем нажмите CTRL + SHIFT + P, затем найдите prefers-color-scheme: dark и нажмите ввод.

Реализация переключателя CSS и JS

Если мы будем придерживаться этого подхода, то нам не нужно беспокоиться о системных требованиях. Просто напишите пару строк CSS и JS, и все будет готово. После того, как мы инициализировали переменные, мы можем ссылаться на эти переменные в наших таблицах стилей. Это будет структура HTML для переключения между темным и светлым режимами.

И несколько строк CSS должны привести к этому переключению.

Последняя часть - добавить немного JavaScript, чтобы связать все вместе.
● Сохраните предпочтения пользователя для будущих посещений.
● Проверьте сохраненные пользовательские настройки, если таковые имеются, при загрузке веб-сайта.

Вот и все! Ознакомьтесь с полной демонстрацией ниже.

Или щелкните здесь, чтобы просмотреть демонстрацию.

Реализация переключателя Dark / Light в Drupal 8 (или Drupal 9)

Чтобы начать создание собственной темы Drupal 8, прочтите эту замечательную статью. Давайте теперь приступим к созданию темы, чтобы показать, как использовать темную тему / светлую тему в Drupal 8 или Drupal 9.

Файловая структура будет выглядеть так:

Теперь обновите раздел заголовка внутри page.html.twig следующим кодом.

 <header aria-label="Site header" role="banner"> <div class="container"> <div class="header"> {{ page.branding }} {{ page.navigation }} <div class="switch-wrapper"> <label class="switch" for="checkbox"> <input type="checkbox"/> <div class="slider round"></div> </label> </div> </div> </div> </header>

Остальная часть структуры HTML будет зависеть от вашего дизайна или требований.
Когда вы закончите со структурой HTML, пришло время сделать их красивыми, стилизовав элементы в CSS.
Во-первых, вы должны создать все переменные по умолчанию, которые будут отвечать за цвета в светлом / темном режиме.

 style.css :root { --color-background: #f0f0f0; --color-header: rgb(14, 33, 141); --color-header-text: #aecafa; --color-text: #2c0000; --color-card-bg: #fff; --color-link: rgb(255, 0, 0); } /* Variable decleration for dark mode */ [data-theme="dark"] { --color-background: #1a1a1a; --color-header: #aecafa; --color-header-text: 0e218d; --color-text: #d3d3d3; --color-card-bg: #435561; --color-link: #24ce24; }

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

 style.css .header { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; background-color: var(--color-header); } .header a { color: var(--color-header-text); text-decoration: none; font-weight: bold; } .region-navigation { display: flex; justify-content: center; } ul.menu { display: flex; justify-content: center; } ul.menu li { margin-right: 30px; } .switch-wrapper { display: flex; align-items: center; } .switch { display: inline-block; height: 34px; position: relative; width: 60px; } .switch input { display: none; } .slider { background-color: white; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; } .slider:before { background-color: rgb(255, 196, 0); bottom: 4px; content: url("../assets/sunny-day.svg"); height: 26px; left: 4px; position: absolute; transition: 0.4s; width: 26px; } input:checked + .slider { background-color: rgb(36, 36, 36); } input:checked + .slider:before { transform: translateX(26px); content: url("../assets/night.svg"); background-color: rgb(59, 116, 223); } .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; }
style.css .header { display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; background-color: var(--color-header); } .header a { color: var(--color-header-text); text-decoration: none; font-weight: bold; } .region-navigation { display: flex; justify-content: center; } ul.menu { display: flex; justify-content: center; } ul.menu li { margin-right: 30px; } .switch-wrapper { display: flex; align-items: center; } .switch { display: inline-block; height: 34px; position: relative; width: 60px; } .switch input { display: none; } .slider { background-color: white; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; } .slider:before { background-color: rgb(255, 196, 0); bottom: 4px; content: url("../assets/sunny-day.svg"); height: 26px; left: 4px; position: absolute; transition: 0.4s; width: 26px; } input:checked + .slider { background-color: rgb(36, 36, 36); } input:checked + .slider:before { transform: translateX(26px); content: url("../assets/night.svg"); background-color: rgb(59, 116, 223); } .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; }

Обратите внимание, что стиль может отличаться в зависимости от ваших требований. После всех стилей настало время написать некоторые функции в коде JQuery. Код JQuery будет выглядеть примерно так (в нашем случае script.js)

 script.js (($, Drupal) => { Drupal.behaviors.mainMenu = { attach(context) { const toggleSwitch = document.querySelector( '.switch input[type="checkbox"]' ); const currentTheme = localStorage.getItem("theme"); if (currentTheme) { document.documentElement.setAttribute("data-theme", currentTheme); if (currentTheme === "dark") { toggleSwitch.checked = true; } } function switchTheme(e) { if (e.target.checked) { document.documentElement.setAttribute("data-theme", "dark"); localStorage.setItem("theme", "dark"); } else { document.documentElement.setAttribute("data-theme", "light"); localStorage.setItem("theme", "light"); } } toggleSwitch.addEventListener("change", switchTheme, false); }, }; })(jQuery, Drupal);
script.js (($, Drupal) => { Drupal.behaviors.mainMenu = { attach(context) { const toggleSwitch = document.querySelector( '.switch input[type="checkbox"]' ); const currentTheme = localStorage.getItem("theme"); if (currentTheme) { document.documentElement.setAttribute("data-theme", currentTheme); if (currentTheme === "dark") { toggleSwitch.checked = true; } } function switchTheme(e) { if (e.target.checked) { document.documentElement.setAttribute("data-theme", "dark"); localStorage.setItem("theme", "dark"); } else { document.documentElement.setAttribute("data-theme", "light"); localStorage.setItem("theme", "light"); } } toggleSwitch.addEventListener("change", switchTheme, false); }, }; })(jQuery, Drupal);

И не забудьте включить файлы JS и CSS в файл theme_name.libraries.yml.

 global-styling: version: 1.x css: theme: css/style.css: {} js: js/script.js: {} dependencies: - core/jquery - core/drupal
global-styling: version: 1.x css: theme: css/style.css: {} js: js/script.js: {} dependencies: - core/jquery - core/drupal

Теперь очистите кеш сайта, чтобы увидеть результат. Ваш конечный результат должен выглядеть так: