Rewrote theme switcher

fontello.json

@@ -6,6 +6,12 @@
   "units_per_em": 1000,
   "ascent": 850,
   "glyphs": [
+    {
+      "uid": "ca90da02d2c6a3183f2458e4dc416285",
+      "css": "adjust",
+      "code": 59408,
+      "src": "fontawesome"
+    },
     {
       "uid": "44e04715aecbca7f266a17d5a7863c68",
       "css": "plus",

javascripts/theme.js

@@ -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(
+const buttonsTheme = document.getElementsByClassName("theme");
-    '.theme-switch input[type="checkbox"]'
+// 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";
+// INFO: On place un event au click sur chacun des boutons du menu
-
+for (let i = 0; i < buttonsTheme.length; i += 1) {
-toggleSwitch.addEventListener(
+    buttonsTheme[i].addEventListener("click", changeTheme, false);
-    "change",
+}
-    (e) => {
-        e.preventDefault();
-
-        const scheme = e.target.checked ? "dark" : "light";
-
-        saveColorScheme(scheme);
-        setColorScheme(scheme);
-    },
-    false
-);

public/font/icon.svg

@@ -1,7 +1,7 @@
 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg xmlns="http://www.w3.org/2000/svg">
-<metadata>Copyright (C) 2022 by original authors @ fontello.com</metadata>
+<metadata>Copyright (C) 2024 by original authors @ fontello.com</metadata>
 <defs>
 <font id="icon" horiz-adv-x="1000" >
 <font-face font-family="icon" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
@@ -28,6 +28,8 @@
 
 <glyph glyph-name="refresh" unicode="&#xe80a;" d="M843 261q0-3 0-4-36-150-150-243t-267-93q-81 0-157 31t-136 88l-72-72q-11-11-25-11t-25 11-11 25v250q0 14 11 25t25 11h250q14 0 25-11t10-25-10-25l-77-77q40-36 90-57t105-20q74 0 139 37t104 99q6 10 30 66 4 13 16 13h107q8 0 13-6t5-12z m14 446v-250q0-14-10-25t-26-11h-250q-14 0-25 11t-10 25 10 25l77 77q-82 77-194 77-75 0-140-37t-104-99q-6-10-29-66-5-13-17-13h-111q-7 0-13 6t-5 12v4q36 150 151 243t268 93q81 0 158-31t137-88l72 72q11 11 25 11t26-11 10-25z" horiz-adv-x="857.1" />
 
+<glyph glyph-name="adjust" unicode="&#xe810;" d="M429 46v608q-83 0-153-41t-110-111-41-152 41-152 110-111 153-41z m428 304q0-117-57-215t-156-156-215-58-216 58-155 156-58 215 58 215 155 156 216 58 215-58 156-156 57-215z" horiz-adv-x="857.1" />
+
 <glyph glyph-name="spin" unicode="&#xe839;" d="M855 9c-189-190-520-172-705 13-190 190-200 494-28 695 11 13 21 26 35 34 36 23 85 18 117-13 30-31 35-76 16-112-5-9-9-15-16-22-140-151-145-379-8-516 153-153 407-121 542 34 106 122 142 297 77 451-83 198-305 291-510 222l0 1c236 82 492-24 588-252 71-167 37-355-72-493-11-15-23-29-36-42z" horiz-adv-x="1000" />
 
 <glyph glyph-name="link-ext" unicode="&#xf08e;" d="M786 332v-178q0-67-47-114t-114-47h-464q-67 0-114 47t-47 114v464q0 66 47 113t114 48h393q7 0 12-5t5-13v-36q0-8-5-13t-12-5h-393q-37 0-63-26t-27-63v-464q0-37 27-63t63-27h464q37 0 63 27t26 63v178q0 8 5 13t13 5h36q8 0 13-5t5-13z m214 482v-285q0-15-11-25t-25-11-25 11l-98 98-364-364q-5-6-13-6t-12 6l-64 64q-6 5-6 12t6 13l364 364-98 98q-11 11-11 25t11 25 25 11h285q15 0 25-11t11-25z" horiz-adv-x="1000" />

sass/forms.scss

@@ -71,77 +71,3 @@
         padding-right: 2.4rem;
     }
 }
-
-.theme-switch-wrapper {
-    display: flex;
-    align-items: center;
-
-    em {
-        margin-left: 10px;
-        font-size: 1rem;
-    }
-}
-
-.theme-switch {
-    display: inline-block;
-    height: 34px;
-    position: relative;
-    width: 60px;
-}
-
-.theme-switch input {
-    display:none;
-}
-
-.slider {
-    background-color: #ccc;
-    bottom: 0;
-    cursor: pointer;
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    transition: .4s;
-    @include transition() {}
-}
-
-.slider:before {
-    background-color: #fff;
-    bottom: 4px;
-    content: '\f185';
-    height: 26px;
-    left: 4px;
-    position: absolute;
-    transition: .4s;
-    width: 26px;
-    padding: 0;
-
-    font-family: "icon";
-    font-style: normal;
-    font-weight: normal;
-    display: inline-block;
-    text-decoration: inherit;
-    text-align: center;
-    font-variant: normal;
-    text-transform: none;
-}
-
-input:checked + .slider {
-    background-color: $primary-color;
-    @include transition() {}
-}
-
-input:checked + .slider:before {
-    transform: translateX(26px);
-    content: '\f186';
-    background-color: var(--input-active-color);
-    @include transition() {}
-}
-
-.slider.round {
-    border-radius: 34px;
-}
-
-.slider.round:before {
-    border-radius: 50%;
-}

sass/icons.scss

@@ -1,66 +1,76 @@
 @font-face {
     font-family: 'icon';
-    src: url('/font/icon.eot?41426785');
+    src: url('/font/icon.eot?15219908');
-    src: url('/font/icon.eot?41426785#iefix') format('embedded-opentype'),
+    src: url('/font/icon.eot?15219908#iefix') format('embedded-opentype'),
-         url('/font/icon.woff2?41426785') format('woff2'),
+         url('/font/icon.woff2?15219908') format('woff2'),
-         url('/font/icon.woff?41426785') format('woff'),
+         url('/font/icon.woff?15219908') format('woff'),
-         url('/font/icon.ttf?41426785') format('truetype'),
+         url('/font/icon.ttf?15219908') format('truetype'),
-         url('/font/icon.svg?41426785#icon') format('svg');
+         url('/font/icon.svg?15219908#icon') format('svg');
     font-weight: normal;
     font-style: normal;
-}
+  }
-
+  /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
-[class^="icon-"]:before, [class*=" icon-"]:before {
+  /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
+  /*
+  @media screen and (-webkit-min-device-pixel-ratio:0) {
+    @font-face {
+      font-family: 'icon';
+      src: url('../font/icon.svg?15219908#icon') format('svg');
+    }
+  }
+  */
+  [class^="icon-"]:before, [class*=" icon-"]:before {
     font-family: "icon";
     font-style: normal;
     font-weight: normal;
+    speak: never;
 
     display: inline-block;
     text-decoration: inherit;
     width: 1em;
     margin-right: .2em;
     text-align: center;
+    /* opacity: .8; */
 
+    /* For safety - reset parent styles, that can break glyph codes*/
     font-variant: normal;
     text-transform: none;
 
+    /* fix buttons height, for twitter bootstrap */
     line-height: 1em;
 
+    /* Animation center compensation - margins should be symmetric */
+    /* remove if not needed */
     margin-left: .2em;
 
+    /* you can be more comfortable with increased icons size */
+    /* font-size: 120%; */
+
+    /* Font smoothing. That was taken from TWBS */
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-}
 
-.icon-plus:before { content: '\e800'; } /* '' */
+    /* Uncomment for 3D effect */
-.icon-user:before { content: '\e801'; } /* '' */
+    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
-.icon-search:before { content: '\e802'; } /* '' */
+  }
-.icon-mail:before { content: '\e803'; } /* '' */
-.icon-link:before { content: '\e804'; } /* '' */
-.icon-heart:before { content: '\e805'; } /* '' */
-.icon-eye:before { content: '\e806'; } /* '' */
-.icon-left-open:before { content: '\e807'; } /* '' */
-.icon-right-open:before { content: '\e808'; } /* '' */
-.icon-export:before { content: '\e809'; } /* '' */
-.icon-refresh:before { content: '\e80a'; } /* '' */
-.icon-spin:before { content: '\e839'; } /* '' */
-.icon-link-ext:before { content: '\f08e'; } /* '' */
-.icon-sun:before { content: '\f185'; } /* '' */
-.icon-moon:before { content: '\f186'; } /* '' */
-.icon-share:before { content: '\f1e0'; } /* '' */
-.icon-trash:before { content: '\f1f8'; } /* '' */
-.icon-blind:before { content: '\f29d'; } /* '' */
 
