@scalar/use-hooks 0.4.10 → 0.4.11

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @scalar/use-hooks
 
+## 0.4.11
+
+### Patch Changes
+
+- [#10058](https://github.com/scalar/scalar/pull/10058): feat(helpers): add applyColorMode and the DarkLightMode type, and use them from useColorMode
+
 ## 0.4.10
 
 ### Patch Changes

package/dist/useColorMode/index.d.ts

@@ -1,2 +1,3 @@
+export type { ColorMode, DarkLightMode } from './useColorMode.js';
 export { useColorMode } from './useColorMode.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/useColorMode/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/useColorMode/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/useColorMode/useColorMode.d.ts

@@ -1,7 +1,7 @@
+import { type DarkLightMode } from '@scalar/helpers/theme/color-mode';
 /** Possible color modes */
-type ColorMode = 'light' | 'dark' | 'system';
-/** Specific dark/light mode */
-type DarkLightMode = 'light' | 'dark';
+export type ColorMode = 'light' | 'dark' | 'system';
+export type { DarkLightMode };
 /**
  * A composable hook that provides color mode (dark/light) functionality.
  */
@@ -24,5 +24,4 @@ export declare function useColorMode(opts?: {
     /** Gets the system mode preference. */
     getSystemModePreference: () => DarkLightMode;
 };
-export {};
 //# sourceMappingURL=useColorMode.d.ts.map

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"useColorMode.d.ts","sourceRoot":"","sources":["../../src/useColorMode/useColorMode.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAsC,MAAM,kCAAkC,CAAA;AAoBzG,2BAA2B;AAC3B,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;AAEnD,YAAY,EAAE,aAAa,EAAE,CAAA;AAE7B;;GAEG;AACH,wBAAgB,YAAY,CAC1B,IAAI,GAAE;IACJ,oCAAoC;IACpC,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,8BAA8B;IAC9B,iBAAiB,CAAC,EAAE,SAAS,CAAA;CACzB;IA0FJ,yCAAyC;;IAKzC,+CAA+C;;IAE/C,yDAAyD;;IAEzD,qDAAqD;;IAErD,kDAAkD;0BApFvB,SAAS;IAsFpC,uCAAuC;mCA7EL,aAAa;EAgFlD"}

package/dist/useColorMode/useColorMode.js

@@ -1,3 +1,4 @@
+import { applyColorMode, getSystemColorMode } from '@scalar/helpers/theme/color-mode';
 import { literal, union, validate } from '@scalar/validation';
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 const colorMode = ref('dark');
@@ -38,13 +39,7 @@ export function useColorMode(opts = {}) {
     }
     /** Gets the system mode preference. */
     function getSystemModePreference() {
-        if (typeof window === 'undefined') {
-            return 'light';
-        }
-        if (typeof window?.matchMedia !== 'function') {
-            return 'dark';
-        }
-        return window?.matchMedia('(prefers-color-scheme: dark)')?.matches ? 'dark' : 'light';
+        return getSystemColorMode();
     }
     /** Writable computed ref for dark/light mode with system preference applied */
     const darkLightMode = computed({
@@ -57,21 +52,15 @@ export function useColorMode(opts = {}) {
         set: (value) => setColorMode(value ? 'dark' : 'light'),
     });
     /** Applies the appropriate color mode class to the body. */
-    function applyColorMode() {
+    function applyBodyColorMode() {
         if (typeof document === 'undefined' || typeof window === 'undefined') {
             return;
         }
         // 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');
-        }
-        else {
-            document.body.classList.add('light-mode');
-            document.body.classList.remove('dark-mode');
-        }
+        // An `overrideColorMode` of `system` reaches here unresolved, and has always rendered as light.
+        applyColorMode(classMode === 'dark' ? 'dark' : 'light');
     }
     // Priority: overrideColorMode -> localStorage -> initialColorMode
     // Without `window` (SSR/SSG), there is no storage — treat preference as `system` so we do not
@@ -81,7 +70,7 @@ export function useColorMode(opts = {}) {
     colorMode.value = overrideColorMode ?? savedColorMode ?? initialColorMode;
     // 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 });
+    watch([colorMode, systemPreference], applyBodyColorMode, { immediate: true });
     const handleChange = () => {
         systemPreference.value = getSystemModePreference();
     };

package/package.json

@@ -10,7 +10,7 @@
     "url": "git+https://github.com/scalar/scalar.git",
     "directory": "packages/use-hooks"
   },
-  "version": "0.4.10",
+  "version": "0.4.11",
   "engines": {
     "node": ">=22"
   },
@@ -46,8 +46,9 @@
     "cva": "1.0.0-beta.4",
     "tailwind-merge": "3.5.0",
     "vue": "^3.5.40",
-    "@scalar/use-toasts": "0.10.5",
-    "@scalar/validation": "0.6.3"
+    "@scalar/helpers": "0.11.3",
+    "@scalar/validation": "0.6.3",
+    "@scalar/use-toasts": "0.10.5"
   },
   "devDependencies": {
     "@vue/test-utils": "2.4.11",