add disableTransitions prop

.changeset/empty-turkeys-poke.md

@@ -0,0 +1,5 @@
+---
+"mode-watcher": minor
+---
+
+feat: `disableTransitions` prop

packages/mode-watcher/src/lib/mode-watcher.svelte

@@ -6,8 +6,10 @@
 		localStorageKey,
 		mode,
 		themeColors as themeColorsStore,
+		disableTransitions as disableTransitionsStore,
 		setInitialMode,
 	} from './mode.js';
+
 	import type { Mode, ModeWatcherProps, ThemeColors } from './types.js';
 	import { isValidMode } from './stores.js';
 
@@ -16,8 +18,10 @@
 	export let track = true;
 	export let defaultMode: Mode = 'system';
 	export let themeColors: ThemeColors = undefined;
+	export let disableTransitions = true;
 
 	themeColorsStore.set(themeColors);
+	disableTransitionsStore.set(disableTransitions);
 
 	onMount(() => {
 		const unsubscriber = mode.subscribe(() => {});

packages/mode-watcher/src/lib/mode.ts

@@ -5,6 +5,7 @@ import {
 	systemPrefersMode,
 	derivedMode,
 	themeColors,
+	disableTransitions,
 } from './stores.js';
 import type { Mode, ThemeColors } from './types.js';
 
@@ -44,4 +45,11 @@ export function setInitialMode(defaultMode: Mode, themeColors?: ThemeColors) {
 	localStorage.setItem('mode-watcher-mode', mode);
 }
 
-export { localStorageKey, userPrefersMode, systemPrefersMode, derivedMode as mode, themeColors };
+export {
+	localStorageKey,
+	userPrefersMode,
+	systemPrefersMode,
+	derivedMode as mode,
+	themeColors,
+	disableTransitions,
+};

packages/mode-watcher/src/lib/stores.ts

@@ -37,6 +37,11 @@ export const themeColors = writable<ThemeColors>(undefined);
  */
 export const derivedMode = createDerivedMode();
 
+/**
+ * Whether to disable transitions when changing the mode.
+ */
+export const disableTransitions = writable(true);
+
 // derived from: https://github.com/CaptainCodeman/svelte-web-storage
 function createUserPrefersMode() {
 	const defaultValue = 'system';
@@ -114,13 +119,13 @@ function createSystemMode() {
 
 function createDerivedMode() {
 	const { subscribe } = derived(
-		[userPrefersMode, systemPrefersMode, themeColors],
-		([$userPrefersMode, $systemPrefersMode, $themeColors]) => {
+		[userPrefersMode, systemPrefersMode, themeColors, disableTransitions],
+		([$userPrefersMode, $systemPrefersMode, $themeColors, $disableTransitions]) => {
 			if (!isBrowser) return undefined;
 
 			const derivedMode = $userPrefersMode === 'system' ? $systemPrefersMode : $userPrefersMode;
 
-			withoutTransition(() => {
+			function update() {
 				const htmlEl = document.documentElement;
 				const themeColorEl = document.querySelector('meta[name="theme-color"]');
 				if (derivedMode === 'light') {
@@ -136,7 +141,13 @@ function createDerivedMode() {
 						themeColorEl.setAttribute('content', $themeColors.dark);
 					}
 				}
-			});
+			}
+
+			if ($disableTransitions) {
+				withoutTransition(update);
+			} else {
+				update();
+			}
 
 			return derivedMode;
 		}

packages/mode-watcher/src/lib/types.ts

@@ -23,4 +23,9 @@ export type ModeWatcherProps = {
 	 * The theme colors to use for each mode.
 	 */
 	themeColors?: ThemeColors;
+
+	/**
+	 * Whether to disable transitions when updating the mode.
+	 */
+	disableTransitions?: boolean;
 };

sites/docs/content/api-reference/mode-watcher.md

@@ -81,5 +81,13 @@ export type ModeWatcherProps = {
 	 * @defaultValue `undefined`
 	 */
 	themeColors?: ThemeColors;
+
+	/**
+	 * Whether to disable transitions when the mode changes.
+	 * 
+	 * @defaultValue `true`
+	 */
+	disableTransitions?: boolean;
+
 };
 ```