MusicTopus/javascripts/theme.js
dbroqua 4109186a47 develop (#91)
Reviewed-on: #91
Co-authored-by: dbroqua <contact@darkou.fr>
Co-committed-by: dbroqua <contact@darkou.fr>
2023-08-02 16:11:56 +02:00

71 lines
1.8 KiB
JavaScript

/**
* 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}
*/
function getPreferredColorScheme() {
if (window.matchMedia) {
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
return "dark";
}
return "light";
}
return "light";
}
// INFO: On place un event sur le bouton
const toggleSwitch = document.querySelector(
'.theme-switch input[type="checkbox"]'
);
/**
* Event permettant de détecter les changements de thème du système
*/
if (window.matchMedia) {
const colorSchemeQuery = window.matchMedia("(prefers-color-scheme: dark)");
colorSchemeQuery.addEventListener("change", () => {
const selectedColorScheme = localStorage.getItem("theme") || "system";
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
);