@scalar/use-hooks 0.1.13 → 0.1.15

package/dist/useColorMode/useColorMode.d.ts

@@ -3,10 +3,17 @@ import type { ColorMode, DarkLightMode, UseColorModeOptions } from './types';
  * A composable hook that provides color mode (dark/light) functionality.
  */
 export declare function useColorMode(opts?: UseColorModeOptions): {
-    colorMode: import("vue").ComputedRef<ColorMode>;
-    darkLightMode: import("vue").ComputedRef<DarkLightMode>;
+    /** The current color mode (writable). */
+    colorMode: import("vue").WritableComputedRef<ColorMode, ColorMode>;
+    /** The computed dark/light mode (writable). */
+    darkLightMode: import("vue").WritableComputedRef<DarkLightMode, DarkLightMode>;
+    /** Whether the current color mode is dark (writable). */
+    isDarkMode: import("vue").WritableComputedRef<boolean, boolean>;
+    /** Toggles the color mode between light and dark. */
     toggleColorMode: () => void;
+    /** Sets the color mode to the specified value. */
     setColorMode: (value: ColorMode) => void;
+    /** Gets the system mode preference. */
     getSystemModePreference: () => DarkLightMode;
 };
 //# 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":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAS5E;;GAEG;AACH,wBAAgB,YAAY,CAAC,IAAI,GAAE,mBAAwB;;;;0BAc5B,SAAS;mCAOF,aAAa;EAqElD"}
+{"version":3,"file":"useColorMode.d.ts","sourceRoot":"","sources":["../../src/useColorMode/useColorMode.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAS5E;;GAEG;AACH,wBAAgB,YAAY,CAAC,IAAI,GAAE,mBAAwB;IA4FvD,yCAAyC;;IAKzC,+CAA+C;;IAE/C,yDAAyD;;IAEzD,qDAAqD;;IAErD,kDAAkD;0BAzFvB,SAAS;IA2FpC,uCAAuC;mCApFL,aAAa;EAuFlD"}

package/dist/useColorMode/useColorMode.js

@@ -1,44 +1,60 @@
-import { ref as w, computed as a, watch as y, onMounted as M, onUnmounted as h } from "vue";
+import { ref as y, computed as a, watch as M, onMounted as h, onUnmounted as g } from "vue";
 import { z as p } from "zod";
-const o = w("dark"), v = p.enum(["dark", "light", "system"]).optional().catch(void 0);
-function C(s = {}) {
-  var i;
-  const { initialColorMode: c = "system", overrideColorMode: l } = s;
-  function u() {
+const o = y("dark"), v = p.enum(["dark", "light", "system"]).optional().catch(void 0);
+function L(c = {}) {
+  var s;
+  const { initialColorMode: l = "system", overrideColorMode: u } = c;
+  function m() {
     var e;
-    o.value = n.value === "dark" ? "light" : "dark", !(typeof window > "u") && ((e = window == null ? void 0 : window.localStorage) == null || e.setItem("colorMode", o.value));
+    o.value = r.value === "dark" ? "light" : "dark", !(typeof window > "u") && ((e = window == null ? void 0 : window.localStorage) == null || e.setItem("colorMode", o.value));
   }
-  function m(e) {
+  function d(e) {
     var t;
     o.value = e, !(typeof window > "u") && ((t = window == null ? void 0 : window.localStorage) == null || t.setItem("colorMode", o.value));
   }
-  function d() {
+  function n() {
     var e;
     return typeof window > "u" ? "light" : typeof (window == null ? void 0 : window.matchMedia) != "function" || (e = window == null ? void 0 : window.matchMedia("(prefers-color-scheme: dark)")) != null && e.matches ? "dark" : "light";
   }
-  const n = a(() => o.value === "system" ? d() : o.value);
-  function r(e) {
+  const r = a({
+    get: () => o.value === "system" ? n() : o.value,
+    set: d
+  }), f = a({
+    get: () => r.value === "dark",
+    set: (e) => d(e ? "dark" : "light")
+  });
+  function i(e) {
     if (typeof document > "u" || typeof window > "u") return;
-    (l ?? (e === "system" ? d() : e)) === "dark" ? (document.body.classList.add("dark-mode"), document.body.classList.remove("light-mode")) : (document.body.classList.add("light-mode"), document.body.classList.remove("dark-mode"));
+    (u ?? (e === "system" ? n() : e)) === "dark" ? (document.body.classList.add("dark-mode"), document.body.classList.remove("light-mode")) : (document.body.classList.add("light-mode"), document.body.classList.remove("dark-mode"));
   }
-  const f = v.parse(
-    typeof window < "u" ? (i = window == null ? void 0 : window.localStorage) == null ? void 0 : i.getItem("colorMode") : "system"
+  const w = v.parse(
+    typeof window < "u" ? (s = window == null ? void 0 : window.localStorage) == null ? void 0 : s.getItem("colorMode") : "system"
   );
-  return o.value = f ?? c, y(o, r, { immediate: !0 }), M(() => {
+  return o.value = w ?? l, M(o, i, { immediate: !0 }), h(() => {
     if (typeof window < "u" && typeof (window == null ? void 0 : window.matchMedia) == "function") {
-      const e = window.matchMedia("(prefers-color-scheme: dark)"), t = () => o.value === "system" && r("system");
-      e.addEventListener("change", t), h(() => {
+      const e = window.matchMedia("(prefers-color-scheme: dark)"), t = () => o.value === "system" && i("system");
+      e.addEventListener("change", t), g(() => {
         e.removeEventListener("change", t);
       });
     }
   }), {
-    colorMode: a(() => o.value),
-    darkLightMode: n,
-    toggleColorMode: u,
-    setColorMode: m,
-    getSystemModePreference: d
+    /** The current color mode (writable). */
+    colorMode: a({
+      get: () => o.value,
+      set: d
+    }),
+    /** The computed dark/light mode (writable). */
+    darkLightMode: r,
+    /** Whether the current color mode is dark (writable). */
+    isDarkMode: f,
+    /** Toggles the color mode between light and dark. */
+    toggleColorMode: m,
+    /** Sets the color mode to the specified value. */
+    setColorMode: d,
+    /** Gets the system mode preference. */
+    getSystemModePreference: n
   };
 }
 export {
-  C as useColorMode
+  L as useColorMode
 };

package/package.json

@@ -10,7 +10,7 @@
     "url": "git+https://github.com/scalar/scalar.git",
     "directory": "packages/use-hooks"
   },
-  "version": "0.1.13",
+  "version": "0.1.15",
   "engines": {
     "node": ">=18"
   },
@@ -42,7 +42,7 @@
     "@vueuse/core": "^10.10.0",
     "vue": "^3.5.12",
     "zod": "^3.23.8",
-    "@scalar/themes": "0.9.59",
+    "@scalar/themes": "0.9.61",
     "@scalar/use-toasts": "0.7.8"
   },
   "devDependencies": {