fontello.json

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

javascripts/collection.js

@@ -8,7 +8,7 @@ Vue.createApp({
             // eslint-disable-next-line no-undef
             page: query.page || 1,
             totalPages: 1,
-            limit: 24,
+            limit: 16,
             artist: "",
             format: "",
             year: "",

javascripts/theme.js

@@ -1,3 +1,19 @@
+/**
+ * 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}
@@ -12,56 +28,10 @@ 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 buttonsTheme = document.getElementsByClassName("theme");
-// INFO: On récupère du local storage (ou des préférences navigateur) le thème actuel
-const currentTheme = localStorage.getItem("theme") || getPreferredColorScheme();
+const toggleSwitch = document.querySelector(
+    '.theme-switch input[type="checkbox"]'
+);
 
 /**
  * Event permettant de détecter les changements de thème du système
@@ -74,14 +44,28 @@ 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);
 
-// INFO: On place un event au click sur chacun des boutons du menu
-for (let i = 0; i < buttonsTheme.length; i += 1) {
-    buttonsTheme[i].addEventListener("click", changeTheme, false);
-}
+toggleSwitch.checked = currentTheme === "dark";
+
+toggleSwitch.addEventListener(
+    "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) 2024 by original authors @ fontello.com</metadata>
+<metadata>Copyright (C) 2022 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,8 +28,6 @@
 
 <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,3 +71,77 @@
         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,76 +1,66 @@
 @font-face {
     font-family: 'icon';
-    src: url('/font/icon.eot?15219908');
-    src: url('/font/icon.eot?15219908#iefix') format('embedded-opentype'),
-         url('/font/icon.woff2?15219908') format('woff2'),
-         url('/font/icon.woff?15219908') format('woff'),
-         url('/font/icon.ttf?15219908') format('truetype'),
-         url('/font/icon.svg?15219908#icon') format('svg');
+    src: url('/font/icon.eot?41426785');
+    src: url('/font/icon.eot?41426785#iefix') format('embedded-opentype'),
+         url('/font/icon.woff2?41426785') format('woff2'),
+         url('/font/icon.woff?41426785') format('woff'),
+         url('/font/icon.ttf?41426785') format('truetype'),
+         url('/font/icon.svg?41426785#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. */
-  /* 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 {
+}
+
+[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;
+}
 
-    /* Uncomment for 3D effect */
-    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+.icon-plus:before { content: '\e800'; } /* '' */
+.icon-user:before { content: '\e801'; } /* '' */
+.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 {
+    animation: spin 2s infinite linear;
+    display: inline-block;
+}
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
     }
 
-  .icon-plus:before { content: '\e800'; } /* '' */
-  .icon-user:before { content: '\e801'; } /* '' */
-  .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-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,37 +73,6 @@
                         <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">
@@ -140,6 +109,14 @@
                             </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,6 +487,14 @@
                     </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">