Hi,
I follow the steps according to Wix dark mode example but when I'm switching the dark mode only headings in page & repeater will change from black to white but no change in background page color. Below is the error I'm getting.
Before you look at this code my website has a dynamic page remember.
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]; }); }
Is there a tutorial/video on how to do it? Or can anybody guide me through it?? Please help have been trying for long time but not able to
I updated the code so every page & its element on my site will change to dark mode but its not changing the color from white to dark mode.
Because my site has repeaters & dynamic page it's not working is that so?
Here I'm attaching the new code & it's one error.
import { local } from 'wix-storage'; const pageElements = { //Will hold all the elements in the page as arrays textElements: [], boxContainers: [], buttons: [], repeater: [] } let darkMode = { //Define the color scheme of the dark mode textElementFontColor: "white", boxContainersBackgroundColor: "#323232", buttonsColor: "white", repeaterColor: "white" } let defaultScheme = { //Will hold the default color scheme without the need to set it manually defaultTextElementsHtml: [], boxContainersBackgroundColor: [], buttonsColor: [], repeaterColor: [] } $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.repeater = $w("Repeater"); 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.repeater.forEach(repeater => { defaultScheme.repeaterColor.push(repeater.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.repeater.forEach(repeaterElement => { $w(`#${repeaterElement.id}`).style.color = darkMode.repeaterColor; }); } 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.repeater.forEach((repeaterElement, index) =>{ $w(`#${repeaterElement.id}`).style.color = defaultScheme.repeaterColor[index]; }); }
Yes read the error message, it is about the colour used that is not valid.
Follow the weblink that the error provides and you will see a link to the 140 redefined colors that are approved for use on the web for the text and buttons as in 'white' etc.
https://www.wix.com/corvid/reference/$w.Style.html#color
https://www.w3schools.com/colors/colors_names.asp
Also, as for the background container colour itself, #323232 is a very dark gray which is nearly black .
https://www.colorhexa.com/323232
However the nearest actual WEB SAFE colour is #333333
https://www.colorhexa.com/333333
You also don't need to bother with the #FF in front of the hexidecimal rgb color value either, even though it shows that in the Wix API Reference link.
If you do actually put the colour value as #FF...... then all it does is make the background completely black when you flip the switch regardless of whatever colour you used for teh background.
I have opened up the tutorial myself and tried it using many other different hexidecimal rgb color values and it all works fine.
Also, have a read of the post about the original tutorial as well.
https://www.wix.com/corvid/forum/corvid-tips-and-updates/example-dark-mode-switch