From 366d1352853a0d43ab927a89d19e44b267f6fa60 Mon Sep 17 00:00:00 2001
From: Jake Howard <git@theorangeone.net>
Date: Sat, 20 Aug 2022 15:55:50 +0100
Subject: [PATCH] Animate dark mode

---
 static/src/js/darkmode.js    | 4 ++++
 static/src/scss/_mixins.scss | 6 ++++++
 static/src/scss/_navbar.scss | 2 +-
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/static/src/js/darkmode.js b/static/src/js/darkmode.js
index 1b8a238..d497d8e 100644
--- a/static/src/js/darkmode.js
+++ b/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);
 });
diff --git a/static/src/scss/_mixins.scss b/static/src/scss/_mixins.scss
index bc51539..4893714 100644
--- a/static/src/scss/_mixins.scss
+++ b/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;
   }
diff --git a/static/src/scss/_navbar.scss b/static/src/scss/_navbar.scss
index 51e7980..09959e3 100644
--- a/static/src/scss/_navbar.scss
+++ b/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);