diff --git a/src/lib/DarkMode/transition.svelte.ts b/src/lib/DarkMode/transition.svelte.ts
index ef4232178..4f2df516e 100644
--- a/src/lib/DarkMode/transition.svelte.ts
+++ b/src/lib/DarkMode/transition.svelte.ts
@@ -1,31 +1,22 @@
 import { browser } from '$app/environment';
 import { on } from 'svelte/events';
+import { prefersReducedMotion } from 'svelte/motion';
 
 /**
  * check if the browser supports appearance transition
  */
 export class CheckTransitions {
-	#isReduced = $state(false);
 	#isViewTransitionAvailable = $state(false);
-	#mediaQuery: MediaQueryList | undefined = undefined;
 
-	#isAppearanceTransition = $derived(this.#isViewTransitionAvailable && !this.#isReduced);
 	constructor() {
 		if (!browser) {
 			return;
 		}
 
 		this.#isViewTransitionAvailable = document.startViewTransition != null;
-		this.#mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
-		this.#isReduced = this.#mediaQuery.matches;
-
-		on(this.#mediaQuery, 'change', (_event) => {
-			const event = _event;
-			this.#isReduced = event.matches;
-		});
 	}
 
 	get isAppearanceTransition() {
-		return this.#isAppearanceTransition;
+		return !prefersReducedMotion.current && this.#isViewTransitionAvailable;
 	}
 }