Added css theme based on user system preferences

public/js/main.js

@@ -1,53 +1,34 @@
+/* eslint-disable no-unused-vars */
 let timeout = null;
 
-/**
- * Ensemble d'actions effectuées au chargement de la page
- */
-document.addEventListener("DOMContentLoaded", () => {
-  const $navbarBurgers = Array.prototype.slice.call(
-      document.querySelectorAll(".navbar-burger"),
-      0
-  );
-  if ($navbarBurgers.length > 0) {
-      $navbarBurgers.forEach((el) => {
-          el.addEventListener("click", () => {
-              const { target } = el.dataset;
-              const $target = document.getElementById(target);
-
-              el.classList.toggle("is-active");
-              $target.classList.toggle("is-active");
-          });
-      });
-  }
-});
-
 /**
  * Fonction permettant d'afficher un message dans un toastr
  * @param {String} message
+ * @param {Boolean} success
  */
 function showToastr(message, success = false) {
-    const x = document.getElementById("toastr");
+  const x = document.getElementById('toastr');
   if (message) {
-        x.getElementsByTagName("SPAN")[0].innerHTML = message;
+    x.getElementsByTagName('SPAN')[0].innerHTML = message;
   }
 
   if (timeout) {
     clearTimeout(timeout);
-        x.classList.remove("show");
+    x.classList.remove('show');
   }
 
-    x.classList.remove("success");
+  x.classList.remove('success');
-    x.classList.remove("error");
+  x.classList.remove('error');
   if (success) {
-        x.classList.add("success");
+    x.classList.add('success');
   } else {
-        x.classList.add("error");
+    x.classList.add('error');
   }
 
-    x.classList.add("show");
+  x.classList.add('show');
 
   timeout = setTimeout(() => {
-        x.classList.remove("show");
+    x.classList.remove('show');
   }, 3000);
 }
 
@@ -55,12 +36,17 @@ function showToastr(message, success = false) {
  * Fonction permettant de masquer le toastr
  */
 function hideToastr() {
-    const x = document.getElementById("toastr");
+  const x = document.getElementById('toastr');
 
-    x.className = x.className.replace("show", "");
+  x.className = x.className.replace('show', '');
-    x.getElementsByTagName("SPAN")[0].innerHTML = "";
+  x.getElementsByTagName('SPAN')[0].innerHTML = '';
 }
 
+/**
+ * Fonction permettant de copier le contenu d'un input dans le presse papier
+ * @param {String} itemId
+ * @param {String} message
+ */
 const copyToClipboard = (itemId, message) => {
   const copyText = document.getElementById(itemId);
   copyText.select();
@@ -69,18 +55,28 @@ const copyToClipboard = (itemId, message) => {
   showToastr(message, true);
 };
 
+/**
+ * Fonction permettant d'afficher une modale
+ */
 const showModale = () => {
-    const x = document.getElementsByClassName("modal");
+  const x = document.getElementsByClassName('modal');
 
   x[0].classList.add('is-visible');
-}
+};
 
+/**
+ * Fonction permettant de fermer une modale
+ */
 const closeModale = () => {
-    const x = document.getElementsByClassName("modal");
+  const x = document.getElementsByClassName('modal');
 
   x[0].classList.remove('is-visible');
-}
+};
 
+/**
+ * Fonction permettant d'afficher la modale avec le détails d'une image
+ * @param {Number} itemId
+ */
 const displayImageDetails = (itemId) => {
   const x = document.getElementById(`item-${itemId}`);
   const original = x.dataset.original;
@@ -94,4 +90,64 @@ const displayImageDetails = (itemId) => {
   document.getElementById('bbcode-0').value = `[url=${original}][img]${medium}[/img][/url]`;
 
   showModale();
+};
+
+/**
+ * Fonction permettant de récupérer le thème du système
+ * @return {String}
+ */
+function getPreferredColorScheme() {
+  if (window.matchMedia) {
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+  return 'light';
+}
+
+/**
+ * Fonction permettant de changer le thème du site
+ * @param {String} scheme
+ */
+function setColorScheme(scheme) {
+  document.documentElement.setAttribute('data-theme', scheme);
+}
+
+/**
+ * Ensemble d'actions effectuées au chargement de la page
+ */
+document.addEventListener('DOMContentLoaded', () => {
+  const $navbarBurgers = Array.prototype.slice.call(
+      document.querySelectorAll('.navbar-burger'),
+      0,
+  );
+  if ($navbarBurgers.length > 0) {
+    $navbarBurgers.forEach((el) => {
+      el.addEventListener('click', () => {
+        const {target} = el.dataset;
+        const $target = document.getElementById(target);
+
+        el.classList.toggle('is-active');
+        $target.classList.toggle('is-active');
+      });
+    });
+  }
+});
+
+if (window.matchMedia) {
+  /**
+   * Event permettant de détecter les changements de thème du système
+   */
+  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);
+    }
+  });
+
+  /**
+   * Au chargement de la page on détecte le thème à charger
+   */
+  setColorScheme(getPreferredColorScheme());
 }