fix toggle in design system docs

.eleventy.js

@@ -36,7 +36,9 @@ module.exports = async function(eleventyConfig) {
                 ],
             });*/
         } 
-    else { console.log(`SSR plugin not active`);}
+    else { 
+        //console.log(`SSR plugin not active`);
+    }
 
 
     eleventyConfig.setLibrary('md', markdownLib)

src/assets/css/_content.scss

@@ -375,4 +375,8 @@ h3 {
 
 p.subtext {
   color: var(--sbb-color-metal);
+}
+
+.switcher { 
+  margin-bottom: 16px;
 }

src/assets/js/mode-toggle.js

@@ -1,24 +1,25 @@
-const oneswitch = document.querySelectorAll(".switch");
+const switcher = document.querySelectorAll(".switcher");
 const images = document.querySelectorAll('.boxed-image');
-oneswitch.forEach(function (element) {
-    element.addEventListener("click", modeSwitch);
+switcher.forEach(function (element) {
+    element.addEventListener("change", modeSwitch);
 });
 number = 0;
 function modeSwitch() {
-        if (this.value != this.parentElement.value) {
-            oneswitch.forEach(function (tog) {
-                if(number % 2 == 0) {                
-                    if (tog.parentElement.value == "dark") {
-                        tog.parentElement.setAttribute("value", "light")
-                    } else {
-                        tog.parentElement.setAttribute("value", "dark")
-                    }
-                }
-                number++;
+    if (this.value == "light") {
+        switcher.forEach(function (element) {
+            element.firstElementChild.click();
+            images.forEach(function (element) {
+                element.classList.add("light");
+                element.classList.remove("dark");
             });
-            images.forEach(function (img) {
-                img.classList.toggle("light");
-                img.classList.toggle("dark");
+        });
+    } else {
+        switcher.forEach(function (element) {
+            element.lastElementChild.click();
+            images.forEach(function (element) {
+                element.classList.add("dark");
+                element.classList.remove("light");
             });
-        }
+        });
+    }        
 }