#88 - Améliorer le switch sur le thème

javascripts/theme.js

@@ -0,0 +1,71 @@
+/**
+ * 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
+);