top of page
  • Julia Sememova

Меняем тему сайта со светлой на темную

Изменение режима сайта с помощью кнопки-тумблера. Добавьте стильное оформление с помощью кода wix.

изменение темы сайта на wix




Описание функционала

В этом примере посетители сайта могут переключать цветовую схему сайта. Изменение этого параметра позволяет снизить нагрузку на глаза в темное время суток.



Пример кода

Главная

Код Сайта

Как создать аналогичный функционал


Элементы страницы​

На каждую страницу нашего сайта мы добавили следующие элементы:

  • Переключатель: для смены режима. Убедитесь, что идентификатор переключателя один и тот же на каждой странице.

  • Блок-контейнер: Содержит все элементы на странице. Box.style.backgroundColor изменяется при включении темного режима.

  • Пользовательское меню: (Только на главной странице) Построено из нескольких кнопок с прозрачным фоном. Button.style.color (цвет текста) изменяется при включении темного режима.

  • Текстовые элементы: несколько текстовых элементов для заголовка, описания, нижнего колонтитула и т. д. Text.html меняет цвет при включении темного режима.

Меняем тему сайта со светлой на темную на викс

Код​

1. Затем мы добавили код на вкладку сайта, чтобы он срабатывал для каждой страницы сайта: Импорт функционала для работы с локальным хранилищем. Локальное хранилище позволяет нам «запоминать» выбор режима посетителем при переходе на другую страницу и между сеансами просмотра.

2. Определите глобальные объекты для хранения элементов страницы, определенных по типу, цветовым стилям темного режима и цветовым стилям по умолчанию. Стили по умолчанию извлекаются из элементов страницы при загрузке.

3. Когда страница загрузится, сделайте следующее:

  • Выберите текст, поля и кнопки по типу и сохраните их стили по умолчанию.

  • Проверьте локальное хранилище, чтобы узнать, был ли включен темный режим в последнем сеансе браузера. Если это так, включите темный режим и включите переключатель. Если нет, включите режим по умолчанию и выключите переключатель.

  • Используйте обработчик события onChange для переключения из текущего режима в другой режим в любое время при переключении переключателя.

4. Функция перехода в режим по умолчанию:

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

  • Отметьте темный режим как отключенный как в нашей глобальной переменной, так и в локальном хранилище.

  • Для каждого текстового элемента, поля и кнопки замените текущий стиль стилями режима по умолчанию.

5. Функция перехода в темный режим:

  • Отметьте темный режим как включенный как в нашей глобальной переменной, так и в локальном хранилище.

  • Для текстовых элементов мы используем средство очистки регулярных выражений, которое поможет нам вставить новый HTML-тег для темного цвета текста. Очиститель регулярных выражений извлекает обычный текст из тегов HTML. В свойстве Text.html мы заменяем обычный текст обычным текстом + HTML-тегом темного режима.

  • Для каждого поля и кнопки замените текущий стиль стилем темного режима.

439 views
bottom of page