# \[Fix Please\] How to create dark mode?

**URL:** <https://forum.wixstudio.com/t/fix-please-how-to-create-dark-mode/42592>\
**Category:** Ask the community\
**Tags:** code, question\
**Created:** [October 4, 2019, 11:44am UTC](https://forum.wixstudio.com/t/fix-please-how-to-create-dark-mode/42592 "2019-10-04T11:44:30Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![thbewise](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/thbewise/32/14298_2.png) [@thbewise](https://forum.wixstudio.com/u/thbewise)\
**Post date:** [October 4, 2019, 11:44am UTC](https://forum.wixstudio.com/t/fix-please-how-to-create-dark-mode/42592/1 "2019-10-04T11:44:30Z")

</div>

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

* * *

 ![](https://us1.discourse-cdn.com/wix/original/3X/b/9/b999f05f31ea4f8578134343e4a2dee117b9edf4.png)

 ![](https://us1.discourse-cdn.com/wix/original/3X/e/7/e7542ce2167517ae91c77c6b35bbd5648c80ea5f.png)

---

<div class="post-metadata">

**Author:** ![givemeawhisky](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/givemeawhisky/32/5383_2.png) [@givemeawhisky](https://forum.wixstudio.com/u/givemeawhisky)\
**Post date:** [October 4, 2019, 1:23pm UTC](https://forum.wixstudio.com/t/fix-please-how-to-create-dark-mode/42592/2 "2019-10-04T13:23:14Z")

</div>

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.wix.com/corvid/reference/$w.Style.html#color)  
[https://www.w3schools.com/colors/colors\_names.asp](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](https://www.colorhexa.com/323232)

However the nearest actual **WEB SAFE** colour is #333333  
[https://www.colorhexa.com/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](https://www.wix.com/corvid/forum/corvid-tips-and-updates/example-dark-mode-switch)

---

<div class="post-metadata">

**Author:** ![thbewise](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/thbewise/32/14298_2.png) [@thbewise](https://forum.wixstudio.com/u/thbewise)\
**Post date:** [October 5, 2019, 5:53am UTC](https://forum.wixstudio.com/t/fix-please-how-to-create-dark-mode/42592/3 "2019-10-05T05:53:32Z")

</div>

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.

 ![](https://us1.discourse-cdn.com/wix/original/3X/9/8/980d9e7830a33fc85356a2172c99eafe388736ad.jpeg)

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

    });
}

```

---

<div class="post-metadata">

**Author:** ![wsanaysw](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/wsanaysw/32/21631_2.png) [@wsanaysw](https://forum.wixstudio.com/u/wsanaysw)\
**Post date:** [July 6, 2020, 11:15am UTC](https://forum.wixstudio.com/t/fix-please-how-to-create-dark-mode/42592/4 "2020-07-06T11:15:31Z")

</div>

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