mode-watcher - npm Package Compare versions

Comparing version 0.2.2 to 0.3.0

dist/mode.d.ts

@@ -1,2 +0,2 @@
-import { localStorageKey, userPrefersMode, systemPrefersMode, derivedMode, themeColors } from './stores.js';
+import { localStorageKey, userPrefersMode, systemPrefersMode, derivedMode, themeColors, disableTransitions } from './stores.js';
 import type { Mode, ThemeColors } from './types.js';
@@ -11,2 +11,2 @@ /** Toggle between light and dark mode */
 export declare function setInitialMode(defaultMode: Mode, themeColors?: ThemeColors): void;
-export { localStorageKey, userPrefersMode, systemPrefersMode, derivedMode as mode, themeColors };
+export { localStorageKey, userPrefersMode, systemPrefersMode, derivedMode as mode, themeColors, disableTransitions, };

dist/mode.js

 import { get } from 'svelte/store';
-import { localStorageKey, userPrefersMode, systemPrefersMode, derivedMode, themeColors, } from './stores.js';
+import { localStorageKey, userPrefersMode, systemPrefersMode, derivedMode, themeColors, disableTransitions, } from './stores.js';
 /** Toggle between light and dark mode */
@@ -31,2 +31,2 @@ export function toggleMode() {
 }
-export { localStorageKey, userPrefersMode, systemPrefersMode, derivedMode as mode, themeColors };
+export { localStorageKey, userPrefersMode, systemPrefersMode, derivedMode as mode, themeColors, disableTransitions, };

dist/stores.d.ts

@@ -28,2 +28,6 @@ /// <reference types="svelte" />
 /**
+ * Whether to disable transitions when changing the mode.
+ */
+export declare const disableTransitions: import("svelte/store").Writable<boolean>;
+/**
  * Derived store that represents the current mode (`"dark"`, `"light"` or `undefined`)
@@ -30,0 +34,0 @@ */

dist/stores.js

@@ -31,2 +31,6 @@ import { writable, derived } from 'svelte/store';
 /**
+ * Whether to disable transitions when changing the mode.
+ */
+export const disableTransitions = writable(true);
+/**
  * Derived store that represents the current mode (`"dark"`, `"light"` or `undefined`)
@@ -104,7 +108,7 @@ */
 function createDerivedMode() {
-    const { subscribe } = derived([userPrefersMode, systemPrefersMode, themeColors], ([$userPrefersMode, $systemPrefersMode, $themeColors]) => {
+    const { subscribe } = derived([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;
@@ -126,3 +130,9 @@ const themeColorEl = document.querySelector('meta[name="theme-color"]');
             }
-        });
+        }
+        if ($disableTransitions) {
+            withoutTransition(update);
+        }
+        else {
+            update();
+        }
         return derivedMode;
@@ -129,0 +139,0 @@ });

dist/types.d.ts

@@ -25,2 +25,6 @@ import type { modes } from './stores.js';
     themeColors?: ThemeColors;
+    /**
+     * Whether to disable transitions when updating the mode.
+     */
+    disableTransitions?: boolean;
 };

package.json

 {
   "name": "mode-watcher",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "SSR-friendly light and dark mode for SvelteKit",
@@ -5,0 +5,0 @@ "license": "MIT",

No alert changes

Improved metrics

Total package byte prevSize

20385

increased by3.87%

Lines of code

322

increased by5.92%

No dependency changes