Изменение режима сайта с помощью кнопки-тумблера. Добавьте стильное оформление с помощью кода wix.
Описание функционала
В этом примере посетители сайта могут переключать цветовую схему сайта. Изменение этого параметра позволяет снизить нагрузку на глаза в темное время суток.
Пример кода
Главная
Код Сайта
Как создать аналогичный функционал
Элементы страницы
На каждую страницу нашего сайта мы добавили следующие элементы:
Переключатель: для смены режима. Убедитесь, что идентификатор переключателя один и тот же на каждой странице.
Блок-контейнер: Содержит все элементы на странице. Box.style.backgroundColor изменяется при включении темного режима.
Пользовательское меню: (Только на главной странице) Построено из нескольких кнопок с прозрачным фоном. Button.style.color (цвет текста) изменяется при включении темного режима.
Текстовые элементы: несколько текстовых элементов для заголовка, описания, нижнего колонтитула и т. д. Text.html меняет цвет при включении темного режима.
Код
1. Затем мы добавили код на вкладку сайта, чтобы он срабатывал для каждой страницы сайта: Импорт функционала для работы с локальным хранилищем. Локальное хранилище позволяет нам «запоминать» выбор режима посетителем при переходе на другую страницу и между сеансами просмотра.
2. Определите глобальные объекты для хранения элементов страницы, определенных по типу, цветовым стилям темного режима и цветовым стилям по умолчанию. Стили по умолчанию извлекаются из элементов страницы при загрузке.
3. Когда страница загрузится, сделайте следующее:
Выберите текст, поля и кнопки по типу и сохраните их стили по умолчанию.
Проверьте локальное хранилище, чтобы узнать, был ли включен темный режим в последнем сеансе браузера. Если это так, включите темный режим и включите переключатель. Если нет, включите режим по умолчанию и выключите переключатель.
Используйте обработчик события onChange для переключения из текущего режима в другой режим в любое время при переключении переключателя.
4. Функция перехода в режим по умолчанию:
Обратите внимание, что мы используем литералы шаблонов для обработки переменных и выражений в строках.
Отметьте темный режим как отключенный как в нашей глобальной переменной, так и в локальном хранилище.
Для каждого текстового элемента, поля и кнопки замените текущий стиль стилями режима по умолчанию.
5. Функция перехода в темный режим:
Отметьте темный режим как включенный как в нашей глобальной переменной, так и в локальном хранилище.
Для текстовых элементов мы используем средство очистки регулярных выражений, которое поможет нам вставить новый HTML-тег для темного цвета текста. Очиститель регулярных выражений извлекает обычный текст из тегов HTML. В свойстве Text.html мы заменяем обычный текст обычным текстом + HTML-тегом темного режима.
Для каждого поля и кнопки замените текущий стиль стилем темного режима.