dbroqua/MusicTopus
2
0
Fork 1
Code Issues 13 Pull requests 1 Projects Releases 14 Packages Wiki Activity Actions

Rewrote theme switcher

Browse source
This commit is contained in:
Damien Broqua 2024-01-31 14:12:35 +01:00
parent f1220fc05a
commit 6b2f7b61cb
11 changed files with 144 additions and 169 deletions
Download patch file Download diff file Expand all files Collapse all files

90
javascripts/theme.js
View file

@ -1,19 +1,3 @@
/**
* Fonction permettant de sauvegarder dans le stockage local le choix du thème
* @param {String} scheme
*/
function saveColorScheme(scheme) {
localStorage.setItem("theme", scheme);
}
/**
* Fonction permettant de changer le thème du site
* @param {String} scheme
*/
function setColorScheme(scheme) {
document.documentElement.setAttribute("data-theme", scheme);
}
/**
* Fonction permettant de récupérer le thème du système
* @return {String}
@ -28,10 +12,56 @@ function getPreferredColorScheme() {
return "light";
}
/**
* @param {String} scheme
*/
function setPictoOnMenu(scheme) {
document.querySelectorAll(".icon-theme").forEach((item) => {
item.classList.add("hidden");
});
document
.querySelector(`.icon-theme.theme-${scheme}`)
.classList.remove("hidden");
}
/**
* Fonction permettant de sauvegarder dans le stockage local le choix du thème
* @param {String} scheme
*/
function saveColorScheme(scheme) {
localStorage.setItem("theme", scheme);
}
/**
* Fonction permettant de changer le thème du site
* @param {String} scheme
*/
function setColorScheme(scheme) {
document.documentElement.setAttribute(
"data-theme",
scheme === "system" ? getPreferredColorScheme() : scheme
);
setPictoOnMenu(scheme);
}
/**
* Fonction déclenchée lorsqu'un utilisateur clique sur un bouton dans le menu déroulant
* @param {Object} e
*/
function changeTheme(e) {
e.preventDefault();
const scheme = this.dataset.value;
saveColorScheme(scheme);
setColorScheme(scheme);
}
// INFO: On place un event sur le bouton
const toggleSwitch = document.querySelector(
'.theme-switch input[type="checkbox"]'
);
const buttonsTheme = document.getElementsByClassName("theme");
// INFO: On récupère du local storage (ou des préférences navigateur) le thème actuel
const currentTheme = localStorage.getItem("theme") || getPreferredColorScheme();
/**
* Event permettant de détecter les changements de thème du système
@ -44,28 +74,14 @@ if (window.matchMedia) {
if (selectedColorScheme === "system") {
const preferedColorScheme = getPreferredColorScheme();
setColorScheme(preferedColorScheme);
toggleSwitch.checked = preferedColorScheme === "dark";
}
});
}
const currentTheme = localStorage.getItem("theme") || getPreferredColorScheme();
// INFO: Au chargement de la page on détecte le thème à charger
setColorScheme(currentTheme);
toggleSwitch.checked = currentTheme === "dark";
toggleSwitch.addEventListener(
"change",
(e) => {
e.preventDefault();
const scheme = e.target.checked ? "dark" : "light";
saveColorScheme(scheme);
setColorScheme(scheme);
},
false
);
// INFO: On place un event au click sur chacun des boutons du menu
for (let i = 0; i < buttonsTheme.length; i += 1) {
buttonsTheme[i].addEventListener("click", changeTheme, false);
}