Hey guys,
I’m very new to html on wix and I encountered this one issue when trying to create dark mode on my website. I got it working last night but when I launched it today it showed me a typeerror. Below attached it the error message and my code, can someone enlighten me what is going on here and how do i fix it? Thanks!
I got this code off a tutorial about making dark mode on corvid.
import { local } from ‘wix-storage’;
const pageElements = {
textElements: ,
boxContainers: ,
buttons: ,
repeater:
}
let darkMode = {
textElementFontColor: “white”,
boxContainersBackgroundColor: “#333333”,
buttonsColor: “white”,
repeaterColor: “white”
}
let defaultScheme = {
defaultTextElementsHtml: ,
boxContainersBackgroundColor: ,
buttonsColor: ,
repeaterColor:
}
$w.onReady( function () {
saveDefaultColorScheme();
checkDarkMode();
addEventListenerToDarkmodeSwitch()
});
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(“#switch1”).checked = true ;
} else {
switchToDefault();
$w(“#switch1”).checked = false ;
}
}
function addEventListenerToDarkmodeSwitch() {
$w(“#switch1”).onChange((event) => {
if (darkMode.enabled) {
switchToDefault();
} else {
switchToDarkMode();
}
})
}
function switchToDarkMode() {
darkMode.enabled = true ;
local.setItem(‘darkmodeEnabled’, true );
$w(“#text10”).text = “Click to disable dark mode”;
const htmlTagCleanerRegex = /<[^>]*>?/gm;
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(“#text10”).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];
});
}
