[Fix Please] How to create dark mode?

thbewise · October 4, 2019, 11:44am

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.
#darkmode #repeater #dynamic

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 addEventListenerToDarkmodeSwitch() {
$w(“#darkModeSwitch”).onChange((event) => {
if (darkMode.enabled) {
switchToDefault();
} else {
switchToDarkMode();
}
})
}

givemeawhisky · October 4, 2019, 1:23pm

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

thbewise · October 5, 2019, 5:53am

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];

    });
}

wsanaysw · July 6, 2020, 11:15am

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

Topic		Replies	Views
Adding Dark Mode to Your Wix Studio Site: Full Code, Setup Guide and Explanation Show and tell wix-studio , code , wix-stores , design	1	317	September 7, 2024
How can I change the color of font in dark mode? Ask the community code , question	2	121	June 8, 2022
Example: Dark Mode Switch Show and tell code , tips	18	21489	October 4, 2019
Dark mode in Wix Blog Ask the community code , wix-blog , question	1	164	August 22, 2022
Dark mode switch not staying on? Ask the community code , question	3	232	March 3, 2023

[Fix Please] How to create dark mode?

Related topics