fix lightmode button being weird

assets/scss/colors.scss

@@ -28,11 +28,11 @@ body {
 
 a {
   &.light {
-    background-color: $light-ln;
-    color: $light-bg;
+    background-color: transparent;
+    color: $light-ln;
   }
-  background-color: $dark-ln;
-  color: $dark-bg;
+  background-color: transparent;
+  color: $dark-ln;
   transition: $transition-time;
 }
 
@@ -129,12 +129,17 @@ article.light h3 {
   color: $light-bg;
   transition: $transition-time;
 }
+
+article h5,
+article h6,
 article h4 {
   background-color: $dark-accent3;
   color: $dark-bg;
   transition: $transition-time;
 }
 
+article.light h5,
+article.light h6,
 article.light h4 {
   background-color: $light-accent3;
   color: $light-bg;
@@ -147,16 +152,7 @@ article.light h2 {
   transition: $transition-time;
 }
 
-article h5,
-article h6,
-article a {
-  background-color: $dark-ln;
-  color: $dark-bg;
-  transition: $transition-time;
-}
 
-article.light h5,
-article.light h6,
 article.light a {
   background-color: $light-ln;
   color: $light-bg;
@@ -165,11 +161,11 @@ article.light a {
 
 a:hover {
   &.light {
-    color: $light-ln;
-    background-color: transparent;
+    color: $light-bg;
+    background-color: $light-ln;
   }
-  color: $dark-ln;
-  background-color: transparent;
+  color: $dark-bg;
+  background-color: $dark-ln;
 }
 
 article.light a:hover {

assets/scss/layout.scss

@@ -30,6 +30,11 @@ footer {
   margin-left: 24%;
 }
 
+#content ol ol,
+#content ul ul{
+  margin-left: 0.12em;
+}
+
 #footer-left {
   margin-top: auto;
   margin-bottom: auto;

assets/scss/style.scss

@@ -6,12 +6,13 @@ $toggle-height: 24pt;
     border-width: 2pt;
      }
 
+
 input[type="checkbox"]{
     cursor: pointer;
 }
 .toggleinput{
-    opacity: 0;
-     max-height: 0;
+    opacity: 10;
+     max-height: 10;
     overflow: hidden;
 }
 

static/js/darkmode.js

@@ -1,23 +1,6 @@
 const checkbox = document.getElementById("darkmode-toggle");
 const colorswitchers = document.getElementsByClassName("colorswitch");
 
-if (localStorage.getItem("light")) {
-  switchToLight();
-} else {
-  switchToDark();
-}
-checkbox.checked = localStorage.getItem("dark");
-
-checkbox.addEventListener("change", function () {
-  localStorage.setItem("light", this.checked);
-  if (this.checked) {
-    switchToLight();
-  } else {
-    localStorage.removeItem("light");
-    switchToDark();
-  }
-});
-
 function switchToLight() {
   for (let item of colorswitchers) {
     item.classList.add("light");
@@ -30,3 +13,24 @@ function switchToDark() {
     item.classList.remove("light");
   }
 }
+
+document.addEventListener("DOMContentLoaded", () => {
+  if (localStorage.getItem("light")) {
+    switchToLight();
+  } else {
+    switchToDark();
+  }
+  checkbox.checked = localStorage.getItem("dark");
+  checkbox.addEventListener("change", function () {
+    localStorage.setItem("light", this.checked);
+    if (this.checked) {
+      switchToLight();
+    } else {
+      localStorage.removeItem("light");
+      switchToDark();
+    }
+  });
+  if (localStorage.getItem("light")) {
+    checkbox.checked = true;
+  }
+});