Want to know how you can set up your Wix website to toggle light mode or dark mode to add a little pop to your site?? Then stay tuned for in-depth knowledge about this trick and the code behind it below.

Here is the helpful code to get you going! Let me know if you need any more assistance in the comments on YouTube or contact me at the bottom today!

📚 WHAT WAS COVERED:

00:00 CN Intro

00:25 Set up website for toggle feature

02:24 Turn on Developer Mode & view masterPage.js

03:30 Create Objects to collect information

07:30 Wix onReady Function

08:53 saveDefaultColorScheme Function

17:41 checkDarkMode Function

21:10 addEventListenerToDarkmodeSwitch Function (onChange Event)

21:50 switchToDarkOrLightMode Function

25:05 Preview Toggle Feature

25:17 Developer Console Information (How the data flows)

29:30 Outro

Check out the style guide to add other types and change their background colors or the color itself to add to the toggle feature. Just copy the same format and add in the specific types that are included in the elements that you can style programmatically here.

Code Snippet to follow along with the video:

Page Code

This loads the page code

import { local } from 'wix-storage';

const pageItems = { //Will hold all the elements in the page as arrays
 siteWideText: [],
 siteWideBoxes: [],
 siteWideButtons: [],
 siteWideHF: []
}
//You can use any of the following within the quotes (i.e. ""
let darkLightMode = { //Define the color scheme of the dark or light mode
 siteWideTextFontColor: "black",
 siteWideBoxBGColor: "white",
 siteWideButtonColor: "black",
 siteWideHFColor: "white"
}

let defaultScheme = { //Will hold the default color scheme without the need to set it manually
 defaultTextElementsHtml: [],
 siteWideBoxBGColor: [],
 siteWideButtonColor: [],
 siteWideHFColor: []
}

$w.onReady(function () {
 saveDefaultColorScheme(); //Save default color scheme
 checkDarkMode(); //Check local whether dark or light mode is enabled
 addEventListenerToDarkmodeSwitch(); //Add the onChange event to the darkmode switch
 console.log(defaultScheme, darkLightMode, pageItems);
});

Add the functions that will change to the dark or light mode of your choosing. Then you can update the colors of your choosing and also add more types that you can grab to change the style.

This function grabs all of the information that returns an array of all of the elements of that type (i.e. the type of Element)

function saveDefaultColorScheme() {
 pageItems.siteWideText = $w("Text"); //["$w("#text123")"] [1,2,3]
 pageItems.siteWideBoxes = $w("Box");
 pageItems.siteWideButtons = $w("Button");
 pageItems.siteWideHF = $w("Header, Footer");

 pageItems.siteWideText.forEach(textElement => {
 //console.log(textElement.type);
 defaultScheme.defaultTextElementsHtml.push(textElement.html);
 });
 pageItems.siteWideBoxes.forEach(boxContainer => {
 defaultScheme.siteWideBoxBGColor.push((boxContainer.style.backgroundColor.toString().match(/color_/g)) ? "#1F232C" : (boxContainer.style.backgroundColor || "#1F232C"));
 });
 pageItems.siteWideButtons.forEach(button => {
 defaultScheme.siteWideButtonColor.push((button.style.backgroundColor.toString().match(/color_/g)) ? "#FFFFFF" : (button.style.backgroundColor || "#FFFFFF"))
 });
 pageItems.siteWideHF.forEach(hf => { 
 defaultScheme.siteWideHFColor.push((hf.style.backgroundColor.toString().match(/color_/g)) ? "#1F232C" : (hf.style.backgroundColor || "#1F232C"))
 });
}

This function grabs the locally stored item that will change the look and style of the website when loaded on the client-side.

function checkDarkMode() {
 //console.log(local.getItem('darkModeEnabled'), JSON.parse(local.getItem('darkModeEnabled')))
 darkLightMode.enabled = JSON.parse(local.getItem('darkModeEnabled'));
 if (darkLightMode.enabled === true) {
 switchToDarkOrLightMode();
 $w("#darkModeSwitch1").checked = true;
 } else {
 switchToDefault();
 $w("#darkModeSwitch1").checked = false;
 }
}

This function sets up the on-change event for the switch button.

function addEventListenerToDarkmodeSwitch() {
 $w("#darkModeSwitch1").onChange((event) => {
 if (darkLightMode.enabled) {
 switchToDefault();
 } else {
 switchToDarkOrLightMode();
 }
 })
}

This function switches all of the elements on your website that you have in your object (pageItems). If you need any assistance with understanding this information click contact on the top right of this website.

function switchToDarkOrLightMode() {
 darkLightMode.enabled = true;
 local.setItem('darkModeEnabled', true);
 const htmlTagCleanerRegex = /<[^>]*>?/gm; //Regular expression to clean the html tags from the text element.
 pageItems.siteWideText.forEach(textElement => {
 let text = textElement.html.replace(htmlTagCleanerRegex, '')
 $w(`#${textElement.id}`).html = textElement.html.replace(text, `<span style=color:${darkLightMode.siteWideTextFontColor}>${text}</span>`)
 });
 pageItems.siteWideBoxes.forEach(boxElement => {
 $w(`#${boxElement.id}`).style.backgroundColor = darkLightMode.siteWideBoxBGColor
 });
 pageItems.siteWideButtons.forEach(buttonElement => {
 $w(`#${buttonElement.id}`).style.color = darkLightMode.siteWideButtonColor;
 });
 pageItems.siteWideHF.forEach(hfElement => {
 //console.log(hfElement.id);
 $w(`#${hfElement.id}`).style.backgroundColor = darkLightMode.siteWideHFColor;
 //console.log($w(`#${hfElement.id}`).style.backgroundColor);
 });
}

This function reverts all items that were changed back to it's default setting. So all of your text that was made previous to the change will go back to the way you had it before.

function switchToDefault() {
 darkLightMode.enabled = false;
 local.setItem('darkModeEnabled', false);
 pageItems.siteWideText.forEach((textElement, index) => {
 $w(`#${textElement.id}`).html = textElement.html.replace(textElement.html, defaultScheme.defaultTextElementsHtml[index])
 });
 pageItems.siteWideBoxes.forEach((boxElement, index) => {
 $w(`#${boxElement.id}`).style.backgroundColor = defaultScheme.siteWideBoxBGColor[index];
 });
 pageItems.siteWideButtons.forEach((buttonElement, index) => {
 $w(`#${buttonElement.id}`).style.color = defaultScheme.siteWideButtonColor[index];
 });
 pageItems.siteWideHF.forEach((hfElement, index) => {
 $w(`#${hfElement.id}`).style.backgroundColor = defaultScheme.siteWideHFColor[index];
 });
}

🖱️ SUBSCRIBE ►http://bit.ly/2NRVy6o

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

📺 MY PLAYLISTS :

Wix Tutorials for Beginners: http://bit.ly/3aA8mb3

Wix Tutorials 2021: http://bit.ly/2Rpa8V8

Wix Tips: https://bit.ly/2Qudip1

More here: https://bit.ly/3lAeEx4

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

💻 WEBSITE

Check out more of the website. If you have a question, let's chat it up below! More information coming soon so stay tuned!