@maz-ui/themes 4.1.4 → 4.1.5

package/dist/composables/useTheme.js

@@ -1,10 +1,10 @@
-import { ref as d, onMounted as k, computed as s, toValue as w, watch as y, watchEffect as T, inject as C, getCurrentInstance as S } from "vue";
+import { ref as f, onMounted as k, computed as s, toValue as w, watch as y, watchEffect as T, inject as C, getCurrentInstance as M } from "vue";
 import { setCookie as z } from "../utils/cookie-storage.js";
 import { generateCriticalCSS as E, generateFullCSS as L, injectCSS as p, CSS_IDS as v } from "../utils/css-generator.js";
-import { getColorMode as x, isSystemPrefersDark as D } from "../utils/get-color-mode.js";
-import { getPreset as I } from "../utils/get-preset.js";
-import { mergePresets as O } from "../utils/preset-merger.js";
-function $() {
+import { getColorMode as x, isSystemPrefersDark as I } from "../utils/get-color-mode.js";
+import { getPreset as O } from "../utils/get-preset.js";
+import { mergePresets as $ } from "../utils/preset-merger.js";
+function D() {
   return typeof document > "u" || typeof globalThis.window > "u";
 }
 function F() {
@@ -16,12 +16,12 @@ function R(e) {
 function U(e, o, r = {}) {
   const {
     internalWindow: u = F() ? globalThis : void 0,
-    ...l
+    ...c
   } = r;
   let n;
-  const c = d(!1);
+  const d = f(!1);
   k(() => {
-    c.value = (u && "MutationObserver" in u) ?? !1;
+    d.value = (u && "MutationObserver" in u) ?? !1;
   });
   const m = () => {
     n && (n.disconnect(), n = void 0);
@@ -32,24 +32,24 @@ function U(e, o, r = {}) {
   }), P = y(
     b,
     (a) => {
-      m(), c.value && a.size && (n = new MutationObserver(o), a.forEach((i) => n.observe(i, l)));
+      m(), d.value && a.size && (n = new MutationObserver(o), a.forEach((i) => n.observe(i, c)));
     },
     { immediate: !0, flush: "post" }
   );
   return {
-    isSupported: c,
+    isSupported: d,
     stop: () => {
       P(), m();
     },
     takeRecords: () => n?.takeRecords()
   };
 }
-const t = d();
-function M(e) {
+const t = f();
+function S(e) {
   typeof document > "u" || !e || e.darkModeStrategy === "media" || e.mode === "light" || (e.isDark ? document.documentElement.classList.add("dark") : document.documentElement.classList.remove("dark"));
 }
 function j() {
-  const e = S()?.appContext.app;
+  const e = M()?.appContext.app;
   e && t.value && (e.config.globalProperties.$mazThemeState = t.value);
 }
 function N(e) {
@@ -64,7 +64,7 @@ function N(e) {
     });
     return;
   }
-  const o = x(e.colorMode), r = o === "auto" ? D() : o === "dark";
+  const o = x(e.colorMode), r = o === "auto" ? I() : o === "dark";
   g({
     currentPreset: e.currentPreset,
     colorMode: o,
@@ -82,45 +82,48 @@ function g(e) {
     o.addEventListener("change", r), r();
   }
   T(() => {
-    t.value && (M(t.value), j());
+    t.value && (S(t.value), j());
   });
 }
 const W = s({
   get: () => t.value?.colorMode,
-  set: (e) => f(e)
+  set: (e) => l(e)
 }), _ = s(() => t.value?.isDark ?? !1), A = s(() => t.value?.strategy), G = s(() => t.value?.mode), Q = s(() => t.value?.darkModeStrategy), h = s(() => t.value?.currentPreset), V = s(() => h.value?.name);
 async function Y(e) {
   if (!t.value)
     return;
-  const o = typeof e == "string" ? await I(e) : e;
+  const o = typeof e == "string" ? await O(e) : e;
   if (!o || !t.value.currentPreset) {
     console.error("[@maz-ui/themes] No preset found - If you are using the buildtime strategy, you must provide a complete preset");
     return;
   }
-  const r = "name" in o && o.name !== t.value.currentPreset.name ? o : O(t.value.currentPreset, o);
+  const r = "name" in o && o.name !== t.value.currentPreset.name ? o : $(t.value.currentPreset, o);
   if (t.value.currentPreset = r, t.value.strategy === "runtime" || t.value.strategy === "hybrid") {
     const u = {
       mode: t.value.mode,
       darkSelectorStrategy: t.value.darkModeStrategy,
       prefix: "maz"
-    }, l = E(r, u), n = L(r, u);
-    p(v.CRITICAL, l), p(v.FULL, n);
+    }, c = E(r, u), n = L(r, u);
+    p(v.CRITICAL, c), p(v.FULL, n);
   }
 }
-function f(e) {
-  t.value && (t.value.colorMode = e, e === "auto" ? t.value.isDark = typeof globalThis.window < "u" && globalThis.matchMedia("(prefers-color-scheme: dark)").matches : t.value.isDark = e === "dark", M(t.value), z("maz-color-mode", e));
+function l(e, o = !0) {
+  t.value && (t.value.colorMode = e, e === "auto" ? t.value.isDark = typeof globalThis.window < "u" && globalThis.matchMedia("(prefers-color-scheme: dark)").matches : t.value.isDark = e === "dark", o && S(t.value), z("maz-color-mode", e));
 }
 function q() {
-  t.value && f(t.value.isDark ? "light" : "dark");
+  t.value && l(t.value.isDark ? "light" : "dark");
 }
 function oe() {
-  const e = d();
+  const e = f();
   k(() => {
     e.value = document.documentElement;
   }), U(
     e,
     () => {
-      !t.value || $() || (t.value.isDark = document.documentElement.classList.contains("dark"));
+      if (D() || !t.value)
+        return;
+      const r = document.documentElement.classList.contains("dark") ? "dark" : "light";
+      t.value.colorMode !== r && l(r, !1);
     },
     {
       attributes: !0
@@ -131,7 +134,7 @@ function oe() {
     if (o = C("mazThemeState", void 0), !o)
       throw new Error("mazThemeState not found");
   } catch {
-    const r = S();
+    const r = M();
     r?.appContext?.app?.config?.globalProperties && (o = r.appContext.app.config.globalProperties.$mazThemeState);
   }
   if (o && (t.value ? (typeof document > "u" || typeof globalThis.window > "u") && (t.value = {
@@ -149,7 +152,7 @@ function oe() {
     isDark: _,
     strategy: A,
     updateTheme: Y,
-    setColorMode: f,
+    setColorMode: l,
     toggleDarkMode: q,
     mode: G,
     darkModeStrategy: Q,

package/dist/types/composables/useTheme.d.ts

@@ -1,7 +1,7 @@
 import { ColorMode, DarkModeStrategy, Strategy, ThemeMode, ThemePreset, ThemePresetName, ThemePresetOverrides, ThemeState } from '../types';
 export declare function initThemeState(initialState: ThemeState): void;
 declare function updateTheme(preset: ThemePreset | ThemePresetOverrides | ThemePresetName): Promise<void>;
-declare function setColorMode(colorMode: ColorMode): void;
+declare function setColorMode(colorMode: ColorMode, updateClass?: boolean): void;
 declare function toggleDarkMode(): void;
 export declare function useTheme(): {
     presetName: import('vue').ComputedRef<string | undefined>;

package/dist/types/composables/useTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../../src/composables/useTheme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,gBAAgB,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,eAAe,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AA8DhJ,wBAAgB,cAAc,CAAC,YAAY,EAAE,UAAU,QAsBtD;AAcD,iBAAe,WAAW,CAAC,MAAM,EAAE,WAAW,GAAG,oBAAoB,GAAG,eAAe,iBA8BtF;AAED,iBAAS,YAAY,CAAC,SAAS,EAAE,SAAS,QAgBzC;AAED,iBAAS,cAAc,SAKtB;AAED,wBAAgB,QAAQ;;;;;;;;;;;EAuEvB"}
+{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../../src/composables/useTheme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,gBAAgB,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAW,EAAE,eAAe,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AA8DhJ,wBAAgB,cAAc,CAAC,YAAY,EAAE,UAAU,QAsBtD;AAcD,iBAAe,WAAW,CAAC,MAAM,EAAE,WAAW,GAAG,oBAAoB,GAAG,eAAe,iBA8BtF;AAED,iBAAS,YAAY,CAAC,SAAS,EAAE,SAAS,EAAE,WAAW,UAAO,QAkB7D;AAED,iBAAS,cAAc,SAKtB;AAED,wBAAgB,QAAQ;;;;;;;;;;;EA4EvB"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maz-ui/themes",
   "type": "module",
-  "version": "4.1.4",
+  "version": "4.1.5",
   "description": "Theme system for Maz-UI with TypeScript support and CSS variables",
   "author": "Louis Mazel <me@loicmazuel.com>",
   "license": "MIT",
@@ -102,5 +102,5 @@
   "lint-staged": {
     "*.{js,ts,vue,mjs,mts,cjs,md,yml,json}": "cross-env NODE_ENV=production eslint --fix"
   },
-  "gitHead": "47076f614176b9d1f95f83e797593a8264148a9b"
+  "gitHead": "37294d421e5683b80ddc8f8fd062ecafe240d9ed"
 }