feat: disableTransitions prop (#68)

.changeset/empty-turkeys-poke.md

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

package.json

@@ -6,7 +6,7 @@
 	"author": "Hunter Johnston <https://github.com/huntabyte>",
 	"main": "index.js",
 	"scripts": {
-		"test": "pnpm -r test",
+		"test": "pnpm -F mode-watcher test",
 		"dev": "pnpm -r --parallel dev",
 		"build": "pnpm -r build",
 		"build:packages": "pnpm -F \"./packages/**\" --parallel build",

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

@@ -32,6 +32,12 @@ export const systemPrefersMode = createSystemMode();
  * Theme colors for light and dark modes.
  */
 export const themeColors = writable<ThemeColors>(undefined);
+
+/**
+ * Whether to disable transitions when changing the mode.
+ */
+export const disableTransitions = writable(true);
+
 /**
  * Derived store that represents the current mode (`"dark"`, `"light"` or `undefined`)
  */
@@ -114,13 +120,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 +142,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,12 @@ export type ModeWatcherProps = {
 	 * @defaultValue `undefined`
 	 */
 	themeColors?: ThemeColors;
+
+	/**
+	 * Whether to disable transitions when the mode changes.
+	 *
+	 * @defaultValue `true`
+	 */
+	disableTransitions?: boolean;
 };
 ```

sites/docs/package.json

@@ -13,7 +13,6 @@
 		"preview": "vite preview",
 		"check": "pnpm build:content && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"test": "vitest",
 		"lint": "prettier --check . && eslint .",
 		"format": "prettier --write ."
 	},