Fix the dark theme from flashing at you every page load

sass/sidebar.scss

@@ -42,6 +42,7 @@
   color:#7ccbd5;
   font-size:17px;
   text-decoration:none;
+  font-weight: bold;
 }
 
 .sb_img {
@@ -75,6 +76,11 @@
   display: inline-block;
 }
 
+.theme-toggle:hover {
+  background-color: var(--elm-inv-bg-color);
+  color: var(--text-inv-color);
+}
+
 .personal { color:#fc3f5b; }
 .nixfox { color:#2abafc; }
 

sass/style.scss

@@ -8,7 +8,9 @@
 [data-theme="light"] {
   --bg-color: #DDE1E9;
   --elm-bg-color: #EFF1F5;
+  --elm-inv-bg-color: #1F2223;
   --text-color: #141414;
+  --text-inv-color: #DBD8D4;
   --subtext-color: #6c7387;
   --link-color: #b7162e;
 }
@@ -16,18 +18,24 @@
 [data-theme="dark"] {
   --bg-color: #181A1B;
   --elm-bg-color: #1F2223;
+  --elm-inv-bg-color: #EFF1F5;
   --text-color: #DBD8D4;
+  --text-inv-color: #141414;
   --subtext-color: #8991a5;
   --link-color: #DB4E63;
 }
 
-html {
-  background-color: var(--bg-color);
+.preload { 
+  transition: none !important;
+  animation-duration: 0.001s !important; 
 }
 
 body {
   color: var(--text-color);
+  background-color: var(--bg-color);
+
   padding-bottom: 5em;
+  min-height: 100%;
 }
 
 .subtitle {
@@ -44,7 +52,6 @@ a {
 }
 
 a:hover {
-  font-weight: bold;
   outline: 3px solid;
 }
 
@@ -60,7 +67,7 @@ h1 {
   max-width: 50em;
   margin: auto;
 
-  top: 3em;
+  top: 2em;
   left: 6.5em;
   
   padding: 3em;