Added css theme based on user system preferences

.eslintrc.js

@@ -1,26 +1,27 @@
 module.exports = {
   env: {
     browser: true,
-    es2021: true
+    es2021: true,
   },
   extends: 'google',
   overrides: [
     {
       env: {
-        node: true
+        node: true,
       },
       files: [
-        '.eslintrc.{js,cjs}'
+        '.eslintrc.{js,cjs}',
       ],
       parserOptions: {
-        sourceType: 'script'
+        sourceType: 'script',
-      }
+      },
-    }
+    },
   ],
   parserOptions: {
     ecmaVersion: 'latest',
-    sourceType: 'module'
+    sourceType: 'module',
   },
   rules: {
-  }
+    'max-len': ['error', {'code': 120}],
-}
+  },
+};

public/js/main.js

@@ -1,97 +1,153 @@
+/* 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) {
+  if (message) {
-        x.getElementsByTagName("SPAN")[0].innerHTML = message;
+    x.getElementsByTagName('SPAN')[0].innerHTML = message;
-    }
+  }
 
-    if (timeout) {
+  if (timeout) {
-        clearTimeout(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) {
+  if (success) {
-        x.classList.add("success");
+    x.classList.add('success');
-    } else {
+  } else {
-        x.classList.add("error");
+    x.classList.add('error');
-    }
+  }
 
-    x.classList.add("show");
+  x.classList.add('show');
 
-    timeout = setTimeout(() => {
+  timeout = setTimeout(() => {
-        x.classList.remove("show");
+    x.classList.remove('show');
-    }, 3000);
+  }, 3000);
 }
 
 /**
  * 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);
+  const copyText = document.getElementById(itemId);
-    copyText.select();
+  copyText.select();
-    document.execCommand('copy');
+  document.execCommand('copy');
 
-    showToastr(message, true);
+  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');
+  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');
+  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 x = document.getElementById(`item-${itemId}`);
-    const original = x.dataset.original;
+  const original = x.dataset.original;
-    const medium = x.dataset.medium;
+  const medium = x.dataset.medium;
-    const small = x.dataset.small;
+  const small = x.dataset.small;
 
-    document.getElementById('previewImage').src = small;
+  document.getElementById('previewImage').src = small;
-    document.getElementById('originalFile-0').value = original;
+  document.getElementById('originalFile-0').value = original;
-    document.getElementById('mediumFile-0').value = medium;
+  document.getElementById('mediumFile-0').value = medium;
-    document.getElementById('smallFile-0').value = small;
+  document.getElementById('smallFile-0').value = small;
-    document.getElementById('bbcode-0').value = `[url=${original}][img]${medium}[/img][/url]`;
+  document.getElementById('bbcode-0').value = `[url=${original}][img]${medium}[/img][/url]`;
 
-    showModale();
+  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());
 }