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>