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

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

Смотреть Пример

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

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

Открыть в Редакторе Wix >

Пример кода

Главная

// Core code is in the 'Site' Tab.

// Open the template and navigate in the code panel

// at the bottom of the editor

Код Сайта

import { local } from 'wix-storage';

const pageElements = { //Will hold all the elements in the page as arrays

textElements: [],

boxContainers: [],

buttons: []

}

let darkMode = { //Define the color scheme of the dark mode

textElementFontColor: "white",

boxContainersBackgroundColor: "#323232",

buttonsColor: "white"

}

let defaultScheme = { //Will hold the default color scheme without the need to set it manually

defaultTextElementsHtml: [],

boxContainersBackgroundColor: [],

buttonsColor: []

}

$w.onReady(function () {

saveDefaultColorScheme(); //Save default color scheme

checkDarkMode(); //Check local whether dark mode is enabled

addEventListenerToDarkmodeSwitch() //Add the onChange event to the darkmode switch

});

function saveDefaultColorScheme() {

pageElements.textElements = $w("Text");

pageElements.boxContainers = $w("Box");

pageElements.buttons = $w("Button");

pageElements.textElements.forEach(textElement => {

defaultScheme.defaultTextElementsHtml.push(textElement.html);

});

pageElements.boxContainers.forEach(boxContainer => {

defaultScheme.boxContainersBackgroundColor.push(boxContainer.style.backgroundColor);

});

pageElements.buttons.forEach(button => {

defaultScheme.buttonsColor.push(button.style.color)

});

}

function checkDarkMode() {

darkMode.enabled = JSON.parse(local.getItem('darkmodeEnabled'));

if (darkMode.enabled === true) {

switchToDarkMode();

$w("#darkModeSwitch").checked = true;

} else {

switchToDefault();

$w("#darkModeSwitch").checked = false;

}

}

function addEventListenerToDarkmodeSwitch() {

$w("#darkModeSwitch").onChange((event) => {

if (darkMode.enabled) {

switchToDefault();

} else {

switchToDarkMode();

}

})

}

function switchToDarkMode() {

darkMode.enabled = true;

local.setItem('darkmodeEnabled', true);

$w("#swithTooltip").text = "Click to disable dark mode";

const htmlTagCleanerRegex = /<[^>]*>?/gm; //Regular expression to clean the html tags from the text element.

pageElements.textElements.forEach(textElement => {

let text = textElement.html.replace(htmlTagCleanerRegex, '')

$w(`#${textElement.id}`).html = textElement.html.replace(text, `<span style=color:${darkMode.textElementFontColor}>${text}</span>`)

});

pageElements.boxContainers.forEach(boxElement => {

$w(`#${boxElement.id}`).style.backgroundColor = darkMode.boxContainersBackgroundColor

});

pageElements.buttons.forEach(buttonElement => {

$w(`#${buttonElement.id}`).style.color = darkMode.buttonsColor;

});

}

function switchToDefault() {

darkMode.enabled = false;

local.setItem('darkmodeEnabled', false);

$w("#swithTooltip").text = "Click to enable dark mode";

pageElements.textElements.forEach((textElement, index) => {

$w(`#${textElement.id}`).html = textElement.html.replace(textElement.html, defaultScheme.defaultTextElementsHtml[index])

});

pageElements.boxContainers.forEach((boxElement, index) => {

$w(`#${boxElement.id}`).style.backgroundColor = defaultScheme.boxContainersBackgroundColor[index];

});

pageElements.buttons.forEach((buttonElement, index) => {

$w(`#${buttonElement.id}`).style.color = defaultScheme.buttonsColor[index];

});

}

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

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

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

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

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

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

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

Код​

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

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

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

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

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

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

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

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

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

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

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

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

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

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