top of page
Forum Posts
Tan Pui Yan
Jan 13, 2020
In Coding with Velo
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];
});
}
0
1
121
Tan Pui Yan
More actions
bottom of page