@maz-ui/themes 4.1.7-beta.3 → 4.1.7-beta.5

package/README.md

@@ -23,14 +23,15 @@ npm install @maz-ui/themes
 ### 1. Plugin installation
 
 ```typescript
-import { MazUiTheme } from '@maz-ui/themes'
 // main.ts
+import { MazUiTheme } from '@maz-ui/themes/plugin'
+import { mazUi } from '@maz-ui/themes/presets/mazUi'
 import { createApp } from 'vue'
 
 const app = createApp(App)
 
 app.use(MazUiTheme, {
-  preset: 'maz-ui',
+  preset: mazUi,
   strategy: 'hybrid',
   darkModeStrategy: 'class'
 })
@@ -40,9 +41,9 @@ app.use(MazUiTheme, {
 
 ```vue
 <script setup>
-import { useMazTheme } from '@maz-ui/themes'
+import { useTheme } from '@maz-ui/themes'
 
-const { toggleDarkMode, isDark } = useMazTheme()
+const { toggleDarkMode, isDark } = useTheme()
 </script>
 
 <template>
@@ -59,28 +60,28 @@ const { toggleDarkMode, isDark } = useMazTheme()
 
 ## Available presets
 
-### Default (Shadcn-like)
+### Default
 
 ```typescript
-import { mazUi } from '@maz-ui/themes'
+import { mazUi } from '@maz-ui/themes/presets/mazUi'
 ```
 
-### Dark
+### Pristine
 
 ```typescript
-import { dark } from '@maz-ui/themes'
+import { pristine } from '@maz-ui/themes/presets/pristine'
 ```
 
 ### Ocean
 
 ```typescript
-import { ocean } from '@maz-ui/themes'
+import { ocean } from '@maz-ui/themes/presets/ocean'
 ```
 
 ### Obsidian
 
 ```typescript
-import { obsidian } from '@maz-ui/themes'
+import { obsidian } from '@maz-ui/themes/presets/obsidian'
 ```
 
 ## Creating custom presets
