haldis/app/static/js/darkmode.js

117 lines
4.4 KiB
JavaScript
Raw Normal View History

2019-10-24 13:50:51 +02:00
{
const init = () => {
2019-11-16 14:54:45 +01:00
const $darkmode = document.querySelector(".enter_darkmode");
if($darkmode) $darkmode.addEventListener("click", ()=>toggleBetween("lightmode", "darkmode"));
const $customThemes = document.querySelector(".custom__themes");
if($customThemes) $customThemes.addEventListener("click", ()=>toggleBetween("darkmode", "sinterklaas")); //TODO: Create automatic custom team selector
2019-10-24 13:50:51 +02:00
2019-11-16 14:54:45 +01:00
reloadTheme();
2019-10-24 13:50:51 +02:00
}
2019-10-30 23:40:36 +01:00
2019-11-16 14:54:45 +01:00
const toggleBetween = (first, second) => {
if(localStorage.getItem("theme") == second){
localStorage.setItem("theme", first)
}else{
localStorage.setItem("theme", second)
2019-10-24 13:50:51 +02:00
}
2019-11-16 14:54:45 +01:00
reloadTheme();
2019-10-24 13:50:51 +02:00
}
2019-10-30 23:40:36 +01:00
2019-11-16 14:54:45 +01:00
const reloadTheme = () => {
if (typeof(Storage) !== "undefined") {
if(localStorage.getItem("theme") !== null){
setTheme();
}else if((window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)){
document.querySelector('body').classList.remove('lightmode');
document.querySelector('body').classList.add('darkmode');
}
} else {
console.log('You browser does not support local storage, no darkmode for you!' )
}
2019-10-30 23:40:36 +01:00
}
2019-11-16 14:54:45 +01:00
const setTheme = () =>{
document.querySelector('body').classList.add('darkmode');
switch(localStorage.getItem("theme")){
2019-10-30 23:40:36 +01:00
case "halloween":
setThemeHalloween();
2019-11-16 14:54:45 +01:00
break;
case "sinterklaas":
setThemeSinterklaas();
break;
case "darkmode":
setThemeDarkMode();
break;
case "lightmode":
default:
setThemeLightMode();
break;
2019-10-30 23:40:36 +01:00
}
}
2019-11-16 14:54:45 +01:00
//TODO: Use an external file to load themes
//TODO: Darkness and blur variables
const setThemeLightMode = () => {
let root = document.documentElement;
root.style.setProperty('--dGray6', "#ffffff"); //Dark color
root.style.setProperty('--dGray5', "#ffffff");
root.style.setProperty('--dGray4', "#f9f9f9");
root.style.setProperty('--dGray3', "#ffffff");
root.style.setProperty('--dGray2', "#212121");
root.style.setProperty('--dGray1', "#666666");
root.style.setProperty('--dGray0', "#444444"); //Light color
root.style.setProperty('--dBlue', "#0A84FF");
root.style.setProperty('--FontFamily', '"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif');
2019-11-19 18:32:48 +01:00
root.style.setProperty('--FontSize', '13px');
2019-11-16 14:54:45 +01:00
document.querySelector('.background').style.backgroundImage = 'none';
}
2019-10-30 23:40:36 +01:00
const setThemeDarkMode = () => {
let root = document.documentElement;
root.style.setProperty('--dGray6', "#1C1C1E"); //Dark color
root.style.setProperty('--dGray5', "#2C2C2E");
root.style.setProperty('--dGray4', "#3A3A3C");
root.style.setProperty('--dGray3', "#48484A");
root.style.setProperty('--dGray2', "#636366");
root.style.setProperty('--dGray1', "#8E8E93");
2019-11-16 14:54:45 +01:00
root.style.setProperty('--dGray0', "#E0E0E8"); //Light color
2019-10-30 23:40:36 +01:00
root.style.setProperty('--dBlue', "#0A84FF");
root.style.setProperty('--FontFamily', '"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif');
2019-11-19 18:32:48 +01:00
root.style.setProperty('--FontSize', '13px');
2019-11-16 14:54:45 +01:00
document.querySelector('.background').style.backgroundImage = 'none';
2019-10-30 23:40:36 +01:00
}
const setThemeHalloween = () => {
let root = document.documentElement;
root.style.setProperty('--dGray6', "#260101"); //Dark color
root.style.setProperty('--dGray5', "#260101");
root.style.setProperty('--dGray4', "#8C3D0F");
root.style.setProperty('--dGray3', "#F27405");
root.style.setProperty('--dGray2', "#F25C05");
root.style.setProperty('--dGray1', "#F28705");
root.style.setProperty('--dGray0', "#FFEB65"); //Light color
root.style.setProperty('--dBlue', "#D91604");
root.style.setProperty('--FontFamily', '"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif');
2019-11-19 18:32:48 +01:00
root.style.setProperty('--FontSize', '13px');
2019-11-16 14:54:45 +01:00
document.querySelector('.background').backgroundImage = "url('/static/images/Halloween.jpeg')";
}
const setThemeSinterklaas = () => {
let root = document.documentElement;
root.style.setProperty('--dGray6', "#F50B00"); //Dark color
root.style.setProperty('--dGray5', "#F20505");
root.style.setProperty('--dGray4', "#0C6AA6");
root.style.setProperty('--dGray3', "#177EBF");
root.style.setProperty('--dGray2', "#F2EF05");
root.style.setProperty('--dGray1', "#F2EF05");
root.style.setProperty('--dGray0', "#F2EB80"); //Light color
root.style.setProperty('--dBlue', "#35F546");
2019-11-19 18:32:48 +01:00
root.style.setProperty('--FontFamily', "cursive");
root.style.setProperty('--FontSize', "20px");
2019-11-16 14:54:45 +01:00
document.body.style.background = "#000000";
document.querySelector('.background').style.backgroundImage = "url('/static/images/Sinterklaas.jpg')";
2019-10-30 23:40:36 +01:00
}
2019-10-24 13:50:51 +02:00
init();
2019-11-19 18:32:48 +01:00
}