theme switcher

Y/Scripts/yfold.js

@@ -1,4 +1,3 @@
-
 //
 // Show/hide some sections by clicking on the title.
 //
@@ -22,18 +21,25 @@ function setStatus(id, shown, content, record) {
     content.classList.remove("anim-hide");
     content.classList.remove("hidden");
     span.innerHTML = "▾";
-        if (record) { content.classList.add("anim-show") ; }
-        else { content.classList.add("shown") ; }
+    if (record) {
+      content.classList.add("anim-show");
+    } else {
+      content.classList.add("shown");
     }
-    else {
+  } else {
     content.classList.remove("anim-show");
     content.classList.remove("shown");
     span.innerHTML = "▸";
-        if (record) { content.classList.add("anim-hide") ; }
-        else { content.classList.add("hidden") ; }
+    if (record) {
+      content.classList.add("anim-hide");
+    } else {
+      content.classList.add("hidden");
+    }
   }
 
-    if (record) { saveStatus(id, shown) ; }
+  if (record) {
+    saveStatus(id, shown);
+  }
 }
 
 // Invoked at load-time once for every yfold section.
@@ -53,11 +59,9 @@ function initYfold(id) {
 
     if (local === 'true') {
       shown = true;
-	}
-	else if (local === 'false') {
+    } else if (local === 'false') {
       shown = false;
-	}
-	else {
+    } else {
       // Get default value
       var defv = content.getAttribute("data-yfold-default");
       if (defv === 'hide') {
@@ -121,10 +125,64 @@ window.onload = function() {
       }
     });
 
-
     snippet.appendChild(img)
     snippet.appendChild(theme)
   } else {
     console.log(snippet.classList);
   }
-};
+
+  if (typeof(Storage) !== "undefined") {
+    var theme = localStorage.getItem("theme");
+    console.log("theme : " + theme)
+
+    if (theme === "/Y/ystyle.css") {
+      css_url = "/Y/ystyle.css";
+    } else if (theme === "/Y/ystyle2.css") {
+      css_url = "/Y/ystyle2.css";
+      changeCSS(css_url, 0)
+    } else {
+      // Get default value
+      css_url = "/Y/ystyle.css";
+    }
+  }
+
+  var toggler = document.createElement("a")
+  toggler.setAttribute("id", "toggler")
+  toggler.style.position = "absolute"
+  toggler.style.top = "12px"
+  toggler.style.right = "12px"
+  toggler.style.padding = "10px"
+  toggler.style.borderRadius = "7px"
+  toggler.style.background = "#335"
+  toggler.style.color = "#eee"
+  toggler.style.zIndex = "12"
+  toggler.innerHTML = "theme"
+  toggler.style.cursor = "pointer"
+  toggler.addEventListener("click", function() {
+    if (css_url == "/Y/ystyle.css") {
+      css_url = "/Y/ystyle2.css";
+    } else {
+      css_url = "/Y/ystyle.css";
+    }
+    changeCSS(css_url, 0)
+  })
+
+  document.body.appendChild(toggler)
+}
+
+function changeCSS(css_file, cssLinkIndex) {
+  if (typeof(Storage) !== "undefined") {
+    localStorage.setItem("theme", css_file);
+  }
+
+  console.log("changing css")
+
+  var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);
+
+  var newlink = document.createElement("link");
+  newlink.setAttribute("rel", "stylesheet");
+  newlink.setAttribute("type", "text/css");
+  newlink.setAttribute("href", css_file);
+
+  document.getElementsByTagName("head").item(cssLinkIndex).replaceChild(newlink, oldlink);
+}

Y/ystyle.css

@@ -1,8 +1,8 @@
 /* POLICES */
-@font-face {
+/* @font-face {
   font-family: 'Poppins';
   src: url('https://fontlibrary.org//assets/fonts/poppins/fed70e8826194d3ab847c777f43c10ea/3352653dedd571bbc490c8be132b38cd/PoppinsLight.ttf') format('truetype');
-}
+} */
 
 /* règles generéales */
 * {