@@ -110,15 +111,18 @@ const myPreset = definePreset({
 ## Composable API
 
 ```typescript
+import { useTheme } from '@maz-ui/themes'
+
 const {
-  currentPreset, // Ref<ThemePreset>
+  preset, // ComputedRef<ThemePreset>
+  presetName, // ComputedRef<string>
   colorMode, // Ref<'light' | 'dark' | 'auto'>
-  isDark, // Ref<boolean>
-  strategy, // Ref<'runtime' | 'build' | 'hybrid'>
+  isDark, // ComputedRef<boolean>
+  strategy, // ComputedRef<'runtime' | 'build' | 'hybrid'>
   updateTheme, // (preset: ThemePreset | ThemePresetName | ThemePresetOverrides) => void
   setColorMode, // (mode: 'light' | 'dark' | 'auto') => void
-  toggleDarkMode // () => void
-} = useMazTheme()
+  toggleDarkMode, // () => void
+} = useTheme()
 ```
 
 ## Strategies

package/dist/build/index.js

@@ -1,19 +1,21 @@
-import { generateCriticalCSS, generateFullCSS } from "../utils/css-generator.js";
+import { generateCSS } from "../utils/css-generator.js";
 function buildThemeCSS(options) {
   const {
     preset,
     mode = "both",
     darkSelector = "class",
     prefix = "maz",
+    darkClass = "dark",
     criticalOnly = !1
   } = options, cssOptions = {
     mode,
     darkSelectorStrategy: darkSelector,
-    prefix
-  };
+    prefix,
+    darkClass
+  }, criticalCSS = generateCSS(preset, { ...cssOptions, onlyCritical: !0 });
   if (criticalOnly)
-    return generateCriticalCSS(preset, cssOptions);
-  const criticalCSS = generateCriticalCSS(preset, cssOptions), fullCSS = generateFullCSS(preset, cssOptions);
+    return criticalCSS;
+  const fullCSS = generateCSS(preset, cssOptions);
   return `${criticalCSS}
 ${fullCSS}`;
 }
@@ -40,10 +42,10 @@ ${css}
 </style>`, styleTag;
 }
 function buildSeparateThemeFiles(preset, options = {}) {
-  const { prefix = "maz", darkSelector = "class" } = options, baseOptions = { prefix, darkSelectorStrategy: darkSelector };
+  const { prefix = "maz", darkSelector = "class", darkClass = "dark" } = options, baseOptions = { prefix, darkSelectorStrategy: darkSelector, darkClass };
   return {
-    critical: generateCriticalCSS(preset, { ...baseOptions, mode: "both" }),
-    full: generateFullCSS(preset, { ...baseOptions, mode: "both" }),
+    critical: generateCSS(preset, { ...baseOptions, mode: "both", onlyCritical: !0 }),
+    full: generateCSS(preset, { ...baseOptions, mode: "both" }),
     lightOnly: buildThemeCSS({ preset, mode: "light", ...options }),
     darkOnly: buildThemeCSS({ preset, mode: "dark", ...options })
   };

package/dist/chunks/isServer.BAlEcRRr.js

@@ -0,0 +1,6 @@
+function isServer() {
+  return typeof document > "u" || typeof globalThis.window > "u";
+}
+export {
+  isServer as i
+};

package/dist/composables/index.js

@@ -1,11 +1,10 @@
-import { initThemeState, useTheme } from "./useTheme.js";
+import "../chunks/isServer.BAlEcRRr.js";
 import "vue";
 import "../utils/cookie-storage.js";
 import "../utils/css-generator.js";
-import "../utils/get-color-mode.js";
 import "../utils/get-preset.js";
 import "../utils/preset-merger.js";
+import { useTheme } from "./useTheme.js";
 export {
-  initThemeState,
   useTheme
 };

package/dist/composables/useTheme.js

@@ -1,165 +1,107 @@
-import { ref, onMounted, computed, toValue, watch, watchEffect, inject, getCurrentInstance } from "vue";
+import { i as isServer } from "../chunks/isServer.BAlEcRRr.js";
+import { ref, computed, inject, getCurrentInstance } from "vue";
 import { setCookie } from "../utils/cookie-storage.js";
-import { generateCriticalCSS, generateFullCSS, injectCSS, CSS_IDS } from "../utils/css-generator.js";
-import { getColorMode, isSystemPrefersDark } from "../utils/get-color-mode.js";
+import { generateCSS, injectCSS, CSS_ID } from "../utils/css-generator.js";
 import { getPreset } from "../utils/get-preset.js";
 import { mergePresets } from "../utils/preset-merger.js";
-function isServer() {
-  return typeof document > "u" || typeof globalThis.window > "u";
-}
-function isClient() {
-  return typeof document < "u";
-}
-function truthyFilter(value) {
-  return !!value;
-}
-function useMutationObserver(target, callback, options = {}) {
-  const {
-    internalWindow = isClient() ? globalThis : void 0,
-    ...mutationOptions
-  } = options;
-  let observer;
-  const isSupported = ref(!1);
-  onMounted(() => {
-    isSupported.value = (internalWindow && "MutationObserver" in internalWindow) ?? !1;
-  });
-  const cleanup = () => {
-    observer && (observer.disconnect(), observer = void 0);
-  }, targets = computed(() => {
-    const value = toValue(target);
-    let element;
-    return value && "$el" in value ? element = value.$el : value && (element = value), new Set([element].filter(truthyFilter));
-  }), stopWatch = watch(
-    targets,
-    (newTargets) => {
-      cleanup(), isSupported.value && newTargets.size && (observer = new MutationObserver(callback), newTargets.forEach((el) => observer.observe(el, mutationOptions)));
-    },
-    { immediate: !0, flush: "post" }
-  );
-  return {
-    isSupported,
-    stop: () => {
-      stopWatch(), cleanup();
-    },
-    takeRecords: () => observer?.takeRecords()
-  };
-}
-const state = ref();
-function updateDocumentClass(themeState) {
-  typeof document > "u" || !themeState || themeState.darkModeStrategy === "media" || themeState.mode === "light" || (themeState.isDark ? document.documentElement.classList.add("dark") : document.documentElement.classList.remove("dark"));
-}
-function updateGlobalProperties() {
-  const app = getCurrentInstance()?.appContext.app;
-  app && state.value && (app.config.globalProperties.$mazThemeState = state.value);
-}
-function initializeThemeFromData(themeData) {
-  if (themeData.currentPreset && themeData.colorMode !== void 0) {
-    initThemeState({
-      currentPreset: themeData.currentPreset,
-      colorMode: themeData.colorMode,
-      mode: themeData.mode,
-      isDark: themeData.isDark,
-      strategy: themeData.strategy,
-      darkModeStrategy: themeData.darkModeStrategy
-    });
-    return;
-  }
-  const colorMode2 = getColorMode(themeData.colorMode), isDark2 = colorMode2 === "auto" ? isSystemPrefersDark() : colorMode2 === "dark";
-  initThemeState({
-    currentPreset: themeData.currentPreset,
-    colorMode: colorMode2,
-    mode: themeData.mode,
-    isDark: isDark2,
-    strategy: themeData.strategy,
-    darkModeStrategy: themeData.darkModeStrategy
-  });
-}
-function initThemeState(initialState) {
-  if (state.value = initialState, typeof globalThis.window < "u" && state.value.colorMode === "auto") {
-    const mediaQuery = globalThis.matchMedia("(prefers-color-scheme: dark)"), updateFromMedia = () => {
-      state.value && state.value.colorMode === "auto" && (state.value.isDark = mediaQuery.matches);
-    };
-    mediaQuery.addEventListener("change", updateFromMedia), updateFromMedia();
-  }
-  watchEffect(() => {
-    state.value && (updateDocumentClass(state.value), updateGlobalProperties());
-  });
-}
-const colorMode = computed({
-  get: () => state.value?.colorMode,
+const themeState = ref(), colorMode = computed({
+  get: () => themeState.value?.colorMode,
   set: (mode2) => setColorMode(mode2)
-}), isDark = computed(() => state.value?.isDark ?? !1), strategy = computed(() => state.value?.strategy), mode = computed(() => state.value?.mode), darkModeStrategy = computed(() => state.value?.darkModeStrategy), currentPreset = computed(() => state.value?.currentPreset), presetName = computed(() => currentPreset.value?.name);
-async function updateTheme(preset) {
-  if (!state.value)
+}), isDark = computed(() => themeState.value?.isDark || !1), strategy = computed(() => themeState.value?.strategy), mode = computed(() => themeState.value?.mode), darkModeStrategy = computed(() => themeState.value?.darkModeStrategy), preset = computed(() => themeState.value?.preset), presetName = computed(() => preset.value?.name);
+async function updateTheme(preset2) {
+  if (!themeState.value)
     return;
-  const _preset = typeof preset == "string" ? await getPreset(preset) : preset;
-  if (!_preset || !state.value.currentPreset) {
+  const _preset = typeof preset2 == "string" ? await getPreset(preset2) : preset2;
+  if (!_preset || !themeState.value.preset) {
     console.error("[@maz-ui/themes] No preset found - If you are using the buildtime strategy, you must provide a complete preset");
     return;
   }
-  const newPreset = "name" in _preset && _preset.name !== state.value.currentPreset.name ? _preset : mergePresets(state.value.currentPreset, _preset);
-  if (state.value.currentPreset = newPreset, state.value.strategy === "runtime" || state.value.strategy === "hybrid") {
+  const newPreset = "name" in _preset && _preset.name !== themeState.value.preset.name ? _preset : mergePresets(themeState.value.preset, _preset);
+  if (themeState.value.preset = newPreset, themeState.value.strategy === "runtime" || themeState.value.strategy === "hybrid") {
     const cssOptions = {
-      mode: state.value.mode,
-      darkSelectorStrategy: state.value.darkModeStrategy,
-      prefix: "maz"
-    }, criticalCSS = generateCriticalCSS(newPreset, cssOptions), fullCSS = generateFullCSS(newPreset, cssOptions);
-    injectCSS(CSS_IDS.CRITICAL, criticalCSS), injectCSS(CSS_IDS.FULL, fullCSS);
+      mode: themeState.value.mode,
+      darkSelectorStrategy: themeState.value.darkModeStrategy,
+      prefix: "maz",
+      darkClass: themeState.value.darkClass
+    }, fullCSS = generateCSS(newPreset, cssOptions);
+    injectCSS(CSS_ID, fullCSS);
   }
 }
-function setColorMode(colorMode2, updateClass = !0) {
-  state.value && (state.value.colorMode = colorMode2, colorMode2 === "auto" ? state.value.isDark = typeof globalThis.window < "u" && globalThis.matchMedia("(prefers-color-scheme: dark)").matches : state.value.isDark = colorMode2 === "dark", updateClass && updateDocumentClass(state.value), setCookie("maz-color-mode", colorMode2));
+function setColorMode(colorMode2) {
+  themeState.value && (themeState.value.colorMode = colorMode2, setCookie("maz-color-mode", colorMode2));
 }
 function toggleDarkMode() {
-  state.value && setColorMode(state.value.isDark ? "light" : "dark");
+  setColorMode(isDark.value ? "light" : "dark");
 }
-function useTheme() {
-  const htmlElement = ref();
-  onMounted(() => {
-    htmlElement.value = document.documentElement;
-  }), useMutationObserver(
-    htmlElement,
-    () => {
-      if (isServer() || !state.value)
-        return;
-      const colorMode2 = document.documentElement.classList.contains("dark") ? "dark" : "light";
-      state.value.colorMode !== colorMode2 && setColorMode(colorMode2, !1);
-    },
-    {
-      attributes: !0
-    }
-  );
-  let mazThemeState;
+function setThemeStateFromGlobalProperties() {
+  themeState.value = void 0;
   try {
-    if (mazThemeState = inject("mazThemeState", void 0), !mazThemeState)
+    const injectedState = inject("mazThemeState", void 0);
+    if (themeState.value = injectedState?.value, !themeState.value)
       throw new Error("mazThemeState not found");
   } catch {
     const instance = getCurrentInstance();
-    instance?.appContext?.app?.config?.globalProperties && (mazThemeState = instance.appContext.app.config.globalProperties.$mazThemeState);
+    instance?.appContext?.app?.config?.globalProperties && (themeState.value = instance.appContext.app.config.globalProperties.$mazThemeState.value);
   }
-  if (mazThemeState && (state.value ? (typeof document > "u" || typeof globalThis.window > "u") && (state.value = {
-    ...state.value,
-    ...mazThemeState
-  }) : initializeThemeFromData(mazThemeState)), watch(() => mazThemeState?.currentPreset, (preset) => {
-    state.value && preset && (state.value.currentPreset = preset);
-  }, {
-    once: !0
-  }), !state.value)
+}
+function useTheme() {
+  if (isServer() && (themeState.value = void 0), themeState.value || setThemeStateFromGlobalProperties(), !themeState.value)
     throw new Error("[@maz-ui/themes] You must install the MazUi or MazUiTheme plugin before using useTheme composable");
   return {
+    /**
+     * Current theme preset
+     */
+    preset,
+    /**
+     * Current theme name
+     */
     presetName,
+    /**
+     * Current color mode
+     * @description The color mode - Can be 'auto', 'dark' or 'light'
+     */
     colorMode,
+    /**
+     * Whether the current color mode is dark
+     */
     isDark,
+    /**
+     * Strategy used to apply the theme
+     */
     strategy,
+    /**
+     * Update the theme
+     * @param preset The new theme preset
+     * @description Update the theme with a new preset or override some tokens
+     */
     updateTheme,
+    /**
+     * Set the color mode
+     * @description Set the color mode - Can be 'auto', 'dark' or 'light'
+     * @param colorMode The new color mode
+     */
     setColorMode,
+    /**
+     * Toggle the dark mode
+     * @description Toggle the dark mode
+     */
     toggleDarkMode,
+    /**
+     * Mode
+     * @description Supported themes - Can be 'both', 'light' or 'dark'
+     */
     mode,
+    /**
+     * Dark mode strategy
+     * @description Strategy used to apply the dark mode - Can be 'class' or 'media'
+     */
     darkModeStrategy,
-    currentPreset
+    /**
+     * @deprecated use `preset` instead
+     */
+    currentPreset: preset
   };
 }
 export {
-  initThemeState,
   useTheme
 };

package/dist/index.js

@@ -1,16 +1,16 @@
 import { buildSeparateThemeFiles, buildThemeCSS, createThemeStylesheet, generateThemeBundle } from "./build/index.js";
-import { initThemeState, useTheme } from "./composables/useTheme.js";
+import { useTheme } from "./composables/useTheme.js";
 import { definePreset } from "./define-preset.js";
 import { MazUiTheme } from "./plugin.js";
 import { adjustColorLightness, formatHSL, generateColorScale, getContrastColor, parseHSL } from "./utils/color-utils.js";
-import { CSS_IDS, generateCriticalCSS, generateFullCSS, injectCSS, removeCSS } from "./utils/css-generator.js";
+import { CSS_ID, generateCSS, injectCSS, removeCSS } from "./utils/css-generator.js";
 import { deepMerge, mergePresets } from "./utils/preset-merger.js";
 import { mazUi } from "./presets/mazUi.js";
 import { obsidian } from "./presets/obsidian.js";
 import { ocean } from "./presets/ocean.js";
 import { pristine } from "./presets/pristine.js";
 export {
-  CSS_IDS,
+  CSS_ID,
   MazUiTheme,
   adjustColorLightness,
   buildSeparateThemeFiles,
@@ -19,12 +19,10 @@ export {
   deepMerge,
   definePreset,
   formatHSL,
+  generateCSS,
   generateColorScale,
-  generateCriticalCSS,
-  generateFullCSS,
   generateThemeBundle,
   getContrastColor,
-  initThemeState,
   injectCSS,
   mazUi,
   mergePresets,

package/dist/plugin/index.js

@@ -1,9 +1,11 @@
+import "../chunks/isServer.BAlEcRRr.js";
 import "vue";
+import { MazUiTheme } from "../plugin.js";
 import "../utils/css-generator.js";
 import "../utils/get-color-mode.js";
+import "../utils/update-document-class.js";
 import "../utils/get-preset.js";
 import "../utils/preset-merger.js";
-import { MazUiTheme } from "../plugin.js";
 export {
   MazUiTheme
 };

package/dist/plugin.js

@@ -1,54 +1,131 @@
-import { reactive } from "vue";
-import { generateCriticalCSS, injectCSS, CSS_IDS, generateFullCSS } from "./utils/css-generator.js";
-import { getColorMode, isSystemPrefersDark } from "./utils/get-color-mode.js";
+import { i as isServer } from "./chunks/isServer.BAlEcRRr.js";
+import { ref, onMounted, computed, toValue, watch } from "vue";
+import { generateCSS, injectCSS, CSS_ID } from "./utils/css-generator.js";
+import { getSavedColorMode, getSystemColorMode, getColorMode } from "./utils/get-color-mode.js";
+import { updateDocumentClass } from "./utils/update-document-class.js";
 import { getPreset } from "./utils/get-preset.js";
 import { mergePresets } from "./utils/preset-merger.js";
-function applyDarkMode(darkModeStrategy, isDark) {
-  typeof document > "u" || darkModeStrategy !== "class" || (isDark ? document.documentElement.classList.add("dark") : document.documentElement.classList.remove("dark"));
+function isClient() {
+  return typeof document < "u";
+}
+function truthyFilter(value) {
+  return !!value;
+}
+function useMutationObserver(target, callback, options = {}) {
+  const {
+    internalWindow = isClient() ? globalThis : void 0,
+    ...mutationOptions
+  } = options;
+  let observer;
+  const isSupported = ref((internalWindow && "MutationObserver" in internalWindow) ?? !1);
+  isSupported.value || onMounted(() => {
+    isSupported.value = (internalWindow && "MutationObserver" in internalWindow) ?? !1;
+  });
+  const cleanup = () => {
+    observer && (observer.disconnect(), observer = void 0);
+  }, targets = computed(() => {
+    const value = toValue(target);
+    let element;
+    return value && "$el" in value ? element = value.$el : value && (element = value), new Set([element].filter(truthyFilter));
+  }), stopWatch = watch(
+    [targets, isSupported],
+    ([newTargets, isSupported2]) => {
+      cleanup(), isSupported2 && newTargets.size && (observer = new MutationObserver(callback), newTargets.forEach((el) => observer?.observe(el, mutationOptions)));
+    },
+    { immediate: !0, flush: "post" }
+  );
+  return {
+    isSupported,
+    stop: () => {
+      stopWatch(), cleanup();
+    },
+    takeRecords: () => observer?.takeRecords()
+  };
 }
 function injectThemeCSS(finalPreset, config) {
   if (typeof document > "u")
     return;
   const cssOptions = {
     mode: config.mode,
-    darkSelectorStrategy: config.darkModeStrategy
+    darkSelectorStrategy: config.darkModeStrategy,
+    darkClass: config.darkClass
   };
   if (config.injectCriticalCSS) {
-    const criticalCSS = generateCriticalCSS(finalPreset, cssOptions);
-    injectCSS(CSS_IDS.CRITICAL, criticalCSS);
+    const criticalCSS = generateCSS(finalPreset, {
+      ...cssOptions,
+      onlyCritical: !0
+    });
+    injectCSS(CSS_ID, criticalCSS);
   }
   if (!config.injectFullCSS)
     return;
-  const fullCSS = generateFullCSS(finalPreset, cssOptions);
-  config.strategy === "runtime" ? injectCSS(CSS_IDS.FULL, fullCSS) : config.strategy === "hybrid" && requestIdleCallback(() => {
-    injectCSS(CSS_IDS.FULL, fullCSS);
+  const fullCSS = generateCSS(finalPreset, cssOptions);
+  config.strategy === "runtime" ? injectCSS(CSS_ID, fullCSS) : config.strategy === "hybrid" && requestIdleCallback(() => {
+    injectCSS(CSS_ID, fullCSS);
   }, { timeout: 100 });
 }
 function injectThemeState(app, themeState) {
   app.provide("mazThemeState", themeState), app.config.globalProperties.$mazThemeState = themeState;
 }
+function watchColorSchemeFromMedia(themeState) {
+  if (!isServer()) {
+    if (themeState.value && themeState.value.colorMode === "auto") {
+      const mediaQuery = globalThis.matchMedia("(prefers-color-scheme: dark)"), updateFromMedia = () => {
+        if (themeState.value.colorMode === "auto") {
+          const newColorMode = mediaQuery.matches ? "dark" : "light";
+          updateDocumentClass(newColorMode === "dark", themeState.value), themeState.value.isDark = newColorMode === "dark";
+        }
+      };
+      mediaQuery.addEventListener("change", updateFromMedia);
+    }
+    watch(() => themeState.value.colorMode, (colorMode) => {
+      updateDocumentClass(
+        colorMode === "auto" ? getSystemColorMode() === "dark" : colorMode === "dark",
+        themeState.value
+      );
+    });
+  }
+}
+function watchMutationClassOnHtmlElement(themeState) {
+  isServer() || useMutationObserver(
+    document.documentElement,
+    () => {
+      if (isServer() || !themeState.value)
+        return;
+      const activeColorMode = document.documentElement.classList.contains(themeState.value.darkClass) ? "dark" : "light";
+      themeState.value.isDark = activeColorMode === "dark", themeState.value.colorMode !== activeColorMode && themeState.value.colorMode !== "auto" && (themeState.value.colorMode = activeColorMode);
+    },
+    {
+      attributes: !0
+    }
+  );
+}
 const MazUiTheme = {
   async install(app, options) {
     const config = {
-      strategy: "runtime",
+      strategy: "hybrid",
       overrides: {},
       darkModeStrategy: "class",
-      colorMode: (options?.mode !== "both" ? options?.mode : options?.colorMode) ?? "auto",
+      preset: void 0,
       injectCriticalCSS: !0,
       injectFullCSS: !0,
       mode: "both",
-      ...options
-    }, colorMode = config.mode !== "both" ? config.mode : getColorMode(config.colorMode), isDark = colorMode === "auto" && config.mode === "both" ? isSystemPrefersDark() : colorMode === "dark" || config.mode === "dark", themeState = reactive({
-      currentPreset: void 0,
-      mode: config.mode,
-      colorMode,
-      isDark,
+      darkClass: "dark",
+      ...options,
+      colorMode: getSavedColorMode() ?? options.colorMode ?? (options.mode === "dark" ? "dark" : "auto")
+    }, isDark = config.colorMode === "auto" && config.mode === "both" ? getSystemColorMode() === "dark" || getColorMode(config.colorMode) === "dark" : getColorMode(config.colorMode) === "dark" || config.mode === "dark", themeState = ref({
       strategy: config.strategy,
-      darkModeStrategy: config.darkModeStrategy
+      darkClass: config.darkClass,
+      darkModeStrategy: config.darkModeStrategy,
+      colorMode: config.colorMode,
+      mode: config.mode,
+      preset: void 0,
+      // @ts-expect-error _isDark is a private property
+      isDark: options._isDark || isDark
     });
-    applyDarkMode(config.darkModeStrategy, isDark), injectThemeState(app, themeState);
+    injectThemeState(app, themeState), updateDocumentClass(themeState.value.isDark, themeState.value);
     const preset = config.strategy === "buildtime" ? config.preset : await getPreset(config.preset), finalPreset = Object.keys(config.overrides).length > 0 && preset ? mergePresets(preset, config.overrides) : preset;
-    finalPreset && (themeState.currentPreset = finalPreset), !(config.strategy === "buildtime" || !finalPreset) && injectThemeCSS(finalPreset, config);
+    finalPreset && (themeState.value.preset = finalPreset), !(config.strategy === "buildtime" || !finalPreset) && (injectThemeCSS(finalPreset, config), watchColorSchemeFromMedia(themeState), watchMutationClassOnHtmlElement(themeState));
   }
 };
 export {

package/dist/types/build/index.d.ts

@@ -1,14 +1,16 @@
 import { ThemePreset } from '../types';
 export interface BuildThemeOptions {
     preset: ThemePreset;
-    /** Mode de thème à générer */
+    /** Theme mode to generate */
     mode?: 'light' | 'dark' | 'both';
-    /** Sélecteur pour le mode sombre */
+    /** Dark mode selector: 'class' (.dark) | 'media' (@media) */
     darkSelector?: 'class' | 'media';
-    /** Préfixe des variables CSS */
+    /** CSS variables prefix */
     prefix?: string;
-    /** Générer seulement le CSS critique */
+    /** Generate only critical CSS */
     criticalOnly?: boolean;
+    /** Dark class name */
+    darkClass?: string;
 }
 export declare function buildThemeCSS(options: BuildThemeOptions): string;
 export declare function generateThemeBundle(presets: ThemePreset[], options?: {
@@ -28,6 +30,7 @@ export declare function createThemeStylesheet(css: string, options?: {
 export declare function buildSeparateThemeFiles(preset: ThemePreset, options?: {
     prefix?: string;
     darkSelector?: 'class' | 'media';
+    darkClass?: string;
 }): {
     critical: string;
     full: string;

package/dist/types/build/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/build/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAG3C,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,WAAW,CAAA;IACnB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAA;IAChC,oCAAoC;IACpC,YAAY,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;IAChC,gCAAgC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,wCAAwC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED,wBAAgB,aAAa,CAAC,OAAO,EAAE,iBAAiB,GAAG,MAAM,CAwBhE;AAED,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,WAAW,EAAE,EAAE,OAAO,GAAE;IACnE,8BAA8B;IAC9B,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAA;IAChC,oCAAoC;IACpC,YAAY,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;IAChC,gCAAgC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,wCAAwC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAA;CAClB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAkB9B;AAED,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,GAAE;IAC1D,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;CACV,GAAG,MAAM,CAYd;AAED,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,GAAE;IACpE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,YAAY,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;CAC5B,GAAG;IACP,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;CACjB,CAWA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/build/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAG3C,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,WAAW,CAAA;IACnB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAA;IAChC,6DAA6D;IAC7D,YAAY,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;IAChC,2BAA2B;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,iCAAiC;IACjC,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,sBAAsB;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,aAAa,CAAC,OAAO,EAAE,iBAAiB,GAAG,MAAM,CA0BhE;AAED,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,WAAW,EAAE,EAAE,OAAO,GAAE;IACnE,8BAA8B;IAC9B,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAA;IAChC,oCAAoC;IACpC,YAAY,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;IAChC,gCAAgC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,wCAAwC;IACxC,YAAY,CAAC,EAAE,OAAO,CAAA;CAClB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAkB9B;AAED,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,GAAE;IAC1D,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;CACV,GAAG,MAAM,CAYd;AAED,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,GAAE;IACpE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,YAAY,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;CACd,GAAG;IACP,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;CACjB,CAWA"}