-.animate-spin {
+  .icon-plus:before { content: '\e800'; } /* '' */
-    animation: spin 2s infinite linear;
+  .icon-user:before { content: '\e801'; } /* '' */
-    display: inline-block;
+  .icon-search:before { content: '\e802'; } /* '' */
-}
+  .icon-mail:before { content: '\e803'; } /* '' */
-@keyframes spin {
+  .icon-link:before { content: '\e804'; } /* '' */
-    0% {
+  .icon-heart:before { content: '\e805'; } /* '' */
-        transform: rotate(0deg);
+  .icon-eye:before { content: '\e806'; } /* '' */
-    }
+  .icon-left-open:before { content: '\e807'; } /* '' */
+  .icon-right-open:before { content: '\e808'; } /* '' */
+  .icon-export:before { content: '\e809'; } /* '' */
+  .icon-refresh:before { content: '\e80a'; } /* '' */
+  .icon-adjust:before { content: '\e810'; } /* '' */
+  .icon-spin:before { content: '\e839'; } /* '' */
+  .icon-link-ext:before { content: '\f08e'; } /* '' */
+  .icon-sun:before { content: '\f185'; } /* '' */
+  .icon-moon:before { content: '\f186'; } /* '' */
+  .icon-share:before { content: '\f1e0'; } /* '' */
+  .icon-trash:before { content: '\f1f8'; } /* '' */
+  .icon-blind:before { content: '\f29d'; } /* '' */
 
-    100% {
-        transform: rotate(359deg);
-    }
-}

