You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
51 lines
1.8 KiB
JavaScript
51 lines
1.8 KiB
JavaScript
// I really don't like this code but it's ok for now...
|
|
|
|
let main = true;
|
|
|
|
// Set a reference in the localStorage with the main color
|
|
window.addEventListener("load", () => {
|
|
color = getCookie("color");
|
|
|
|
if (color == "purple" || color == "") {
|
|
document.documentElement.style.setProperty("--color", "var(--purple)");
|
|
document.documentElement.style.setProperty("--background", "var(--purple-bg)");
|
|
document.documentElement.style.setProperty("--alt", "var(--orange)");
|
|
document.documentElement.style.setProperty("--alt-bg", "var(--orange-bg)");
|
|
setCookie("color", "purple", 7);
|
|
main = true;
|
|
} else {
|
|
document.documentElement.style.setProperty("--color", "var(--orange)");
|
|
document.documentElement.style.setProperty("--background", "var(--orange-bg)");
|
|
document.documentElement.style.setProperty("--alt", "var(--purple)");
|
|
document.documentElement.style.setProperty("--alt-bg", "var(--purple-bg)");
|
|
setCookie("color", "orange", 7);
|
|
main = false;
|
|
}
|
|
});
|
|
|
|
// Toggle color button
|
|
const colorButton = document.getElementById("color");
|
|
colorButton.addEventListener("click", () => {
|
|
toggleColor();
|
|
});
|
|
|
|
function toggleColor() {
|
|
var style = getComputedStyle(document.body);
|
|
|
|
// get the current palette
|
|
currentColor = style.getPropertyValue("--color");
|
|
currentBg = style.getPropertyValue("--background");
|
|
altColor = style.getPropertyValue("--alt");
|
|
altBg = style.getPropertyValue("--alt-bg");
|
|
|
|
// and swap the order
|
|
document.documentElement.style.setProperty("--color", altColor);
|
|
document.documentElement.style.setProperty("--background", altBg);
|
|
document.documentElement.style.setProperty("--alt", currentColor);
|
|
document.documentElement.style.setProperty("--alt-bg", currentBg);
|
|
|
|
// set a reference in a cookie to share it with the generator page
|
|
main = !main;
|
|
setCookie("color", main ? "purple" : "orange", 7);
|
|
}
|