@scalar/use-hooks 0.4.6 → 0.4.7

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @scalar/use-hooks
 
+## 0.4.7
+
+### Patch Changes
+
+- [#9540](https://github.com/scalar/scalar/pull/9540): Fix an SSR hydration mismatch in the color-mode toggle: the system preference is now resolved after mount so the first client render matches the server.
+
 ## 0.4.6
 
 ## 0.4.5

package/dist/useColorMode/useColorMode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useColorMode.d.ts","sourceRoot":"","sources":["../../src/useColorMode/useColorMode.ts"],"names":[],"mappings":"AAOA,2BAA2B;AAC3B,KAAK,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;AAE5C,+BAA+B;AAC/B,KAAK,aAAa,GAAG,OAAO,GAAG,MAAM,CAAA;AAErC;;GAEG;AACH,wBAAgB,YAAY,CAC1B,IAAI,GAAE;IACJ,oCAAoC;IACpC,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,8BAA8B;IAC9B,iBAAiB,CAAC,EAAE,SAAS,CAAA;CACzB;IA6FJ,yCAAyC;;IAKzC,+CAA+C;;IAE/C,yDAAyD;;IAEzD,qDAAqD;;IAErD,kDAAkD;0BAvFvB,SAAS;IAyFpC,uCAAuC;mCAhFL,aAAa;EAmFlD"}
+{"version":3,"file":"useColorMode.d.ts","sourceRoot":"","sources":["../../src/useColorMode/useColorMode.ts"],"names":[],"mappings":"AAmBA,2BAA2B;AAC3B,KAAK,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;AAE5C,+BAA+B;AAC/B,KAAK,aAAa,GAAG,OAAO,GAAG,MAAM,CAAA;AAErC;;GAEG;AACH,wBAAgB,YAAY,CAC1B,IAAI,GAAE;IACJ,oCAAoC;IACpC,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,8BAA8B;IAC9B,iBAAiB,CAAC,EAAE,SAAS,CAAA;CACzB;IAsGJ,yCAAyC;;IAKzC,+CAA+C;;IAE/C,yDAAyD;;IAEzD,qDAAqD;;IAErD,kDAAkD;0BAhGvB,SAAS;IAkGpC,uCAAuC;mCAzFL,aAAa;EA4FlD"}

package/dist/useColorMode/useColorMode.js

@@ -1,6 +1,17 @@
 import { literal, union, validate } from '@scalar/validation';
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 const colorMode = ref('dark');
+/**
+ * Reactive snapshot of the system preference, shared across every `useColorMode` instance.
+ *
+ * It defaults to `'light'` so the first client render matches the server, where
+ * `window`/`matchMedia` do not exist. We resolve the real value in `onMounted` to avoid a
+ * hydration mismatch in anything bound to the color mode (for example the dark-mode toggle).
+ *
+ * It lives at module scope (like `colorMode`) so all instances agree on a single value instead
+ * of each holding its own copy that resolves at a different mount time.
+ */
+const systemPreference = ref('light');
 const colorModeSchema = union([literal('system'), literal('dark'), literal('light')]);
 /**
  * A composable hook that provides color mode (dark/light) functionality.
@@ -37,7 +48,7 @@ export function useColorMode(opts = {}) {
     }
     /** Writable computed ref for dark/light mode with system preference applied */
     const darkLightMode = computed({
-        get: () => (colorMode.value === 'system' ? getSystemModePreference() : colorMode.value),
+        get: () => (colorMode.value === 'system' ? systemPreference.value : colorMode.value),
         set: setColorMode,
     });
     /** Writable computed ref for whether the current color mode is dark */
@@ -46,11 +57,13 @@ export function useColorMode(opts = {}) {
         set: (value) => setColorMode(value ? 'dark' : 'light'),
     });
     /** Applies the appropriate color mode class to the body. */
-    function applyColorMode(mode) {
+    function applyColorMode() {
         if (typeof document === 'undefined' || typeof window === 'undefined') {
             return;
         }
-        const classMode = overrideColorMode ?? (mode === 'system' ? getSystemModePreference() : mode);
+        // Read from the deferred `systemPreference` ref (not `getSystemModePreference()` directly) so
+        // the body class agrees with `darkLightMode`/the toggle before `onMounted` resolves the real value.
+        const classMode = overrideColorMode ?? (colorMode.value === 'system' ? systemPreference.value : colorMode.value);
         if (classMode === 'dark') {
             document.body.classList.add('dark-mode');
             document.body.classList.remove('light-mode');
@@ -66,12 +79,18 @@ export function useColorMode(opts = {}) {
     const storedValue = typeof window === 'undefined' ? 'system' : window?.localStorage?.getItem('colorMode');
     const savedColorMode = validate(colorModeSchema, storedValue) ? storedValue : null;
     colorMode.value = overrideColorMode ?? savedColorMode ?? initialColorMode;
-    // Watch for colorMode changes and update the body class
-    watch(colorMode, applyColorMode, { immediate: true });
-    const handleChange = () => colorMode.value === 'system' && applyColorMode('system');
+    // Watch for color mode or system preference changes and update the body class. Watching
+    // `systemPreference` means resolving it in `onMounted` (or an OS theme change) re-applies the class.
+    watch([colorMode, systemPreference], applyColorMode, { immediate: true });
+    const handleChange = () => {
+        systemPreference.value = getSystemModePreference();
+    };
     const mediaQuery = ref(null);
     // Listen to system preference changes
     onMounted(() => {
+        // Now that we are on the client, resolve the real system preference so the
+        // color mode updates after hydration instead of mismatching the server.
+        systemPreference.value = getSystemModePreference();
         if (typeof window !== 'undefined' && typeof window?.matchMedia === 'function') {
             mediaQuery.value = window.matchMedia('(prefers-color-scheme: dark)');
             mediaQuery.value?.addEventListener('change', handleChange);

package/package.json

@@ -10,7 +10,7 @@
     "url": "git+https://github.com/scalar/scalar.git",
     "directory": "packages/use-hooks"
   },
-  "version": "0.4.6",
+  "version": "0.4.7",
   "engines": {
     "node": ">=22"
   },