Improved Dark Mode

In this tutorial:

• We show you how to make a dark mode that works on multiple pages.

• We show you how to use Wix Storage.

• We show you how to use a third party API.

Required Elements:

1x text element

1x switch

The Code:

import { local } from 'wix-storage';
$w.onReady(function () {
if(!local.getItem("DME")) {
$w('#darkModeSwitch').checked = false;
$w('Document').background.src = "https://dummyimage.com/1/ffffff";
} else {
$w('#darkModeSwitch').checked = true;
$w('Document').background.src = "https://dummyimage.com/1/000000";
}
});
export function darkModeSwitch_change(event) {
if ($w('#darkModeSwitch').checked) {
$w('Document').background.src = "https://dummyimage.com/1/000000";
$w('#darkModeState').text = "Dark Mode On";
setCookie();
} else {
$w('Document').background.src = "https://dummyimage.com/1/ffffff";
$w('#darkModeState').text = "Dark Mode Off";
removeCookie();
}
}
function setCookie(localStore) {
local.setItem("DME", "yes");
}
function removeCookie(localStore) {
local.removeItem("DME");
}

Instructions:

Add the elements above to your header (or footer).

Using the properties panel, name the switch "darkModeSwitch" and then name the textbox "darkModeState".

Add the above code to the site tab of the code editor.

Editable Features:

Background Colour. -You can have different background colours by changing the URL.

e.g. in the example https://dummyimage.com/1/ffffff is a white, but you could use something like https://dummyimage.com/1/e8e8e8 as well, which is a grey.

You can change the dark mode is on text by changing "Dark Mode On" to something like "Dark Mode Enabled".