theme switcher

Y/Scripts/yfold.js

@@ -1,4 +1,3 @@
-
 //
 // Show/hide some sections by clicking on the title.
 //
@@ -7,7 +6,7 @@
 
 function saveStatus(id, shown) {
   if (typeof(Storage) !== "undefined") {
-	localStorage.setItem("yfold-shown-" + id, shown) ;
+    localStorage.setItem("yfold-shown-" + id, shown);
   }
 }
 
@@ -16,24 +15,31 @@ function setStatus(id, shown, content, record) {
 
   // console.log ("setStatus (" + id + ", " + shown + ")") ;
 
-    var span = document.getElementById("arrow-" + id) ;
+  var span = document.getElementById("arrow-" + id);
 
   if (shown) {
-	content.classList.remove("anim-hide") ;
-        content.classList.remove("hidden") ;
-        span.innerHTML = "▾" ;
-        if (record) { content.classList.add("anim-show") ; }
-        else { content.classList.add("shown") ; }
+    content.classList.remove("anim-hide");
+    content.classList.remove("hidden");
+    span.innerHTML = "▾";
+    if (record) {
+      content.classList.add("anim-show");
+    } else {
+      content.classList.add("shown");
+    }
+  } else {
+    content.classList.remove("anim-show");
+    content.classList.remove("shown");
+    span.innerHTML = "▸";
+    if (record) {
+      content.classList.add("anim-hide");
+    } else {
+      content.classList.add("hidden");
     }
-    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) { saveStatus(id, shown) ; }
+  if (record) {
+    saveStatus(id, shown);
+  }
 }
 
 // Invoked at load-time once for every yfold section.
@@ -42,32 +48,30 @@ function initYfold(id) {
   // console.log ("initYfold (" + id + ")") ;
 
   // console.log ("unknown " + id)
-    var shown = true ;
-    var content = document.getElementById("content-" + id) ;
+  var shown = true;
+  var content = document.getElementById("content-" + id);
 
   // Sets the state according to local storage or default value.
 
   if (typeof(Storage) !== "undefined") {
-	var local = localStorage.getItem("yfold-shown-" + id) ;
+    var local = localStorage.getItem("yfold-shown-" + id);
     // console.log ("using storage value = " + local)
 
     if (local === 'true') {
-	    shown = true ;
-	}
-	else if (local === 'false') {
-	    shown = false ;
-	}
-	else {
+      shown = true;
+    } else if (local === 'false') {
+      shown = false;
+    } else {
       // Get default value
-	    var defv = content.getAttribute("data-yfold-default") ;
+      var defv = content.getAttribute("data-yfold-default");
       if (defv === 'hide') {
-		shown = false ;
+        shown = false;
       }
       // console.log ("using default value = " + shown)
     }
   }
 
-    setStatus(id, shown, content, false) ;
+  setStatus(id, shown, content, false);
 }
 
 // Function invoked when the title is clicked.
@@ -75,9 +79,9 @@ function toggleYfold(id) {
 
   // console.log ("toggleYfold (" + id + ")") ;
 
-    var content = document.getElementById("content-" + id) ;
-    var expand = content.classList.contains("anim-hide") || content.classList.contains("hidden") ;
-    setStatus(id, expand, content, true) ;
+  var content = document.getElementById("content-" + id);
+  var expand = content.classList.contains("anim-hide") || content.classList.contains("hidden");
+  setStatus(id, expand, content, true);
 }
 
 /*********************************
@@ -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 */
 * {