From 14c1dea7a54e91e67da5669ed07666a05826363b Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Wed, 25 Dec 2024 17:39:07 +0100
Subject: [PATCH] feat: :dizzy: Animate color scheme changes

---
 app.vue | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/app.vue b/app.vue
index 0a9972f..47502a6 100644
--- a/app.vue
+++ b/app.vue
@@ -39,7 +39,14 @@ const theme = useSetting(SettingIds.Theme) as Ref<EnumSetting>;
 const colorMode = useColorMode();
 
 watch(theme.value, () => {
+    // Add theme-changing class to html to trigger transition
+    document.documentElement.classList.add("theme-changing");
     colorMode.preference = theme.value.value;
+
+    setTimeout(() => {
+        // Remove theme-changing class after transition
+        document.documentElement.classList.remove("theme-changing");
+    }, 1000);
 });
 
 useSeoMeta({
@@ -87,4 +94,9 @@ useCacheRefresh(client);
 body {
     font-family: Inter, sans-serif;
 }
-</style>
\ No newline at end of file
+
+html.theme-changing * {
+    /* Stroke and fill aren't animatable */
+    transition: background 1s ease, border 1s ease, color 1s ease, box-shadow 1s ease;
+}
+</style>