Mostly completed dark mode support

site/src/css/nav.css

@@ -49,7 +49,7 @@ nav a {
     flex-direction: column;
     z-index: 100;
     background-color: var( --color-background-accent );
-    transition: all 0.5s;
+    transition: left 0.5s, top 0.5s;
 }
 
 .nav-top-bar {

site/src/css/style.css

@@ -57,6 +57,10 @@ body {
     color: var( --color-text-primary );
 }
 
+body.loaded {
+    transition: color 0.5s, background-color 0.5s;
+}
+
 .material-symbols-outlined {
     font-variation-settings:
     'FILL' 0,

site/src/footer.html

@@ -68,34 +68,7 @@
             document.getElementById( 'analytics' ).classList.add( 'show' );
         }
 
-        // Themeing
+        // Show which theme is loaded
-        let loadedTheme = localStorage.getItem( 'theme' ) ?? 'auto';
-        var theme = loadedTheme;
-        let loadTheme = () => {
-            loadedTheme = localStorage.getItem( 'theme' ) ?? 'auto';
-            if ( loadedTheme === 'auto' ) {
-                if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches ) {
-                    theme = 'dark_mode';
-                } else {
-                    theme = 'light_mode';
-                }
-            }
-            if ( theme === 'dark_mode' ) {
-                document.documentElement.classList.remove( 'light' );
-                document.documentElement.classList.add( 'dark' );
-            } else {
-                document.documentElement.classList.add( 'light' );
-                document.documentElement.classList.remove( 'dark' );
-                theme === 'light_mode';
-            }
-        }
-        loadTheme();
         document.getElementById( 'theme-select' ).value = loadedTheme;
-
-        function changeTheme () {
-            theme = document.getElementById( 'theme-select' ).value;
-            localStorage.setItem( 'theme', theme );
-            loadTheme();
-        }
     </script>
 </div>

site/src/nav.html

@@ -1,3 +1,38 @@
+<script>
+    // Themeing
+    let loadedTheme = localStorage.getItem( 'theme' ) ?? 'auto';
+    var theme = loadedTheme;
+    let loadTheme = () => {
+        loadedTheme = localStorage.getItem( 'theme' ) ?? 'auto';
+        if ( loadedTheme === 'auto' ) {
+            if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches ) {
+                theme = 'dark_mode';
+            } else {
+                theme = 'light_mode';
+            }
+        }
+        if ( theme === 'dark_mode' ) {
+            document.documentElement.classList.remove( 'light' );
+            document.documentElement.classList.add( 'dark' );
+        } else {
+            document.documentElement.classList.add( 'light' );
+            document.documentElement.classList.remove( 'dark' );
+            theme === 'light_mode';
+        }
+    }
+    loadTheme();
+
+    setTimeout( () => {
+        document.querySelector( 'body' ).classList.add( 'loaded' );
+    }, 500 );
+
+    function changeTheme () {
+        theme = document.getElementById( 'theme-select' ).value;
+        localStorage.setItem( 'theme', theme );
+        loadTheme();
+    }
+</script>
+
 <div class="nav-placeholder"></div>
 
 <div class="nav-top-bar">