views/index.ejs

@@ -73,6 +73,37 @@
                         <a class="navbar-item" href="/nous-contacter">
                             Nous contacter
                         </a>
+                        <div class="navbar-item has-dropdown">
+                            <a class="navbar-link">
+                                <i class="icon-adjust theme-system icon-theme hidden"></i>
+                                <i class="icon-sun theme-light icon-theme hidden"></i>
+                                <i class="icon-moon theme-dark icon-theme hidden"></i>
+                                <span>
+                                    Thème
+                                </span>
+                            </a>
+
+                            <div class="navbar-dropdown">
+                                <button class="navbar-item theme" data-value="system">
+                                    <i class="icon-adjust"></i>
+                                    <span>
+                                        Système
+                                    </span>
+                                </button>
+                                <button class="navbar-item theme" data-value="light">
+                                    <i class="icon-sun"></i>
+                                    <span>
+                                        Clair
+                                    </span>
+                                </button>
+                                <button class="navbar-item theme" data-value="dark">
+                                    <i class="icon-moon"></i>
+                                    <span>
+                                        Sombre
+                                    </span>
+                                </button>
+                            </div>
+                        </div>
                         <% if ( user ) { %>
                         <div class="navbar-item has-dropdown">
                             <a class="navbar-link">
@@ -109,14 +140,6 @@
                             </div>
                         </div>
                         <% } %>
-                        <div class="navbar-item apparence">
-                            <div class="theme-switch-wrapper">
-                                <label class="theme-switch" for="checkbox" aria-label="Passer du thème clair au thème sombre et inversement">
-                                    <input type="checkbox" id="checkbox" />
-                                    <div class="slider round"></div>
-                            </label>
-                            </div>
-                        </div>
                         <% if ( !user ) { %>
                         <div class="navbar-item">
                             <div class="buttons">

views/pages/composants.ejs

@@ -487,14 +487,6 @@
                     </a>
                 </div>
             </div>
-            <div class="navbar-item apparence">
-                <div class="theme-switch-wrapper">
-                    <label class="theme-switch" for="checkbox" aria-label="Passer du thème clair au thème sombre et inversement">
-                        <input type="checkbox" id="checkbox" />
-                        <div class="slider round"></div>
-                    </label>
-                </div>
-            </div>
             <div class="navbar-item">
                 <div class="buttons">
                     <a class="button is-danger" href="/se-deconnecter">