ajout du bouton de switch + quelque reglage des input

assets/css/src/generic.css

@@ -138,3 +138,5 @@ button.less::after {
   width: 100%;
   margin-top: calc(var(--unit--vertical) / 2);
 }
+
+

assets/css/src/nav.css

@@ -79,14 +79,16 @@
   padding: calc(var(--unit--vertical) / 4) 0;
   border: none;
   border-bottom: 1px solid var(--color-background);
-  color: var(--color-background);
+  color: var(--color-primary);
   font-size: var(--font-size-m);
   font-weight: var(--font-weight-light);
+
+  caret-color: var(--color-primary);
 }
 .search__input::placeholder {
+  color: var(--color-primary);
   font-size: var(--font-size-sm);
   letter-spacing: 1px;
-  color: var(--color-primary);
   opacity: 0.55;
 }
 .search__icon {

assets/css/src/newsletter.css

@@ -11,18 +11,24 @@
 #subscribe-form input {
   background-color: transparent;
   border: none;
-  border-bottom: 1px solid var(--color-background);
   box-sizing: border-box;
   padding-bottom: 0.3rem;
   padding-right: 2rem;
-  color: var(--color-background);
   width: 15rem;
+
+  border-bottom: 1px solid var(--color-primary);
+  color: var(--color-primary);
+  caret-color: var(--color-primary);
+}
+#subscribe-form input::placeholder {
+  color: var(--color-primary);
+  opacity: 0.55;
 }
 #subscribe-form input:focus-visible {
   outline: none;
 }
 #subscribe-form button[type="submit"] {
-  color: var(--color-background);
+  color: var(--color-primary);
   position: absolute;
   top: 0;
   right: 0;

assets/css/src/toggle-light-mode.css

@@ -0,0 +1,20 @@
+.theme-toggler{
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    padding: var(--unit--vertical) var(--unit--horizontal);
+}
+.theme-toggler > *{
+}
+.theme-toggler-icon {
+    width: 1.2rem;
+    height: 1.2rem;
+
+    background-color: var(--color-primary);
+    
+    mask-size: cover;
+    -webkit-mask-size: cover;
+
+    mask: var(--icon-theme-toggler) no-repeat center;
+    -webkit-mask: var(--icon-theme-toggler) no-repeat center;
+}

assets/css/style.css

@@ -11,6 +11,7 @@
 @import url("src/newsletter.css");
 @import url("src/footer.css");
 @import url("src/print.css");
+@import url("src/toggle-light-mode.css");
 
 
 

assets/images/icons/circle-half.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-circle-half" viewBox="0 0 16 16">
+  <path d="M8 15A7 7 0 1 0 8 1zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16"/>
+</svg>

assets/js/light-mode.js

@@ -6,20 +6,22 @@
     const newTheme = currentTheme === "dark" ? "light" : "dark";
     root.setAttribute("data-theme", newTheme);
     localStorage.setItem("theme", newTheme);
-    console.log("tets");
   }
 
   function init() {
     const storedPreference = localStorage.getItem("theme");
     const systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
     const theme = storedPreference || (systemPrefersDark ? "dark" : "light");
+
+    // const theme = "dark";
+
     root.setAttribute("data-theme", theme);
   }
 
   init();
 
   document.addEventListener("DOMContentLoaded", function () {
-    const togglers = document.querySelectorAll("[data-theme-toggler]");
+    const togglers = document.querySelectorAll(".theme-toggler");
     togglers.forEach((toggler) => {
       toggler.addEventListener("click", toggleDarkMode);
     });