Hey! Qué tal? Soy Diana, y en este video, aprenderás como agregar 'Dark Mode' o modo oscuro (puede ser cualquier color que desees) en Wix, usando código Velo. No olvides subscribirte y comentar alguna pregunta!
import { local } from 'wix-storage'; const pageElements = { //Will hold all the elements in the page as arrays textElements: [], boxContainers: [], buttons: [], headers:[], footers: [], } let darkMode = { //Define the color scheme of the dark mode textElementFontColor: "white", boxContainersBackgroundColor: "#211C1C", buttonsColor: "white", headerBackgroundColor: "#211C1C", footerBackgroundColor: "#211C1C" } let defaultScheme = { //Will hold the default color scheme without the need to set it manually defaultTextElementsHtml: [], boxContainersBackgroundColor: [], buttonsColor: [], headerBackgroundColor: [], footerBackgroundColor: [] } $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.headers = $w("Header"); pageElements.footers = $w("Footer"); 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) }); pageElements.headers.forEach(header => { defaultScheme.headerBackgroundColor.push(header.style.backgroundColor) }); pageElements.footers.forEach(footer => { console.log(footer); defaultScheme.footerBackgroundColor.push(footer.style.backgroundColor) }); } 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; }); pageElements.headers.forEach(headerElement => { $w(`#${headerElement.id}`).style.backgroundColor = darkMode.headerBackgroundColor; }); pageElements.footers.forEach(footerElement => { $w(`#${footerElement.id}`).style.backgroundColor = darkMode.footerBackgroundColor; }); } 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]; }); pageElements.headers.forEach((headerElement, index) => { $w(`#${headerElement.id}`).style.backgroundColor = defaultScheme.headerBackgroundColor[index]; }); pageElements.footers.forEach((footerElement, index) => { $w(`#${footerElement.id}`).style.backgroundColor = defaultScheme.footerBackgroundColor[index]; }); }
Gracias por ver el vídeo!