diff --git a/.changeset/empty-turkeys-poke.md b/.changeset/empty-turkeys-poke.md new file mode 100644 index 0000000..4160a05 --- /dev/null +++ b/.changeset/empty-turkeys-poke.md @@ -0,0 +1,5 @@ +--- +"mode-watcher": minor +--- + +feat: `disableTransitions` prop diff --git a/package.json b/package.json index 4f85919..9be175d 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "author": "Hunter Johnston ", "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", diff --git a/packages/mode-watcher/src/lib/mode-watcher.svelte b/packages/mode-watcher/src/lib/mode-watcher.svelte index e5034a0..e625591 100644 --- a/packages/mode-watcher/src/lib/mode-watcher.svelte +++ b/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(() => {}); diff --git a/packages/mode-watcher/src/lib/mode.ts b/packages/mode-watcher/src/lib/mode.ts index 68d9eb4..ecc0e44 100644 --- a/packages/mode-watcher/src/lib/mode.ts +++ b/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, +}; diff --git a/packages/mode-watcher/src/lib/stores.ts b/packages/mode-watcher/src/lib/stores.ts index a0987df..0b21d5d 100644 --- a/packages/mode-watcher/src/lib/stores.ts +++ b/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(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; } diff --git a/packages/mode-watcher/src/lib/types.ts b/packages/mode-watcher/src/lib/types.ts index f036294..3925382 100644 --- a/packages/mode-watcher/src/lib/types.ts +++ b/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; }; diff --git a/sites/docs/content/api-reference/mode-watcher.md b/sites/docs/content/api-reference/mode-watcher.md index 8c3f7f0..fb0d9e0 100644 --- a/sites/docs/content/api-reference/mode-watcher.md +++ b/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; }; ``` diff --git a/sites/docs/package.json b/sites/docs/package.json index be0e6e3..6392092 100644 --- a/sites/docs/package.json +++ b/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 ." },