finish theme switcher

Y/Scripts/yfold.js

@@ -133,43 +133,59 @@ window.onload = function() {
     }
   }
 
+  var css_url = "/Y/ystyle.css"
+
   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 {
+    if (theme == "null" || theme == null || theme == "undefined" || theme == undefined) {
       // Get default value
       css_url = "/Y/ystyle.css";
+    } else {
+      css_url = theme;
+      changeCSS(css_url, 0)
     }
   }
 
-  var toggler = document.createElement("a")
-  toggler.setAttribute("id", "toggler")
+  var toggler = document.createElement("select")
+
+  var liste = ["/Y/ystyle.css","/Y/ystyle2.css"];
+
+  toggler.id = "toggler";
+  document.body.appendChild(toggler)
+
+  let i = 1;
+
+  //Create and append the options
+  for (let opt of liste) {
+    let option = document.createElement("option");
+    option.value = opt;
+    option.text = "style " + i.toString();
+    i++;
+    if (option.value == css_url) {
+      option.selected = "selected"
+    }
+    option.style.outline = "none"
+    option.style.border = "none"
+    toggler.appendChild(option);
+  }
+
   toggler.style.position = "absolute"
-  toggler.style.top = "12px"
-  toggler.style.right = "12px"
+  toggler.style.top = "18px"
+  toggler.style.right = "15px"
   toggler.style.padding = "10px"
   toggler.style.borderRadius = "7px"
   toggler.style.background = "#335"
+  toggler.style.border = "none"
+  toggler.style.appearance = "none"
   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";
-    }
+  toggler.style.outline = "none"
+  toggler.addEventListener("change", function() {
+    css_url = toggler.value
     changeCSS(css_url, 0)
   })
-
-  document.body.appendChild(toggler)
 }
 
 function changeCSS(css_file, cssLinkIndex) {
@@ -177,7 +193,7 @@ function changeCSS(css_file, cssLinkIndex) {
     localStorage.setItem("theme", css_file);
   }
 
-  console.log("changing css")
+  console.log("changing css to " + css_file)
 
   var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);
 

Y/ystyle.css

@@ -477,6 +477,13 @@ img:hover {
   transition: all 0.3s;
 }
 
+/* General styling */
+
+::selection {
+  background-color: #113e9e;
+  color: lightgoldenrodyellow;
+}
+
 /* MEDIA */
 @media (min-width: 1400px) {
   footer {