Animate dark mode

static/src/js/darkmode.js

@@ -30,4 +30,8 @@ window.addEventListener("load", () => {
   darkModeToggle.addEventListener("click", () => {
     handleDarkMode(window.localStorage.getItem(STORAGE_KEY) !== "true");
   });
+
+  window.setTimeout(() => {
+    body.classList.add("dark-mode-animate");
+  }, 1000);
 });

static/src/scss/_mixins.scss

@@ -1,4 +1,10 @@
 @mixin dark-mode {
+  // Ensure animations aren't for the initial transition
+  body.dark-mode-animate & {
+    transition-duration: 0.5s;
+    transition-property: color, background-color;
+  }
+
   body.dark-mode & {
     @content;
   }

static/src/scss/_navbar.scss

@@ -8,7 +8,7 @@
 }
 
 #dark-mode-toggle i {
-  transition: transform 0.3s;
+  transition: transform 0.5s !important;
 
   @include dark-mode {
     transform: rotate(180deg);