Dark Mode

A lot of people have trouble implementing Wix's own dark mode tutorial on their own sites.  So I made this simplified tutorial.

Step 1. Enable Corvid

Step 2. Add a switch from the user inputs section of the add panel to the header of your site

Step 3. Add a text box to the header of your site -write "Dark Mode Off" in it for the default

Step 4. Rename the switch to "darkModeSwitch" in the properties panel

Step 5. Rename the text to "darkModeState" in the properties panel

Step 6. Assign the switch an on change handler in the properties panel

Step 7. Press Ctrl + A and delete all the code in the site panel

Step 8. Copy and paste the below code

Step 9. You're done!

$w.onReady(function () {
$w('#darkModeSwitch').onChange(function () {
if ($w('#darkModeSwitch').checked) { 
$w('Document').background.src = "https://dummyimage.com/1/000000" $w('#darkModeState').text = "Dark Mode On"
} else { 
$w('Document').background.src = "https://dummyimage.com/1/555555" $w('#darkModeState').text = "Dark Mode Off" }
});
});

Troubleshooting:

If the switch doesn't change the background colour, check these:

The switch has the same onclick handler in the properties panel that is in the code.

That you've copied the code exactly.

Other Problems:

Leave them in the comments below and we'll get back to you.