@chakra-ui/color-mode - npm Package Compare versions

Comparing version 1.1.13 to 1.2.0

CHANGELOG.md

 # Change Log
 
+## 1.2.0
+
+### Minor Changes
+
+- [`71f80b67c`](https://github.com/chakra-ui/chakra-ui/commit/71f80b67c094d905c87bdc5c1766787c1543ebe7)
+  [#4634](https://github.com/chakra-ui/chakra-ui/pull/4634) Thanks
+  [@SkySails](https://github.com/SkySails)! - Added possibility to use the
+  system preferred color scheme as value for `initialColorMode`, while still
+  respecting a user's previous choice.
+
+  As long as the user does not manually select a color mode through a website
+  interaction, the theme will change when the system preference changes.
+
+  This would easily allow for an implementation where the user can choose
+  between `light`, `dark` and `system` by simply setting the `initialColorMode`
+  setting to `system` and presenting the user with the three options.
+
+## 1.1.14
+
+### Patch Changes
+
+- [`8f315ea5d`](https://github.com/chakra-ui/chakra-ui/commit/8f315ea5d694e0130dc2e3187ac53320cf1adcd1)
+  [#4936](https://github.com/chakra-ui/chakra-ui/pull/4936) Thanks
+  [@cschroeter](https://github.com/cschroeter)! - Use @chakra-ui/react-env to
+  determine the correct body
+
+- Updated dependencies
+  [[`5fe9b552b`](https://github.com/chakra-ui/chakra-ui/commit/5fe9b552bcae55935d1ab8ffde86b701075e6e6a),
+  [`cd0893c56`](https://github.com/chakra-ui/chakra-ui/commit/cd0893c561d8c72b69db7c03d10adae752468a4f)]:
+  - @chakra-ui/hooks@1.6.2
+  - @chakra-ui/utils@1.8.4
+  - @chakra-ui/react-env@1.0.8
+
 ## 1.1.13
@@ -4,0 +37,0 @@

dist/cjs/color-mode-provider.js

@@ -8,2 +8,4 @@ "use strict";
 
+var _reactEnv = require("@chakra-ui/react-env");
+
 var _utils = require("@chakra-ui/utils");
@@ -59,2 +61,3 @@
       colorModeManager = _props$colorModeManag === void 0 ? _storageManager.localStorageManager : _props$colorModeManag;
+  var defaultColorMode = initialColorMode === "dark" ? "dark" : "light";
   /**
@@ -67,6 +70,9 @@ * Only attempt to retrieve if we're on the server. Else this will result
 
-  var _React$useState = React.useState(colorModeManager.type === "cookie" ? colorModeManager.get(initialColorMode) : initialColorMode),
+  var _React$useState = React.useState(colorModeManager.type === "cookie" ? colorModeManager.get(defaultColorMode) : defaultColorMode),
       colorMode = _React$useState[0],
       rawSetColorMode = _React$useState[1];
 
+  var _useEnvironment = (0, _reactEnv.useEnvironment)(),
+      document = _useEnvironment.document;
+
   React.useEffect(function () {
@@ -83,3 +89,3 @@ /**
     if (_utils.isBrowser && colorModeManager.type === "localStorage") {
-      var mode = useSystemColorMode ? (0, _colorMode.getColorScheme)(initialColorMode) : _colorMode.root.get() || colorModeManager.get();
+      var mode = useSystemColorMode ? (0, _colorMode.getColorScheme)(defaultColorMode) : _colorMode.root.get() || colorModeManager.get() || (0, _colorMode.getColorScheme)(defaultColorMode);
 
@@ -90,13 +96,20 @@ if (mode) {
     }
-  }, [colorModeManager, useSystemColorMode, initialColorMode]);
+  }, [colorModeManager, useSystemColorMode, defaultColorMode]);
   React.useEffect(function () {
     var isDark = colorMode === "dark";
-    (0, _colorMode.syncBodyClassName)(isDark);
+    (0, _colorMode.syncBodyClassName)(isDark, document);
 
     _colorMode.root.set(isDark ? "dark" : "light");
-  }, [colorMode]);
-  var setColorMode = React.useCallback(function (value) {
-    colorModeManager.set(value);
+  }, [colorMode, document]);
+  var setColorMode = React.useCallback(function (value, isListenerEvent) {
+    if (isListenerEvent === void 0) {
+      isListenerEvent = false;
+    }
+
+    if (!isListenerEvent) {
+      colorModeManager.set(value);
+    } else if (colorModeManager.get() && !useSystemColorMode) return;
+
     rawSetColorMode(value);
-  }, [colorModeManager]);
+  }, [colorModeManager, useSystemColorMode]);
   var toggleColorMode = React.useCallback(function () {
@@ -106,5 +119,6 @@ setColorMode(colorMode === "light" ? "dark" : "light");
   React.useEffect(function () {
+    var shouldUseSystemListener = useSystemColorMode || initialColorMode === "system";
     var removeListener;
 
-    if (useSystemColorMode) {
+    if (shouldUseSystemListener) {
       removeListener = (0, _colorMode.addListener)(setColorMode);
@@ -114,7 +128,7 @@ }
     return function () {
-      if (removeListener && useSystemColorMode) {
+      if (removeListener && shouldUseSystemListener) {
         removeListener();
       }
     };
-  }, [setColorMode, useSystemColorMode]); // presence of `value` indicates a controlled context
+  }, [setColorMode, useSystemColorMode, initialColorMode]); // presence of `value` indicates a controlled context
 
@@ -121,0 +135,0 @@ var context = React.useMemo(function () {

dist/cjs/color-mode-provider.js.map

@@ -1,1 +0,1 @@
-{"version":3,"sources":["../../src/color-mode-provider.tsx"],"names":["ColorModeContext","React","createContext","__DEV__","displayName","useColorMode","context","useContext","undefined","Error","ColorModeProvider","props","value","children","options","useSystemColorMode","initialColorMode","colorModeManager","localStorageManager","useState","type","get","colorMode","rawSetColorMode","useEffect","isBrowser","mode","root","isDark","set","setColorMode","useCallback","toggleColorMode","removeListener","useMemo","noop","DarkMode","LightMode","useColorModeValue","light","dark"],"mappings":"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","sourcesContent":["import { isBrowser, noop, __DEV__ } from \"@chakra-ui/utils\"\nimport * as React from \"react\"\nimport {\n  addListener,\n  ColorMode,\n  getColorScheme,\n  syncBodyClassName,\n  root,\n} from \"./color-mode.utils\"\nimport { localStorageManager, StorageManager } from \"./storage-manager\"\n\nexport type { ColorMode }\n\nexport interface ColorModeOptions {\n  initialColorMode?: ColorMode\n  useSystemColorMode?: boolean\n}\n\ninterface ColorModeContextType {\n  colorMode: ColorMode\n  toggleColorMode: () => void\n  setColorMode: (value: any) => void\n}\n\nexport const ColorModeContext = React.createContext({} as ColorModeContextType)\n\nif (__DEV__) {\n  ColorModeContext.displayName = \"ColorModeContext\"\n}\n\n/**\n * React hook that reads from `ColorModeProvider` context\n * Returns the color mode and function to toggle it\n */\nexport const useColorMode = () => {\n  const context = React.useContext(ColorModeContext)\n  if (context === undefined) {\n    throw new Error(\"useColorMode must be used within a ColorModeProvider\")\n  }\n  return context\n}\n\nexport interface ColorModeProviderProps {\n  value?: ColorMode\n  children?: React.ReactNode\n  options: ColorModeOptions\n  colorModeManager?: StorageManager\n}\n\n/**\n * Provides context for the color mode based on config in `theme`\n * Returns the color mode and function to toggle the color mode\n */\nexport function ColorModeProvider(props: ColorModeProviderProps) {\n  const {\n    value,\n    children,\n    options: { useSystemColorMode, initialColorMode },\n    colorModeManager = localStorageManager,\n  } = props\n\n  /**\n   * Only attempt to retrieve if we're on the server. Else this will result\n   * in a hydration mismatch warning and partially invalid visuals.\n   *\n   * Else fallback safely to `theme.config.initialColormode` (default light)\n   */\n  const [colorMode, rawSetColorMode] = React.useState<ColorMode | undefined>(\n    colorModeManager.type === \"cookie\"\n      ? colorModeManager.get(initialColorMode)\n      : initialColorMode,\n  )\n\n  React.useEffect(() => {\n    /**\n     * Since we cannot initially retrieve localStorage to due above mentioned\n     * reasons, do so after hydration.\n     *\n     * Priority:\n     * - system color mode\n     * - defined value on <ColorModeScript />, if present\n     * - previously stored value\n     */\n    if (isBrowser && colorModeManager.type === \"localStorage\") {\n      const mode = useSystemColorMode\n        ? getColorScheme(initialColorMode)\n        : root.get() || colorModeManager.get()\n\n      if (mode) {\n        rawSetColorMode(mode)\n      }\n    }\n  }, [colorModeManager, useSystemColorMode, initialColorMode])\n\n  React.useEffect(() => {\n    const isDark = colorMode === \"dark\"\n\n    syncBodyClassName(isDark)\n    root.set(isDark ? \"dark\" : \"light\")\n  }, [colorMode])\n\n  const setColorMode = React.useCallback(\n    (value: ColorMode) => {\n      colorModeManager.set(value)\n      rawSetColorMode(value)\n    },\n    [colorModeManager],\n  )\n\n  const toggleColorMode = React.useCallback(() => {\n    setColorMode(colorMode === \"light\" ? \"dark\" : \"light\")\n  }, [colorMode, setColorMode])\n\n  React.useEffect(() => {\n    let removeListener: any\n    if (useSystemColorMode) {\n      removeListener = addListener(setColorMode)\n    }\n    return () => {\n      if (removeListener && useSystemColorMode) {\n        removeListener()\n      }\n    }\n  }, [setColorMode, useSystemColorMode])\n\n  // presence of `value` indicates a controlled context\n  const context = React.useMemo(\n    () => ({\n      colorMode: (value ?? colorMode) as ColorMode,\n      toggleColorMode: value ? noop : toggleColorMode,\n      setColorMode: value ? noop : setColorMode,\n    }),\n    [colorMode, setColorMode, toggleColorMode, value],\n  )\n\n  return (\n    <ColorModeContext.Provider value={context}>\n      {children}\n    </ColorModeContext.Provider>\n  )\n}\n\nif (__DEV__) {\n  ColorModeProvider.displayName = \"ColorModeProvider\"\n}\n\n/**\n * Locks the color mode to `dark`, without any way to change it.\n */\nexport const DarkMode: React.FC = (props) => (\n  <ColorModeContext.Provider\n    value={{ colorMode: \"dark\", toggleColorMode: noop, setColorMode: noop }}\n    {...props}\n  />\n)\n\nif (__DEV__) {\n  DarkMode.displayName = \"DarkMode\"\n}\n\n/**\n * Locks the color mode to `light` without any way to change it.\n */\nexport const LightMode: React.FC = (props) => (\n  <ColorModeContext.Provider\n    value={{ colorMode: \"light\", toggleColorMode: noop, setColorMode: noop }}\n    {...props}\n  />\n)\n\nif (__DEV__) {\n  LightMode.displayName = \"LightMode\"\n}\n\n/**\n * Change value based on color mode.\n *\n * @param light the light mode value\n * @param dark the dark mode value\n *\n * @example\n *\n * ```js\n * const Icon = useColorModeValue(MoonIcon, SunIcon)\n * ```\n */\nexport function useColorModeValue<TLight = unknown, TDark = unknown>(\n  light: TLight,\n  dark: TDark,\n) {\n  const { colorMode } = useColorMode()\n  return colorMode === \"dark\" ? dark : light\n}\n"],"file":"color-mode-provider.js"}
+{"version":3,"sources":["../../src/color-mode-provider.tsx"],"names":["ColorModeContext","React","createContext","__DEV__","displayName","useColorMode","context","useContext","undefined","Error","ColorModeProvider","props","value","children","options","useSystemColorMode","initialColorMode","colorModeManager","localStorageManager","defaultColorMode","useState","type","get","colorMode","rawSetColorMode","document","useEffect","isBrowser","mode","root","isDark","set","setColorMode","useCallback","isListenerEvent","toggleColorMode","shouldUseSystemListener","removeListener","useMemo","noop","DarkMode","LightMode","useColorModeValue","light","dark"],"mappings":"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","sourcesContent":["import { useEnvironment } from \"@chakra-ui/react-env\"\nimport { isBrowser, noop, __DEV__ } from \"@chakra-ui/utils\"\nimport * as React from \"react\"\nimport {\n  addListener,\n  ColorMode,\n  getColorScheme,\n  root,\n  syncBodyClassName,\n} from \"./color-mode.utils\"\nimport { localStorageManager, StorageManager } from \"./storage-manager\"\n\ntype ConfigColorMode = ColorMode | \"system\" | undefined\nexport type { ColorMode, ConfigColorMode }\n\nexport interface ColorModeOptions {\n  initialColorMode?: ConfigColorMode\n  useSystemColorMode?: boolean\n}\n\ninterface ColorModeContextType {\n  colorMode: ColorMode\n  toggleColorMode: () => void\n  setColorMode: (value: any) => void\n}\n\nexport const ColorModeContext = React.createContext({} as ColorModeContextType)\n\nif (__DEV__) {\n  ColorModeContext.displayName = \"ColorModeContext\"\n}\n\n/**\n * React hook that reads from `ColorModeProvider` context\n * Returns the color mode and function to toggle it\n */\nexport const useColorMode = () => {\n  const context = React.useContext(ColorModeContext)\n  if (context === undefined) {\n    throw new Error(\"useColorMode must be used within a ColorModeProvider\")\n  }\n  return context\n}\n\nexport interface ColorModeProviderProps {\n  value?: ColorMode\n  children?: React.ReactNode\n  options: ColorModeOptions\n  colorModeManager?: StorageManager\n}\n\n/**\n * Provides context for the color mode based on config in `theme`\n * Returns the color mode and function to toggle the color mode\n */\nexport function ColorModeProvider(props: ColorModeProviderProps) {\n  const {\n    value,\n    children,\n    options: { useSystemColorMode, initialColorMode },\n    colorModeManager = localStorageManager,\n  } = props\n\n  const defaultColorMode = initialColorMode === \"dark\" ? \"dark\" : \"light\"\n\n  /**\n   * Only attempt to retrieve if we're on the server. Else this will result\n   * in a hydration mismatch warning and partially invalid visuals.\n   *\n   * Else fallback safely to `theme.config.initialColormode` (default light)\n   */\n  const [colorMode, rawSetColorMode] = React.useState<ColorMode | undefined>(\n    colorModeManager.type === \"cookie\"\n      ? colorModeManager.get(defaultColorMode)\n      : defaultColorMode,\n  )\n\n  const { document } = useEnvironment()\n\n  React.useEffect(() => {\n    /**\n     * Since we cannot initially retrieve localStorage to due above mentioned\n     * reasons, do so after hydration.\n     *\n     * Priority:\n     * - system color mode\n     * - defined value on <ColorModeScript />, if present\n     * - previously stored value\n     */\n    if (isBrowser && colorModeManager.type === \"localStorage\") {\n      const mode = useSystemColorMode\n        ? getColorScheme(defaultColorMode)\n        : root.get() ||\n          colorModeManager.get() ||\n          getColorScheme(defaultColorMode)\n\n      if (mode) {\n        rawSetColorMode(mode)\n      }\n    }\n  }, [colorModeManager, useSystemColorMode, defaultColorMode])\n\n  React.useEffect(() => {\n    const isDark = colorMode === \"dark\"\n\n    syncBodyClassName(isDark, document)\n    root.set(isDark ? \"dark\" : \"light\")\n  }, [colorMode, document])\n\n  const setColorMode = React.useCallback(\n    (value: ColorMode, isListenerEvent = false) => {\n      if (!isListenerEvent) {\n        colorModeManager.set(value)\n      } else if (colorModeManager.get() && !useSystemColorMode) return\n\n      rawSetColorMode(value)\n    },\n    [colorModeManager, useSystemColorMode],\n  )\n\n  const toggleColorMode = React.useCallback(() => {\n    setColorMode(colorMode === \"light\" ? \"dark\" : \"light\")\n  }, [colorMode, setColorMode])\n\n  React.useEffect(() => {\n    const shouldUseSystemListener =\n      useSystemColorMode || initialColorMode === \"system\"\n    let removeListener: any\n    if (shouldUseSystemListener) {\n      removeListener = addListener(setColorMode)\n    }\n    return () => {\n      if (removeListener && shouldUseSystemListener) {\n        removeListener()\n      }\n    }\n  }, [setColorMode, useSystemColorMode, initialColorMode])\n\n  // presence of `value` indicates a controlled context\n  const context = React.useMemo(\n    () => ({\n      colorMode: (value ?? colorMode) as ColorMode,\n      toggleColorMode: value ? noop : toggleColorMode,\n      setColorMode: value ? noop : setColorMode,\n    }),\n    [colorMode, setColorMode, toggleColorMode, value],\n  )\n\n  return (\n    <ColorModeContext.Provider value={context}>\n      {children}\n    </ColorModeContext.Provider>\n  )\n}\n\nif (__DEV__) {\n  ColorModeProvider.displayName = \"ColorModeProvider\"\n}\n\n/**\n * Locks the color mode to `dark`, without any way to change it.\n */\nexport const DarkMode: React.FC = (props) => (\n  <ColorModeContext.Provider\n    value={{ colorMode: \"dark\", toggleColorMode: noop, setColorMode: noop }}\n    {...props}\n  />\n)\n\nif (__DEV__) {\n  DarkMode.displayName = \"DarkMode\"\n}\n\n/**\n * Locks the color mode to `light` without any way to change it.\n */\nexport const LightMode: React.FC = (props) => (\n  <ColorModeContext.Provider\n    value={{ colorMode: \"light\", toggleColorMode: noop, setColorMode: noop }}\n    {...props}\n  />\n)\n\nif (__DEV__) {\n  LightMode.displayName = \"LightMode\"\n}\n\n/**\n * Change value based on color mode.\n *\n * @param light the light mode value\n * @param dark the dark mode value\n *\n * @example\n *\n * ```js\n * const Icon = useColorModeValue(MoonIcon, SunIcon)\n * ```\n */\nexport function useColorModeValue<TLight = unknown, TDark = unknown>(\n  light: TLight,\n  dark: TDark,\n) {\n  const { colorMode } = useColorMode()\n  return colorMode === \"dark\" ? dark : light\n}\n"],"file":"color-mode-provider.js"}

dist/cjs/color-mode-script.js.map

@@ -1,1 +0,1 @@
-{"version":3,"sources":["../../src/color-mode-script.tsx"],"names":["setScript","initialValue","mql","window","matchMedia","systemPreference","matches","persistedPreference","localStorage","getItem","error","console","log","isInStorage","colorMode","root","document","documentElement","style","setProperty","ColorModeScript","props","initialColorMode","html","String","nonce","__html"],"mappings":";;;;;AAAA;;;;;;AAKA,SAASA,SAAT,CAAmBC,YAAnB,EAAuC;AACrC,MAAMC,GAAG,GAAGC,MAAM,CAACC,UAAP,CAAkB,8BAAlB,CAAZ;AACA,MAAMC,gBAAgB,GAAGH,GAAG,CAACI,OAAJ,GAAc,MAAd,GAAuB,OAAhD;AAEA,MAAIC,mBAAJ;;AAEA,MAAI;AACFA,IAAAA,mBAAmB,GAAGC,YAAY,CAACC,OAAb,CAAqB,sBAArB,CAAtB;AACD,GAFD,CAEE,OAAOC,KAAP,EAAc;AACdC,IAAAA,OAAO,CAACC,GAAR,CACE,6FADF;AAGD;;AAED,MAAMC,WAAW,GAAG,OAAON,mBAAP,KAA+B,QAAnD;AAEA,MAAIO,SAAJ;;AAEA,MAAID,WAAJ,EAAiB;AACfC,IAAAA,SAAS,GAAGP,mBAAZ;AACD,GAFD,MAEO;AACLO,IAAAA,SAAS,GAAGb,YAAY,KAAK,QAAjB,GAA4BI,gBAA5B,GAA+CJ,YAA3D;AACD;;AAED,MAAIa,SAAJ,EAAe;AACb,QAAMC,IAAI,GAAGC,QAAQ,CAACC,eAAtB;AACAF,IAAAA,IAAI,CAACG,KAAL,CAAWC,WAAX,CAAuB,wBAAvB,EAAiDL,SAAjD;AACD;AACF;;AAUD;AACA;AACA;AACA;AACO,IAAMM,eAAe,GAAG,SAAlBA,eAAkB,CAACC,KAAD,EAAiC;AAAA,8BACvBA,KADuB,CACtDC,gBADsD;AAAA,MACtDA,gBADsD,sCACnC,OADmC;AAE9D,MAAMC,IAAI,SAAOC,MAAM,CAACxB,SAAD,CAAb,WAA8BsB,gBAA9B,OAAV;AACA,sBACE;AAAQ,IAAA,KAAK,EAAED,KAAK,CAACI,KAArB;AAA4B,IAAA,uBAAuB,EAAE;AAAEC,MAAAA,MAAM,EAAEH;AAAV;AAArD,IADF;AAGD,CANM","sourcesContent":["import * as React from \"react\"\nimport { ColorMode } from \"./color-mode-provider\"\n\ntype Mode = ColorMode | \"system\" | undefined\n\nfunction setScript(initialValue: Mode) {\n  const mql = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  const systemPreference = mql.matches ? \"dark\" : \"light\"\n\n  let persistedPreference: Mode\n\n  try {\n    persistedPreference = localStorage.getItem(\"chakra-ui-color-mode\") as Mode\n  } catch (error) {\n    console.log(\n      \"Chakra UI: localStorage is not available. Color mode persistence might not work as expected\",\n    )\n  }\n\n  const isInStorage = typeof persistedPreference === \"string\"\n\n  let colorMode: Mode\n\n  if (isInStorage) {\n    colorMode = persistedPreference\n  } else {\n    colorMode = initialValue === \"system\" ? systemPreference : initialValue\n  }\n\n  if (colorMode) {\n    const root = document.documentElement\n    root.style.setProperty(\"--chakra-ui-color-mode\", colorMode)\n  }\n}\n\ninterface ColorModeScriptProps {\n  initialColorMode?: Mode\n  /**\n   * Optional nonce that will be passed to the created `<script>` tag.\n   */\n  nonce?: string\n}\n\n/**\n * Script to add to the root of your application when using localStorage,\n * to help prevent flash of color mode that can happen during page load.\n */\nexport const ColorModeScript = (props: ColorModeScriptProps) => {\n  const { initialColorMode = \"light\" } = props\n  const html = `(${String(setScript)})('${initialColorMode}')`\n  return (\n    <script nonce={props.nonce} dangerouslySetInnerHTML={{ __html: html }} />\n  )\n}\n"],"file":"color-mode-script.js"}
+{"version":3,"sources":["../../src/color-mode-script.tsx"],"names":["setScript","initialValue","mql","window","matchMedia","systemPreference","matches","persistedPreference","localStorage","getItem","error","console","log","isInStorage","colorMode","root","document","documentElement","style","setProperty","ColorModeScript","props","initialColorMode","html","String","nonce","__html"],"mappings":";;;;;AAAA;;;;;;AAGA,SAASA,SAAT,CAAmBC,YAAnB,EAAkD;AAChD,MAAMC,GAAG,GAAGC,MAAM,CAACC,UAAP,CAAkB,8BAAlB,CAAZ;AACA,MAAMC,gBAAgB,GAAGH,GAAG,CAACI,OAAJ,GAAc,MAAd,GAAuB,OAAhD;AAEA,MAAIC,mBAAJ;;AAEA,MAAI;AACFA,IAAAA,mBAAmB,GAAGC,YAAY,CAACC,OAAb,CACpB,sBADoB,CAAtB;AAGD,GAJD,CAIE,OAAOC,KAAP,EAAc;AACdC,IAAAA,OAAO,CAACC,GAAR,CACE,6FADF;AAGD;;AAED,MAAMC,WAAW,GAAG,OAAON,mBAAP,KAA+B,QAAnD;AAEA,MAAIO,SAAJ;;AAEA,MAAID,WAAJ,EAAiB;AACfC,IAAAA,SAAS,GAAGP,mBAAZ;AACD,GAFD,MAEO;AACLO,IAAAA,SAAS,GAAGb,YAAY,KAAK,QAAjB,GAA4BI,gBAA5B,GAA+CJ,YAA3D;AACD;;AAED,MAAIa,SAAJ,EAAe;AACb,QAAMC,IAAI,GAAGC,QAAQ,CAACC,eAAtB;AACAF,IAAAA,IAAI,CAACG,KAAL,CAAWC,WAAX,CAAuB,wBAAvB,EAAiDL,SAAjD;AACD;AACF;;AAUD;AACA;AACA;AACA;AACO,IAAMM,eAAe,GAAG,SAAlBA,eAAkB,CAACC,KAAD,EAAiC;AAAA,8BACvBA,KADuB,CACtDC,gBADsD;AAAA,MACtDA,gBADsD,sCACnC,OADmC;AAE9D,MAAMC,IAAI,SAAOC,MAAM,CAACxB,SAAD,CAAb,WAA8BsB,gBAA9B,OAAV;AACA,sBACE;AAAQ,IAAA,KAAK,EAAED,KAAK,CAACI,KAArB;AAA4B,IAAA,uBAAuB,EAAE;AAAEC,MAAAA,MAAM,EAAEH;AAAV;AAArD,IADF;AAGD,CANM","sourcesContent":["import * as React from \"react\"\nimport { ConfigColorMode } from \"./color-mode-provider\"\n\nfunction setScript(initialValue: ConfigColorMode) {\n  const mql = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  const systemPreference = mql.matches ? \"dark\" : \"light\"\n\n  let persistedPreference: ConfigColorMode\n\n  try {\n    persistedPreference = localStorage.getItem(\n      \"chakra-ui-color-mode\",\n    ) as ConfigColorMode\n  } catch (error) {\n    console.log(\n      \"Chakra UI: localStorage is not available. Color mode persistence might not work as expected\",\n    )\n  }\n\n  const isInStorage = typeof persistedPreference === \"string\"\n\n  let colorMode: ConfigColorMode\n\n  if (isInStorage) {\n    colorMode = persistedPreference\n  } else {\n    colorMode = initialValue === \"system\" ? systemPreference : initialValue\n  }\n\n  if (colorMode) {\n    const root = document.documentElement\n    root.style.setProperty(\"--chakra-ui-color-mode\", colorMode)\n  }\n}\n\ninterface ColorModeScriptProps {\n  initialColorMode?: ConfigColorMode\n  /**\n   * Optional nonce that will be passed to the created `<script>` tag.\n   */\n  nonce?: string\n}\n\n/**\n * Script to add to the root of your application when using localStorage,\n * to help prevent flash of color mode that can happen during page load.\n */\nexport const ColorModeScript = (props: ColorModeScriptProps) => {\n  const { initialColorMode = \"light\" } = props\n  const html = `(${String(setScript)})('${initialColorMode}')`\n  return (\n    <script nonce={props.nonce} dangerouslySetInnerHTML={{ __html: html }} />\n  )\n}\n"],"file":"color-mode-script.js"}

dist/cjs/color-mode.utils.js

@@ -26,3 +26,3 @@ "use strict";
 
-var getBody = function getBody() {
+var getBody = function getBody(document) {
   return _utils.isBrowser ? document.body : mockBody;
@@ -35,4 +35,4 @@ };
 
-function syncBodyClassName(isDark) {
-  var body = getBody();
+function syncBodyClassName(isDark, document) {
+  var body = getBody(document);
   body.classList.add(isDark ? classNames.dark : classNames.light);
@@ -86,9 +86,8 @@ body.classList.remove(isDark ? classNames.light : classNames.dark);
   var listener = function listener() {
-    fn(mediaQueryList.matches ? "dark" : "light");
+    fn(mediaQueryList.matches ? "dark" : "light", true);
   };
 
-  listener();
-  mediaQueryList.addListener(listener);
+  mediaQueryList.addEventListener("change", listener);
   return function () {
-    mediaQueryList.removeListener(listener);
+    mediaQueryList.removeEventListener("change", listener);
   };
@@ -95,0 +94,0 @@ }

dist/cjs/color-mode.utils.js.map

@@ -1,1 +0,1 @@
-{"version":3,"sources":["../../src/color-mode.utils.ts"],"names":["classNames","light","dark","mockBody","classList","add","noop","remove","getBody","isBrowser","document","body","syncBodyClassName","isDark","getMediaQuery","query","mediaQueryList","window","matchMedia","undefined","media","matches","queries","lightQuery","darkQuery","getColorScheme","fallback","addListener","fn","listener","removeListener","root","get","documentElement","style","getPropertyValue","set","mode","setProperty"],"mappings":";;;;;;;;AAAA;;AAEA,IAAMA,UAAU,GAAG;AACjBC,EAAAA,KAAK,EAAE,iBADU;AAEjBC,EAAAA,IAAI,EAAE;AAFW,CAAnB;;AAOA;AACA;AACA;AACA,IAAMC,QAAQ,GAAG;AACfC,EAAAA,SAAS,EAAE;AAAEC,IAAAA,GAAG,EAAEC,WAAP;AAAaC,IAAAA,MAAM,EAAED;AAArB;AADI,CAAjB;;AAIA,IAAME,OAAO,GAAG,SAAVA,OAAU;AAAA,SAAOC,mBAAYC,QAAQ,CAACC,IAArB,GAA4BR,QAAnC;AAAA,CAAhB;AAEA;AACA;AACA;;;AACO,SAASS,iBAAT,CAA2BC,MAA3B,EAA4C;AACjD,MAAMF,IAAI,GAAGH,OAAO,EAApB;AACAG,EAAAA,IAAI,CAACP,SAAL,CAAeC,GAAf,CAAmBQ,MAAM,GAAGb,UAAU,CAACE,IAAd,GAAqBF,UAAU,CAACC,KAAzD;AACAU,EAAAA,IAAI,CAACP,SAAL,CAAeG,MAAf,CAAsBM,MAAM,GAAGb,UAAU,CAACC,KAAd,GAAsBD,UAAU,CAACE,IAA7D;AACD;AAED;AACA;AACA;;;AACA,SAASY,aAAT,CAAuBC,KAAvB,EAAsC;AACpC,MAAMC,cAAc,GAAGC,MAAM,CAACC,UAAV,oBAAGD,MAAM,CAACC,UAAP,CAAoBH,KAApB,CAAvB;;AACA,MAAI,CAACC,cAAL,EAAqB;AACnB,WAAOG,SAAP;AACD;;AACD,SAAO,CAAC,CAACH,cAAc,CAACI,KAAjB,KAA2BJ,cAAc,CAACK,OAAjD;AACD;;AAEM,IAAMC,OAAO,GAAG;AACrBrB,EAAAA,KAAK,EAAE,+BADc;AAErBC,EAAAA,IAAI,EAAE;AAFe,CAAhB;;AAKA,IAAMqB,UAAU,GAAGD,OAAO,CAACrB,KAA3B;;AACA,IAAMuB,SAAS,GAAGF,OAAO,CAACpB,IAA1B;;;AAEA,SAASuB,cAAT,CAAwBC,QAAxB,EAA8C;AAAA;;AACnD,MAAMb,MAAM,qBAAGC,aAAa,CAACQ,OAAO,CAACpB,IAAT,CAAhB,6BAAkCwB,QAAQ,KAAK,MAA3D;AACA,SAAOb,MAAM,GAAG,MAAH,GAAY,OAAzB;AACD;AAED;AACA;AACA;AACA;;;AACO,SAASc,WAAT,CAAqBC,EAArB,EAAmC;AACxC,MAAI,EAAE,gBAAgBX,MAAlB,CAAJ,EAA+B;AAC7B,WAAOX,WAAP;AACD;;AAED,MAAMU,cAAc,GAAGC,MAAM,CAACC,UAAP,CAAkBI,OAAO,CAACpB,IAA1B,CAAvB;;AAEA,MAAM2B,QAAQ,GAAG,SAAXA,QAAW,GAAM;AACrBD,IAAAA,EAAE,CAACZ,cAAc,CAACK,OAAf,GAAyB,MAAzB,GAAkC,OAAnC,CAAF;AACD,GAFD;;AAIAQ,EAAAA,QAAQ;AACRb,EAAAA,cAAc,CAACW,WAAf,CAA2BE,QAA3B;AAEA,SAAO,YAAM;AACXb,IAAAA,cAAc,CAACc,cAAf,CAA8BD,QAA9B;AACD,GAFD;AAGD;;AAEM,IAAME,IAAI,GAAG;AAClBC,EAAAA,GAAG,EAAE;AAAA,WACHtB,QAAQ,CAACuB,eAAT,CAAyBC,KAAzB,CAA+BC,gBAA/B,CACE,wBADF,CADG;AAAA,GADa;AAKlBC,EAAAA,GAAG,EAAE,aAACC,IAAD,EAAqB;AACxB,QAAI5B,gBAAJ,EAAe;AACbC,MAAAA,QAAQ,CAACuB,eAAT,CAAyBC,KAAzB,CAA+BI,WAA/B,CAA2C,wBAA3C,EAAqED,IAArE;AACD;AACF;AATiB,CAAb","sourcesContent":["import { isBrowser, noop } from \"@chakra-ui/utils\"\n\nconst classNames = {\n  light: \"chakra-ui-light\",\n  dark: \"chakra-ui-dark\",\n}\n\nexport type ColorMode = \"light\" | \"dark\"\n\n/**\n * SSR: Graceful fallback for the `body` element\n */\nconst mockBody = {\n  classList: { add: noop, remove: noop },\n}\n\nconst getBody = () => (isBrowser ? document.body : mockBody)\n\n/**\n * Function to add/remove class from `body` based on color mode\n */\nexport function syncBodyClassName(isDark: boolean) {\n  const body = getBody()\n  body.classList.add(isDark ? classNames.dark : classNames.light)\n  body.classList.remove(isDark ? classNames.light : classNames.dark)\n}\n\n/**\n * Check if JS media query matches the query string passed\n */\nfunction getMediaQuery(query: string) {\n  const mediaQueryList = window.matchMedia?.(query)\n  if (!mediaQueryList) {\n    return undefined\n  }\n  return !!mediaQueryList.media === mediaQueryList.matches\n}\n\nexport const queries = {\n  light: \"(prefers-color-scheme: light)\",\n  dark: \"(prefers-color-scheme: dark)\",\n}\n\nexport const lightQuery = queries.light\nexport const darkQuery = queries.dark\n\nexport function getColorScheme(fallback?: ColorMode) {\n  const isDark = getMediaQuery(queries.dark) ?? fallback === \"dark\"\n  return isDark ? \"dark\" : \"light\"\n}\n\n/**\n * Adds system os color mode listener, and run the callback\n * once preference changes\n */\nexport function addListener(fn: Function) {\n  if (!(\"matchMedia\" in window)) {\n    return noop\n  }\n\n  const mediaQueryList = window.matchMedia(queries.dark)\n\n  const listener = () => {\n    fn(mediaQueryList.matches ? \"dark\" : \"light\")\n  }\n\n  listener()\n  mediaQueryList.addListener(listener)\n\n  return () => {\n    mediaQueryList.removeListener(listener)\n  }\n}\n\nexport const root = {\n  get: () =>\n    document.documentElement.style.getPropertyValue(\n      \"--chakra-ui-color-mode\",\n    ) as ColorMode,\n  set: (mode: ColorMode) => {\n    if (isBrowser) {\n      document.documentElement.style.setProperty(\"--chakra-ui-color-mode\", mode)\n    }\n  },\n}\n"],"file":"color-mode.utils.js"}
+{"version":3,"sources":["../../src/color-mode.utils.ts"],"names":["classNames","light","dark","mockBody","classList","add","noop","remove","getBody","document","isBrowser","body","syncBodyClassName","isDark","getMediaQuery","query","mediaQueryList","window","matchMedia","undefined","media","matches","queries","lightQuery","darkQuery","getColorScheme","fallback","addListener","fn","listener","addEventListener","removeEventListener","root","get","documentElement","style","getPropertyValue","set","mode","setProperty"],"mappings":";;;;;;;;AAAA;;AAEA,IAAMA,UAAU,GAAG;AACjBC,EAAAA,KAAK,EAAE,iBADU;AAEjBC,EAAAA,IAAI,EAAE;AAFW,CAAnB;;AAOA;AACA;AACA;AACA,IAAMC,QAAQ,GAAG;AACfC,EAAAA,SAAS,EAAE;AAAEC,IAAAA,GAAG,EAAEC,WAAP;AAAaC,IAAAA,MAAM,EAAED;AAArB;AADI,CAAjB;;AAIA,IAAME,OAAO,GAAG,SAAVA,OAAU,CAACC,QAAD;AAAA,SAAyBC,mBAAYD,QAAQ,CAACE,IAArB,GAA4BR,QAArD;AAAA,CAAhB;AAEA;AACA;AACA;;;AACO,SAASS,iBAAT,CAA2BC,MAA3B,EAA4CJ,QAA5C,EAAgE;AACrE,MAAME,IAAI,GAAGH,OAAO,CAACC,QAAD,CAApB;AACAE,EAAAA,IAAI,CAACP,SAAL,CAAeC,GAAf,CAAmBQ,MAAM,GAAGb,UAAU,CAACE,IAAd,GAAqBF,UAAU,CAACC,KAAzD;AACAU,EAAAA,IAAI,CAACP,SAAL,CAAeG,MAAf,CAAsBM,MAAM,GAAGb,UAAU,CAACC,KAAd,GAAsBD,UAAU,CAACE,IAA7D;AACD;AAED;AACA;AACA;;;AACA,SAASY,aAAT,CAAuBC,KAAvB,EAAsC;AACpC,MAAMC,cAAc,GAAGC,MAAM,CAACC,UAAV,oBAAGD,MAAM,CAACC,UAAP,CAAoBH,KAApB,CAAvB;;AACA,MAAI,CAACC,cAAL,EAAqB;AACnB,WAAOG,SAAP;AACD;;AACD,SAAO,CAAC,CAACH,cAAc,CAACI,KAAjB,KAA2BJ,cAAc,CAACK,OAAjD;AACD;;AAEM,IAAMC,OAAO,GAAG;AACrBrB,EAAAA,KAAK,EAAE,+BADc;AAErBC,EAAAA,IAAI,EAAE;AAFe,CAAhB;;AAKA,IAAMqB,UAAU,GAAGD,OAAO,CAACrB,KAA3B;;AACA,IAAMuB,SAAS,GAAGF,OAAO,CAACpB,IAA1B;;;AAEA,SAASuB,cAAT,CAAwBC,QAAxB,EAA8C;AAAA;;AACnD,MAAMb,MAAM,qBAAGC,aAAa,CAACQ,OAAO,CAACpB,IAAT,CAAhB,6BAAkCwB,QAAQ,KAAK,MAA3D;AACA,SAAOb,MAAM,GAAG,MAAH,GAAY,OAAzB;AACD;AAED;AACA;AACA;AACA;;;AACO,SAASc,WAAT,CACLC,EADK,EAEL;AACA,MAAI,EAAE,gBAAgBX,MAAlB,CAAJ,EAA+B;AAC7B,WAAOX,WAAP;AACD;;AAED,MAAMU,cAAc,GAAGC,MAAM,CAACC,UAAP,CAAkBI,OAAO,CAACpB,IAA1B,CAAvB;;AAEA,MAAM2B,QAAQ,GAAG,SAAXA,QAAW,GAAM;AACrBD,IAAAA,EAAE,CAACZ,cAAc,CAACK,OAAf,GAAyB,MAAzB,GAAkC,OAAnC,EAA4C,IAA5C,CAAF;AACD,GAFD;;AAIAL,EAAAA,cAAc,CAACc,gBAAf,CAAgC,QAAhC,EAA0CD,QAA1C;AAEA,SAAO,YAAM;AACXb,IAAAA,cAAc,CAACe,mBAAf,CAAmC,QAAnC,EAA6CF,QAA7C;AACD,GAFD;AAGD;;AAEM,IAAMG,IAAI,GAAG;AAClBC,EAAAA,GAAG,EAAE;AAAA,WACHxB,QAAQ,CAACyB,eAAT,CAAyBC,KAAzB,CAA+BC,gBAA/B,CACE,wBADF,CADG;AAAA,GADa;AAKlBC,EAAAA,GAAG,EAAE,aAACC,IAAD,EAAqB;AACxB,QAAI5B,gBAAJ,EAAe;AACbD,MAAAA,QAAQ,CAACyB,eAAT,CAAyBC,KAAzB,CAA+BI,WAA/B,CAA2C,wBAA3C,EAAqED,IAArE;AACD;AACF;AATiB,CAAb","sourcesContent":["import { isBrowser, noop } from \"@chakra-ui/utils\"\n\nconst classNames = {\n  light: \"chakra-ui-light\",\n  dark: \"chakra-ui-dark\",\n}\n\nexport type ColorMode = \"light\" | \"dark\"\n\n/**\n * SSR: Graceful fallback for the `body` element\n */\nconst mockBody = {\n  classList: { add: noop, remove: noop },\n}\n\nconst getBody = (document: Document) => (isBrowser ? document.body : mockBody)\n\n/**\n * Function to add/remove class from `body` based on color mode\n */\nexport function syncBodyClassName(isDark: boolean, document: Document) {\n  const body = getBody(document)\n  body.classList.add(isDark ? classNames.dark : classNames.light)\n  body.classList.remove(isDark ? classNames.light : classNames.dark)\n}\n\n/**\n * Check if JS media query matches the query string passed\n */\nfunction getMediaQuery(query: string) {\n  const mediaQueryList = window.matchMedia?.(query)\n  if (!mediaQueryList) {\n    return undefined\n  }\n  return !!mediaQueryList.media === mediaQueryList.matches\n}\n\nexport const queries = {\n  light: \"(prefers-color-scheme: light)\",\n  dark: \"(prefers-color-scheme: dark)\",\n}\n\nexport const lightQuery = queries.light\nexport const darkQuery = queries.dark\n\nexport function getColorScheme(fallback?: ColorMode) {\n  const isDark = getMediaQuery(queries.dark) ?? fallback === \"dark\"\n  return isDark ? \"dark\" : \"light\"\n}\n\n/**\n * Adds system os color mode listener, and run the callback\n * once preference changes\n */\nexport function addListener(\n  fn: (cm: ColorMode, isListenerEvent: true) => unknown,\n) {\n  if (!(\"matchMedia\" in window)) {\n    return noop\n  }\n\n  const mediaQueryList = window.matchMedia(queries.dark)\n\n  const listener = () => {\n    fn(mediaQueryList.matches ? \"dark\" : \"light\", true)\n  }\n\n  mediaQueryList.addEventListener(\"change\", listener)\n\n  return () => {\n    mediaQueryList.removeEventListener(\"change\", listener)\n  }\n}\n\nexport const root = {\n  get: () =>\n    document.documentElement.style.getPropertyValue(\n      \"--chakra-ui-color-mode\",\n    ) as ColorMode,\n  set: (mode: ColorMode) => {\n    if (isBrowser) {\n      document.documentElement.style.setProperty(\"--chakra-ui-color-mode\", mode)\n    }\n  },\n}\n"],"file":"color-mode.utils.js"}

dist/esm/color-mode-provider.js

 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+import { useEnvironment } from "@chakra-ui/react-env";
 import { isBrowser, noop, __DEV__ } from "@chakra-ui/utils";
 import * as React from "react";
-import { addListener, getColorScheme, syncBodyClassName, root } from "./color-mode.utils";
+import { addListener, getColorScheme, root, syncBodyClassName } from "./color-mode.utils";
 import { localStorageManager } from "./storage-manager";
@@ -42,2 +43,3 @@ export var ColorModeContext = /*#__PURE__*/React.createContext({});
   } = props;
+  var defaultColorMode = initialColorMode === "dark" ? "dark" : "light";
   /**
@@ -50,3 +52,6 @@ * Only attempt to retrieve if we're on the server. Else this will result
 
-  var [colorMode, rawSetColorMode] = React.useState(colorModeManager.type === "cookie" ? colorModeManager.get(initialColorMode) : initialColorMode);
+  var [colorMode, rawSetColorMode] = React.useState(colorModeManager.type === "cookie" ? colorModeManager.get(defaultColorMode) : defaultColorMode);
+  var {
+    document
+  } = useEnvironment();
   React.useEffect(() => {
@@ -63,3 +68,3 @@ /**
     if (isBrowser && colorModeManager.type === "localStorage") {
-      var mode = useSystemColorMode ? getColorScheme(initialColorMode) : root.get() || colorModeManager.get();
+      var mode = useSystemColorMode ? getColorScheme(defaultColorMode) : root.get() || colorModeManager.get() || getColorScheme(defaultColorMode);
 
@@ -70,12 +75,19 @@ if (mode) {
     }
-  }, [colorModeManager, useSystemColorMode, initialColorMode]);
+  }, [colorModeManager, useSystemColorMode, defaultColorMode]);
   React.useEffect(() => {
     var isDark = colorMode === "dark";
-    syncBodyClassName(isDark);
+    syncBodyClassName(isDark, document);
     root.set(isDark ? "dark" : "light");
-  }, [colorMode]);
-  var setColorMode = React.useCallback(value => {
-    colorModeManager.set(value);
+  }, [colorMode, document]);
+  var setColorMode = React.useCallback(function (value, isListenerEvent) {
+    if (isListenerEvent === void 0) {
+      isListenerEvent = false;
+    }
+
+    if (!isListenerEvent) {
+      colorModeManager.set(value);
+    } else if (colorModeManager.get() && !useSystemColorMode) return;
+
     rawSetColorMode(value);
-  }, [colorModeManager]);
+  }, [colorModeManager, useSystemColorMode]);
   var toggleColorMode = React.useCallback(() => {
@@ -85,5 +97,6 @@ setColorMode(colorMode === "light" ? "dark" : "light");
   React.useEffect(() => {
+    var shouldUseSystemListener = useSystemColorMode || initialColorMode === "system";
     var removeListener;
 
-    if (useSystemColorMode) {
+    if (shouldUseSystemListener) {
       removeListener = addListener(setColorMode);
@@ -93,7 +106,7 @@ }
     return () => {
-      if (removeListener && useSystemColorMode) {
+      if (removeListener && shouldUseSystemListener) {
         removeListener();
       }
     };
-  }, [setColorMode, useSystemColorMode]); // presence of `value` indicates a controlled context
+  }, [setColorMode, useSystemColorMode, initialColorMode]); // presence of `value` indicates a controlled context
 
@@ -100,0 +113,0 @@ var context = React.useMemo(() => ({

dist/esm/color-mode-provider.js.map

@@ -1,1 +0,1 @@
-{"version":3,"sources":["../../src/color-mode-provider.tsx"],"names":["isBrowser","noop","__DEV__","React","addListener","getColorScheme","syncBodyClassName","root","localStorageManager","ColorModeContext","createContext","displayName","useColorMode","context","useContext","undefined","Error","ColorModeProvider","props","value","children","options","useSystemColorMode","initialColorMode","colorModeManager","colorMode","rawSetColorMode","useState","type","get","useEffect","mode","isDark","set","setColorMode","useCallback","toggleColorMode","removeListener","useMemo","DarkMode","LightMode","useColorModeValue","light","dark"],"mappings":"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","sourcesContent":["import { isBrowser, noop, __DEV__ } from \"@chakra-ui/utils\"\nimport * as React from \"react\"\nimport {\n  addListener,\n  ColorMode,\n  getColorScheme,\n  syncBodyClassName,\n  root,\n} from \"./color-mode.utils\"\nimport { localStorageManager, StorageManager } from \"./storage-manager\"\n\nexport type { ColorMode }\n\nexport interface ColorModeOptions {\n  initialColorMode?: ColorMode\n  useSystemColorMode?: boolean\n}\n\ninterface ColorModeContextType {\n  colorMode: ColorMode\n  toggleColorMode: () => void\n  setColorMode: (value: any) => void\n}\n\nexport const ColorModeContext = React.createContext({} as ColorModeContextType)\n\nif (__DEV__) {\n  ColorModeContext.displayName = \"ColorModeContext\"\n}\n\n/**\n * React hook that reads from `ColorModeProvider` context\n * Returns the color mode and function to toggle it\n */\nexport const useColorMode = () => {\n  const context = React.useContext(ColorModeContext)\n  if (context === undefined) {\n    throw new Error(\"useColorMode must be used within a ColorModeProvider\")\n  }\n  return context\n}\n\nexport interface ColorModeProviderProps {\n  value?: ColorMode\n  children?: React.ReactNode\n  options: ColorModeOptions\n  colorModeManager?: StorageManager\n}\n\n/**\n * Provides context for the color mode based on config in `theme`\n * Returns the color mode and function to toggle the color mode\n */\nexport function ColorModeProvider(props: ColorModeProviderProps) {\n  const {\n    value,\n    children,\n    options: { useSystemColorMode, initialColorMode },\n    colorModeManager = localStorageManager,\n  } = props\n\n  /**\n   * Only attempt to retrieve if we're on the server. Else this will result\n   * in a hydration mismatch warning and partially invalid visuals.\n   *\n   * Else fallback safely to `theme.config.initialColormode` (default light)\n   */\n  const [colorMode, rawSetColorMode] = React.useState<ColorMode | undefined>(\n    colorModeManager.type === \"cookie\"\n      ? colorModeManager.get(initialColorMode)\n      : initialColorMode,\n  )\n\n  React.useEffect(() => {\n    /**\n     * Since we cannot initially retrieve localStorage to due above mentioned\n     * reasons, do so after hydration.\n     *\n     * Priority:\n     * - system color mode\n     * - defined value on <ColorModeScript />, if present\n     * - previously stored value\n     */\n    if (isBrowser && colorModeManager.type === \"localStorage\") {\n      const mode = useSystemColorMode\n        ? getColorScheme(initialColorMode)\n        : root.get() || colorModeManager.get()\n\n      if (mode) {\n        rawSetColorMode(mode)\n      }\n    }\n  }, [colorModeManager, useSystemColorMode, initialColorMode])\n\n  React.useEffect(() => {\n    const isDark = colorMode === \"dark\"\n\n    syncBodyClassName(isDark)\n    root.set(isDark ? \"dark\" : \"light\")\n  }, [colorMode])\n\n  const setColorMode = React.useCallback(\n    (value: ColorMode) => {\n      colorModeManager.set(value)\n      rawSetColorMode(value)\n    },\n    [colorModeManager],\n  )\n\n  const toggleColorMode = React.useCallback(() => {\n    setColorMode(colorMode === \"light\" ? \"dark\" : \"light\")\n  }, [colorMode, setColorMode])\n\n  React.useEffect(() => {\n    let removeListener: any\n    if (useSystemColorMode) {\n      removeListener = addListener(setColorMode)\n    }\n    return () => {\n      if (removeListener && useSystemColorMode) {\n        removeListener()\n      }\n    }\n  }, [setColorMode, useSystemColorMode])\n\n  // presence of `value` indicates a controlled context\n  const context = React.useMemo(\n    () => ({\n      colorMode: (value ?? colorMode) as ColorMode,\n      toggleColorMode: value ? noop : toggleColorMode,\n      setColorMode: value ? noop : setColorMode,\n    }),\n    [colorMode, setColorMode, toggleColorMode, value],\n  )\n\n  return (\n    <ColorModeContext.Provider value={context}>\n      {children}\n    </ColorModeContext.Provider>\n  )\n}\n\nif (__DEV__) {\n  ColorModeProvider.displayName = \"ColorModeProvider\"\n}\n\n/**\n * Locks the color mode to `dark`, without any way to change it.\n */\nexport const DarkMode: React.FC = (props) => (\n  <ColorModeContext.Provider\n    value={{ colorMode: \"dark\", toggleColorMode: noop, setColorMode: noop }}\n    {...props}\n  />\n)\n\nif (__DEV__) {\n  DarkMode.displayName = \"DarkMode\"\n}\n\n/**\n * Locks the color mode to `light` without any way to change it.\n */\nexport const LightMode: React.FC = (props) => (\n  <ColorModeContext.Provider\n    value={{ colorMode: \"light\", toggleColorMode: noop, setColorMode: noop }}\n    {...props}\n  />\n)\n\nif (__DEV__) {\n  LightMode.displayName = \"LightMode\"\n}\n\n/**\n * Change value based on color mode.\n *\n * @param light the light mode value\n * @param dark the dark mode value\n *\n * @example\n *\n * ```js\n * const Icon = useColorModeValue(MoonIcon, SunIcon)\n * ```\n */\nexport function useColorModeValue<TLight = unknown, TDark = unknown>(\n  light: TLight,\n  dark: TDark,\n) {\n  const { colorMode } = useColorMode()\n  return colorMode === \"dark\" ? dark : light\n}\n"],"file":"color-mode-provider.js"}
+{"version":3,"sources":["../../src/color-mode-provider.tsx"],"names":["useEnvironment","isBrowser","noop","__DEV__","React","addListener","getColorScheme","root","syncBodyClassName","localStorageManager","ColorModeContext","createContext","displayName","useColorMode","context","useContext","undefined","Error","ColorModeProvider","props","value","children","options","useSystemColorMode","initialColorMode","colorModeManager","defaultColorMode","colorMode","rawSetColorMode","useState","type","get","document","useEffect","mode","isDark","set","setColorMode","useCallback","isListenerEvent","toggleColorMode","shouldUseSystemListener","removeListener","useMemo","DarkMode","LightMode","useColorModeValue","light","dark"],"mappings":";;AAAA,SAASA,cAAT,QAA+B,sBAA/B;AACA,SAASC,SAAT,EAAoBC,IAApB,EAA0BC,OAA1B,QAAyC,kBAAzC;AACA,OAAO,KAAKC,KAAZ,MAAuB,OAAvB;AACA,SACEC,WADF,EAGEC,cAHF,EAIEC,IAJF,EAKEC,iBALF,QAMO,oBANP;AAOA,SAASC,mBAAT,QAAoD,mBAApD;AAgBA,OAAO,IAAMC,gBAAgB,gBAAGN,KAAK,CAACO,aAAN,CAAoB,EAApB,CAAzB;;AAEP,IAAIR,OAAJ,EAAa;AACXO,EAAAA,gBAAgB,CAACE,WAAjB,GAA+B,kBAA/B;AACD;AAED;AACA;AACA;AACA;;;AACA,OAAO,IAAMC,YAAY,GAAG,MAAM;AAChC,MAAMC,OAAO,GAAGV,KAAK,CAACW,UAAN,CAAiBL,gBAAjB,CAAhB;;AACA,MAAII,OAAO,KAAKE,SAAhB,EAA2B;AACzB,UAAM,IAAIC,KAAJ,CAAU,sDAAV,CAAN;AACD;;AACD,SAAOH,OAAP;AACD,CANM;;AAeP;AACA;AACA;AACA;AACA,OAAO,SAASI,iBAAT,CAA2BC,KAA3B,EAA0D;AAC/D,MAAM;AACJC,IAAAA,KADI;AAEJC,IAAAA,QAFI;AAGJC,IAAAA,OAAO,EAAE;AAAEC,MAAAA,kBAAF;AAAsBC,MAAAA;AAAtB,KAHL;AAIJC,IAAAA,gBAAgB,GAAGhB;AAJf,MAKFU,KALJ;AAOA,MAAMO,gBAAgB,GAAGF,gBAAgB,KAAK,MAArB,GAA8B,MAA9B,GAAuC,OAAhE;AAEA;AACF;AACA;AACA;AACA;AACA;;AACE,MAAM,CAACG,SAAD,EAAYC,eAAZ,IAA+BxB,KAAK,CAACyB,QAAN,CACnCJ,gBAAgB,CAACK,IAAjB,KAA0B,QAA1B,GACIL,gBAAgB,CAACM,GAAjB,CAAqBL,gBAArB,CADJ,GAEIA,gBAH+B,CAArC;AAMA,MAAM;AAAEM,IAAAA;AAAF,MAAehC,cAAc,EAAnC;AAEAI,EAAAA,KAAK,CAAC6B,SAAN,CAAgB,MAAM;AACpB;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACI,QAAIhC,SAAS,IAAIwB,gBAAgB,CAACK,IAAjB,KAA0B,cAA3C,EAA2D;AACzD,UAAMI,IAAI,GAAGX,kBAAkB,GAC3BjB,cAAc,CAACoB,gBAAD,CADa,GAE3BnB,IAAI,CAACwB,GAAL,MACAN,gBAAgB,CAACM,GAAjB,EADA,IAEAzB,cAAc,CAACoB,gBAAD,CAJlB;;AAMA,UAAIQ,IAAJ,EAAU;AACRN,QAAAA,eAAe,CAACM,IAAD,CAAf;AACD;AACF;AACF,GArBD,EAqBG,CAACT,gBAAD,EAAmBF,kBAAnB,EAAuCG,gBAAvC,CArBH;AAuBAtB,EAAAA,KAAK,CAAC6B,SAAN,CAAgB,MAAM;AACpB,QAAME,MAAM,GAAGR,SAAS,KAAK,MAA7B;AAEAnB,IAAAA,iBAAiB,CAAC2B,MAAD,EAASH,QAAT,CAAjB;AACAzB,IAAAA,IAAI,CAAC6B,GAAL,CAASD,MAAM,GAAG,MAAH,GAAY,OAA3B;AACD,GALD,EAKG,CAACR,SAAD,EAAYK,QAAZ,CALH;AAOA,MAAMK,YAAY,GAAGjC,KAAK,CAACkC,WAAN,CACnB,UAAClB,KAAD,EAAmBmB,eAAnB,EAA+C;AAAA,QAA5BA,eAA4B;AAA5BA,MAAAA,eAA4B,GAAV,KAAU;AAAA;;AAC7C,QAAI,CAACA,eAAL,EAAsB;AACpBd,MAAAA,gBAAgB,CAACW,GAAjB,CAAqBhB,KAArB;AACD,KAFD,MAEO,IAAIK,gBAAgB,CAACM,GAAjB,MAA0B,CAACR,kBAA/B,EAAmD;;AAE1DK,IAAAA,eAAe,CAACR,KAAD,CAAf;AACD,GAPkB,EAQnB,CAACK,gBAAD,EAAmBF,kBAAnB,CARmB,CAArB;AAWA,MAAMiB,eAAe,GAAGpC,KAAK,CAACkC,WAAN,CAAkB,MAAM;AAC9CD,IAAAA,YAAY,CAACV,SAAS,KAAK,OAAd,GAAwB,MAAxB,GAAiC,OAAlC,CAAZ;AACD,GAFuB,EAErB,CAACA,SAAD,EAAYU,YAAZ,CAFqB,CAAxB;AAIAjC,EAAAA,KAAK,CAAC6B,SAAN,CAAgB,MAAM;AACpB,QAAMQ,uBAAuB,GAC3BlB,kBAAkB,IAAIC,gBAAgB,KAAK,QAD7C;AAEA,QAAIkB,cAAJ;;AACA,QAAID,uBAAJ,EAA6B;AAC3BC,MAAAA,cAAc,GAAGrC,WAAW,CAACgC,YAAD,CAA5B;AACD;;AACD,WAAO,MAAM;AACX,UAAIK,cAAc,IAAID,uBAAtB,EAA+C;AAC7CC,QAAAA,cAAc;AACf;AACF,KAJD;AAKD,GAZD,EAYG,CAACL,YAAD,EAAed,kBAAf,EAAmCC,gBAAnC,CAZH,EArE+D,CAmF/D;;AACA,MAAMV,OAAO,GAAGV,KAAK,CAACuC,OAAN,CACd,OAAO;AACLhB,IAAAA,SAAS,EAAGP,KAAH,WAAGA,KAAH,GAAYO,SADhB;AAELa,IAAAA,eAAe,EAAEpB,KAAK,GAAGlB,IAAH,GAAUsC,eAF3B;AAGLH,IAAAA,YAAY,EAAEjB,KAAK,GAAGlB,IAAH,GAAUmC;AAHxB,GAAP,CADc,EAMd,CAACV,SAAD,EAAYU,YAAZ,EAA0BG,eAA1B,EAA2CpB,KAA3C,CANc,CAAhB;AASA,sBACE,oBAAC,gBAAD,CAAkB,QAAlB;AAA2B,IAAA,KAAK,EAAEN;AAAlC,KACGO,QADH,CADF;AAKD;;AAED,IAAIlB,OAAJ,EAAa;AACXe,EAAAA,iBAAiB,CAACN,WAAlB,GAAgC,mBAAhC;AACD;AAED;AACA;AACA;;;AACA,OAAO,IAAMgC,QAAkB,GAAIzB,KAAD,iBAChC,oBAAC,gBAAD,CAAkB,QAAlB;AACE,EAAA,KAAK,EAAE;AAAEQ,IAAAA,SAAS,EAAE,MAAb;AAAqBa,IAAAA,eAAe,EAAEtC,IAAtC;AAA4CmC,IAAAA,YAAY,EAAEnC;AAA1D;AADT,GAEMiB,KAFN,EADK;;AAOP,IAAIhB,OAAJ,EAAa;AACXyC,EAAAA,QAAQ,CAAChC,WAAT,GAAuB,UAAvB;AACD;AAED;AACA;AACA;;;AACA,OAAO,IAAMiC,SAAmB,GAAI1B,KAAD,iBACjC,oBAAC,gBAAD,CAAkB,QAAlB;AACE,EAAA,KAAK,EAAE;AAAEQ,IAAAA,SAAS,EAAE,OAAb;AAAsBa,IAAAA,eAAe,EAAEtC,IAAvC;AAA6CmC,IAAAA,YAAY,EAAEnC;AAA3D;AADT,GAEMiB,KAFN,EADK;;AAOP,IAAIhB,OAAJ,EAAa;AACX0C,EAAAA,SAAS,CAACjC,WAAV,GAAwB,WAAxB;AACD;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,OAAO,SAASkC,iBAAT,CACLC,KADK,EAELC,IAFK,EAGL;AACA,MAAM;AAAErB,IAAAA;AAAF,MAAgBd,YAAY,EAAlC;AACA,SAAOc,SAAS,KAAK,MAAd,GAAuBqB,IAAvB,GAA8BD,KAArC;AACD","sourcesContent":["import { useEnvironment } from \"@chakra-ui/react-env\"\nimport { isBrowser, noop, __DEV__ } from \"@chakra-ui/utils\"\nimport * as React from \"react\"\nimport {\n  addListener,\n  ColorMode,\n  getColorScheme,\n  root,\n  syncBodyClassName,\n} from \"./color-mode.utils\"\nimport { localStorageManager, StorageManager } from \"./storage-manager\"\n\ntype ConfigColorMode = ColorMode | \"system\" | undefined\nexport type { ColorMode, ConfigColorMode }\n\nexport interface ColorModeOptions {\n  initialColorMode?: ConfigColorMode\n  useSystemColorMode?: boolean\n}\n\ninterface ColorModeContextType {\n  colorMode: ColorMode\n  toggleColorMode: () => void\n  setColorMode: (value: any) => void\n}\n\nexport const ColorModeContext = React.createContext({} as ColorModeContextType)\n\nif (__DEV__) {\n  ColorModeContext.displayName = \"ColorModeContext\"\n}\n\n/**\n * React hook that reads from `ColorModeProvider` context\n * Returns the color mode and function to toggle it\n */\nexport const useColorMode = () => {\n  const context = React.useContext(ColorModeContext)\n  if (context === undefined) {\n    throw new Error(\"useColorMode must be used within a ColorModeProvider\")\n  }\n  return context\n}\n\nexport interface ColorModeProviderProps {\n  value?: ColorMode\n  children?: React.ReactNode\n  options: ColorModeOptions\n  colorModeManager?: StorageManager\n}\n\n/**\n * Provides context for the color mode based on config in `theme`\n * Returns the color mode and function to toggle the color mode\n */\nexport function ColorModeProvider(props: ColorModeProviderProps) {\n  const {\n    value,\n    children,\n    options: { useSystemColorMode, initialColorMode },\n    colorModeManager = localStorageManager,\n  } = props\n\n  const defaultColorMode = initialColorMode === \"dark\" ? \"dark\" : \"light\"\n\n  /**\n   * Only attempt to retrieve if we're on the server. Else this will result\n   * in a hydration mismatch warning and partially invalid visuals.\n   *\n   * Else fallback safely to `theme.config.initialColormode` (default light)\n   */\n  const [colorMode, rawSetColorMode] = React.useState<ColorMode | undefined>(\n    colorModeManager.type === \"cookie\"\n      ? colorModeManager.get(defaultColorMode)\n      : defaultColorMode,\n  )\n\n  const { document } = useEnvironment()\n\n  React.useEffect(() => {\n    /**\n     * Since we cannot initially retrieve localStorage to due above mentioned\n     * reasons, do so after hydration.\n     *\n     * Priority:\n     * - system color mode\n     * - defined value on <ColorModeScript />, if present\n     * - previously stored value\n     */\n    if (isBrowser && colorModeManager.type === \"localStorage\") {\n      const mode = useSystemColorMode\n        ? getColorScheme(defaultColorMode)\n        : root.get() ||\n          colorModeManager.get() ||\n          getColorScheme(defaultColorMode)\n\n      if (mode) {\n        rawSetColorMode(mode)\n      }\n    }\n  }, [colorModeManager, useSystemColorMode, defaultColorMode])\n\n  React.useEffect(() => {\n    const isDark = colorMode === \"dark\"\n\n    syncBodyClassName(isDark, document)\n    root.set(isDark ? \"dark\" : \"light\")\n  }, [colorMode, document])\n\n  const setColorMode = React.useCallback(\n    (value: ColorMode, isListenerEvent = false) => {\n      if (!isListenerEvent) {\n        colorModeManager.set(value)\n      } else if (colorModeManager.get() && !useSystemColorMode) return\n\n      rawSetColorMode(value)\n    },\n    [colorModeManager, useSystemColorMode],\n  )\n\n  const toggleColorMode = React.useCallback(() => {\n    setColorMode(colorMode === \"light\" ? \"dark\" : \"light\")\n  }, [colorMode, setColorMode])\n\n  React.useEffect(() => {\n    const shouldUseSystemListener =\n      useSystemColorMode || initialColorMode === \"system\"\n    let removeListener: any\n    if (shouldUseSystemListener) {\n      removeListener = addListener(setColorMode)\n    }\n    return () => {\n      if (removeListener && shouldUseSystemListener) {\n        removeListener()\n      }\n    }\n  }, [setColorMode, useSystemColorMode, initialColorMode])\n\n  // presence of `value` indicates a controlled context\n  const context = React.useMemo(\n    () => ({\n      colorMode: (value ?? colorMode) as ColorMode,\n      toggleColorMode: value ? noop : toggleColorMode,\n      setColorMode: value ? noop : setColorMode,\n    }),\n    [colorMode, setColorMode, toggleColorMode, value],\n  )\n\n  return (\n    <ColorModeContext.Provider value={context}>\n      {children}\n    </ColorModeContext.Provider>\n  )\n}\n\nif (__DEV__) {\n  ColorModeProvider.displayName = \"ColorModeProvider\"\n}\n\n/**\n * Locks the color mode to `dark`, without any way to change it.\n */\nexport const DarkMode: React.FC = (props) => (\n  <ColorModeContext.Provider\n    value={{ colorMode: \"dark\", toggleColorMode: noop, setColorMode: noop }}\n    {...props}\n  />\n)\n\nif (__DEV__) {\n  DarkMode.displayName = \"DarkMode\"\n}\n\n/**\n * Locks the color mode to `light` without any way to change it.\n */\nexport const LightMode: React.FC = (props) => (\n  <ColorModeContext.Provider\n    value={{ colorMode: \"light\", toggleColorMode: noop, setColorMode: noop }}\n    {...props}\n  />\n)\n\nif (__DEV__) {\n  LightMode.displayName = \"LightMode\"\n}\n\n/**\n * Change value based on color mode.\n *\n * @param light the light mode value\n * @param dark the dark mode value\n *\n * @example\n *\n * ```js\n * const Icon = useColorModeValue(MoonIcon, SunIcon)\n * ```\n */\nexport function useColorModeValue<TLight = unknown, TDark = unknown>(\n  light: TLight,\n  dark: TDark,\n) {\n  const { colorMode } = useColorMode()\n  return colorMode === \"dark\" ? dark : light\n}\n"],"file":"color-mode-provider.js"}

dist/esm/color-mode-script.js.map

@@ -1,1 +0,1 @@
-{"version":3,"sources":["../../src/color-mode-script.tsx"],"names":["React","setScript","initialValue","mql","window","matchMedia","systemPreference","matches","persistedPreference","localStorage","getItem","error","console","log","isInStorage","colorMode","root","document","documentElement","style","setProperty","ColorModeScript","props","initialColorMode","html","String","nonce","__html"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;;AAKA,SAASC,SAAT,CAAmBC,YAAnB,EAAuC;AACrC,MAAMC,GAAG,GAAGC,MAAM,CAACC,UAAP,CAAkB,8BAAlB,CAAZ;AACA,MAAMC,gBAAgB,GAAGH,GAAG,CAACI,OAAJ,GAAc,MAAd,GAAuB,OAAhD;AAEA,MAAIC,mBAAJ;;AAEA,MAAI;AACFA,IAAAA,mBAAmB,GAAGC,YAAY,CAACC,OAAb,CAAqB,sBAArB,CAAtB;AACD,GAFD,CAEE,OAAOC,KAAP,EAAc;AACdC,IAAAA,OAAO,CAACC,GAAR,CACE,6FADF;AAGD;;AAED,MAAMC,WAAW,GAAG,OAAON,mBAAP,KAA+B,QAAnD;AAEA,MAAIO,SAAJ;;AAEA,MAAID,WAAJ,EAAiB;AACfC,IAAAA,SAAS,GAAGP,mBAAZ;AACD,GAFD,MAEO;AACLO,IAAAA,SAAS,GAAGb,YAAY,KAAK,QAAjB,GAA4BI,gBAA5B,GAA+CJ,YAA3D;AACD;;AAED,MAAIa,SAAJ,EAAe;AACb,QAAMC,IAAI,GAAGC,QAAQ,CAACC,eAAtB;AACAF,IAAAA,IAAI,CAACG,KAAL,CAAWC,WAAX,CAAuB,wBAAvB,EAAiDL,SAAjD;AACD;AACF;;AAUD;AACA;AACA;AACA;AACA,OAAO,IAAMM,eAAe,GAAIC,KAAD,IAAiC;AAC9D,MAAM;AAAEC,IAAAA,gBAAgB,GAAG;AAArB,MAAiCD,KAAvC;AACA,MAAME,IAAI,SAAOC,MAAM,CAACxB,SAAD,CAAb,WAA8BsB,gBAA9B,OAAV;AACA,sBACE;AAAQ,IAAA,KAAK,EAAED,KAAK,CAACI,KAArB;AAA4B,IAAA,uBAAuB,EAAE;AAAEC,MAAAA,MAAM,EAAEH;AAAV;AAArD,IADF;AAGD,CANM","sourcesContent":["import * as React from \"react\"\nimport { ColorMode } from \"./color-mode-provider\"\n\ntype Mode = ColorMode | \"system\" | undefined\n\nfunction setScript(initialValue: Mode) {\n  const mql = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  const systemPreference = mql.matches ? \"dark\" : \"light\"\n\n  let persistedPreference: Mode\n\n  try {\n    persistedPreference = localStorage.getItem(\"chakra-ui-color-mode\") as Mode\n  } catch (error) {\n    console.log(\n      \"Chakra UI: localStorage is not available. Color mode persistence might not work as expected\",\n    )\n  }\n\n  const isInStorage = typeof persistedPreference === \"string\"\n\n  let colorMode: Mode\n\n  if (isInStorage) {\n    colorMode = persistedPreference\n  } else {\n    colorMode = initialValue === \"system\" ? systemPreference : initialValue\n  }\n\n  if (colorMode) {\n    const root = document.documentElement\n    root.style.setProperty(\"--chakra-ui-color-mode\", colorMode)\n  }\n}\n\ninterface ColorModeScriptProps {\n  initialColorMode?: Mode\n  /**\n   * Optional nonce that will be passed to the created `<script>` tag.\n   */\n  nonce?: string\n}\n\n/**\n * Script to add to the root of your application when using localStorage,\n * to help prevent flash of color mode that can happen during page load.\n */\nexport const ColorModeScript = (props: ColorModeScriptProps) => {\n  const { initialColorMode = \"light\" } = props\n  const html = `(${String(setScript)})('${initialColorMode}')`\n  return (\n    <script nonce={props.nonce} dangerouslySetInnerHTML={{ __html: html }} />\n  )\n}\n"],"file":"color-mode-script.js"}
+{"version":3,"sources":["../../src/color-mode-script.tsx"],"names":["React","setScript","initialValue","mql","window","matchMedia","systemPreference","matches","persistedPreference","localStorage","getItem","error","console","log","isInStorage","colorMode","root","document","documentElement","style","setProperty","ColorModeScript","props","initialColorMode","html","String","nonce","__html"],"mappings":"AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;;AAGA,SAASC,SAAT,CAAmBC,YAAnB,EAAkD;AAChD,MAAMC,GAAG,GAAGC,MAAM,CAACC,UAAP,CAAkB,8BAAlB,CAAZ;AACA,MAAMC,gBAAgB,GAAGH,GAAG,CAACI,OAAJ,GAAc,MAAd,GAAuB,OAAhD;AAEA,MAAIC,mBAAJ;;AAEA,MAAI;AACFA,IAAAA,mBAAmB,GAAGC,YAAY,CAACC,OAAb,CACpB,sBADoB,CAAtB;AAGD,GAJD,CAIE,OAAOC,KAAP,EAAc;AACdC,IAAAA,OAAO,CAACC,GAAR,CACE,6FADF;AAGD;;AAED,MAAMC,WAAW,GAAG,OAAON,mBAAP,KAA+B,QAAnD;AAEA,MAAIO,SAAJ;;AAEA,MAAID,WAAJ,EAAiB;AACfC,IAAAA,SAAS,GAAGP,mBAAZ;AACD,GAFD,MAEO;AACLO,IAAAA,SAAS,GAAGb,YAAY,KAAK,QAAjB,GAA4BI,gBAA5B,GAA+CJ,YAA3D;AACD;;AAED,MAAIa,SAAJ,EAAe;AACb,QAAMC,IAAI,GAAGC,QAAQ,CAACC,eAAtB;AACAF,IAAAA,IAAI,CAACG,KAAL,CAAWC,WAAX,CAAuB,wBAAvB,EAAiDL,SAAjD;AACD;AACF;;AAUD;AACA;AACA;AACA;AACA,OAAO,IAAMM,eAAe,GAAIC,KAAD,IAAiC;AAC9D,MAAM;AAAEC,IAAAA,gBAAgB,GAAG;AAArB,MAAiCD,KAAvC;AACA,MAAME,IAAI,SAAOC,MAAM,CAACxB,SAAD,CAAb,WAA8BsB,gBAA9B,OAAV;AACA,sBACE;AAAQ,IAAA,KAAK,EAAED,KAAK,CAACI,KAArB;AAA4B,IAAA,uBAAuB,EAAE;AAAEC,MAAAA,MAAM,EAAEH;AAAV;AAArD,IADF;AAGD,CANM","sourcesContent":["import * as React from \"react\"\nimport { ConfigColorMode } from \"./color-mode-provider\"\n\nfunction setScript(initialValue: ConfigColorMode) {\n  const mql = window.matchMedia(\"(prefers-color-scheme: dark)\")\n  const systemPreference = mql.matches ? \"dark\" : \"light\"\n\n  let persistedPreference: ConfigColorMode\n\n  try {\n    persistedPreference = localStorage.getItem(\n      \"chakra-ui-color-mode\",\n    ) as ConfigColorMode\n  } catch (error) {\n    console.log(\n      \"Chakra UI: localStorage is not available. Color mode persistence might not work as expected\",\n    )\n  }\n\n  const isInStorage = typeof persistedPreference === \"string\"\n\n  let colorMode: ConfigColorMode\n\n  if (isInStorage) {\n    colorMode = persistedPreference\n  } else {\n    colorMode = initialValue === \"system\" ? systemPreference : initialValue\n  }\n\n  if (colorMode) {\n    const root = document.documentElement\n    root.style.setProperty(\"--chakra-ui-color-mode\", colorMode)\n  }\n}\n\ninterface ColorModeScriptProps {\n  initialColorMode?: ConfigColorMode\n  /**\n   * Optional nonce that will be passed to the created `<script>` tag.\n   */\n  nonce?: string\n}\n\n/**\n * Script to add to the root of your application when using localStorage,\n * to help prevent flash of color mode that can happen during page load.\n */\nexport const ColorModeScript = (props: ColorModeScriptProps) => {\n  const { initialColorMode = \"light\" } = props\n  const html = `(${String(setScript)})('${initialColorMode}')`\n  return (\n    <script nonce={props.nonce} dangerouslySetInnerHTML={{ __html: html }} />\n  )\n}\n"],"file":"color-mode-script.js"}

dist/esm/color-mode.utils.js

@@ -17,3 +17,3 @@ import { isBrowser, noop } from "@chakra-ui/utils";
 
-var getBody = () => isBrowser ? document.body : mockBody;
+var getBody = document => isBrowser ? document.body : mockBody;
 /**
@@ -24,4 +24,4 @@ * Function to add/remove class from `body` based on color mode
 
-export function syncBodyClassName(isDark) {
-  var body = getBody();
+export function syncBodyClassName(isDark, document) {
+  var body = getBody(document);
   body.classList.add(isDark ? classNames.dark : classNames.light);
@@ -69,9 +69,8 @@ body.classList.remove(isDark ? classNames.light : classNames.dark);
   var listener = () => {
-    fn(mediaQueryList.matches ? "dark" : "light");
+    fn(mediaQueryList.matches ? "dark" : "light", true);
   };
 
-  listener();
-  mediaQueryList.addListener(listener);
+  mediaQueryList.addEventListener("change", listener);
   return () => {
-    mediaQueryList.removeListener(listener);
+    mediaQueryList.removeEventListener("change", listener);
   };
@@ -78,0 +77,0 @@ }

dist/esm/color-mode.utils.js.map

@@ -1,1 +0,1 @@
-{"version":3,"sources":["../../src/color-mode.utils.ts"],"names":["isBrowser","noop","classNames","light","dark","mockBody","classList","add","remove","getBody","document","body","syncBodyClassName","isDark","getMediaQuery","query","mediaQueryList","window","matchMedia","undefined","media","matches","queries","lightQuery","darkQuery","getColorScheme","fallback","addListener","fn","listener","removeListener","root","get","documentElement","style","getPropertyValue","set","mode","setProperty"],"mappings":"AAAA,SAASA,SAAT,EAAoBC,IAApB,QAAgC,kBAAhC;AAEA,IAAMC,UAAU,GAAG;AACjBC,EAAAA,KAAK,EAAE,iBADU;AAEjBC,EAAAA,IAAI,EAAE;AAFW,CAAnB;;AAOA;AACA;AACA;AACA,IAAMC,QAAQ,GAAG;AACfC,EAAAA,SAAS,EAAE;AAAEC,IAAAA,GAAG,EAAEN,IAAP;AAAaO,IAAAA,MAAM,EAAEP;AAArB;AADI,CAAjB;;AAIA,IAAMQ,OAAO,GAAG,MAAOT,SAAS,GAAGU,QAAQ,CAACC,IAAZ,GAAmBN,QAAnD;AAEA;AACA;AACA;;;AACA,OAAO,SAASO,iBAAT,CAA2BC,MAA3B,EAA4C;AACjD,MAAMF,IAAI,GAAGF,OAAO,EAApB;AACAE,EAAAA,IAAI,CAACL,SAAL,CAAeC,GAAf,CAAmBM,MAAM,GAAGX,UAAU,CAACE,IAAd,GAAqBF,UAAU,CAACC,KAAzD;AACAQ,EAAAA,IAAI,CAACL,SAAL,CAAeE,MAAf,CAAsBK,MAAM,GAAGX,UAAU,CAACC,KAAd,GAAsBD,UAAU,CAACE,IAA7D;AACD;AAED;AACA;AACA;;AACA,SAASU,aAAT,CAAuBC,KAAvB,EAAsC;AACpC,MAAMC,cAAc,GAAGC,MAAM,CAACC,UAAV,oBAAGD,MAAM,CAACC,UAAP,CAAoBH,KAApB,CAAvB;;AACA,MAAI,CAACC,cAAL,EAAqB;AACnB,WAAOG,SAAP;AACD;;AACD,SAAO,CAAC,CAACH,cAAc,CAACI,KAAjB,KAA2BJ,cAAc,CAACK,OAAjD;AACD;;AAED,OAAO,IAAMC,OAAO,GAAG;AACrBnB,EAAAA,KAAK,EAAE,+BADc;AAErBC,EAAAA,IAAI,EAAE;AAFe,CAAhB;AAKP,OAAO,IAAMmB,UAAU,GAAGD,OAAO,CAACnB,KAA3B;AACP,OAAO,IAAMqB,SAAS,GAAGF,OAAO,CAAClB,IAA1B;AAEP,OAAO,SAASqB,cAAT,CAAwBC,QAAxB,EAA8C;AAAA;;AACnD,MAAMb,MAAM,qBAAGC,aAAa,CAACQ,OAAO,CAAClB,IAAT,CAAhB,6BAAkCsB,QAAQ,KAAK,MAA3D;AACA,SAAOb,MAAM,GAAG,MAAH,GAAY,OAAzB;AACD;AAED;AACA;AACA;AACA;;AACA,OAAO,SAASc,WAAT,CAAqBC,EAArB,EAAmC;AACxC,MAAI,EAAE,gBAAgBX,MAAlB,CAAJ,EAA+B;AAC7B,WAAOhB,IAAP;AACD;;AAED,MAAMe,cAAc,GAAGC,MAAM,CAACC,UAAP,CAAkBI,OAAO,CAAClB,IAA1B,CAAvB;;AAEA,MAAMyB,QAAQ,GAAG,MAAM;AACrBD,IAAAA,EAAE,CAACZ,cAAc,CAACK,OAAf,GAAyB,MAAzB,GAAkC,OAAnC,CAAF;AACD,GAFD;;AAIAQ,EAAAA,QAAQ;AACRb,EAAAA,cAAc,CAACW,WAAf,CAA2BE,QAA3B;AAEA,SAAO,MAAM;AACXb,IAAAA,cAAc,CAACc,cAAf,CAA8BD,QAA9B;AACD,GAFD;AAGD;AAED,OAAO,IAAME,IAAI,GAAG;AAClBC,EAAAA,GAAG,EAAE,MACHtB,QAAQ,CAACuB,eAAT,CAAyBC,KAAzB,CAA+BC,gBAA/B,CACE,wBADF,CAFgB;AAKlBC,EAAAA,GAAG,EAAGC,IAAD,IAAqB;AACxB,QAAIrC,SAAJ,EAAe;AACbU,MAAAA,QAAQ,CAACuB,eAAT,CAAyBC,KAAzB,CAA+BI,WAA/B,CAA2C,wBAA3C,EAAqED,IAArE;AACD;AACF;AATiB,CAAb","sourcesContent":["import { isBrowser, noop } from \"@chakra-ui/utils\"\n\nconst classNames = {\n  light: \"chakra-ui-light\",\n  dark: \"chakra-ui-dark\",\n}\n\nexport type ColorMode = \"light\" | \"dark\"\n\n/**\n * SSR: Graceful fallback for the `body` element\n */\nconst mockBody = {\n  classList: { add: noop, remove: noop },\n}\n\nconst getBody = () => (isBrowser ? document.body : mockBody)\n\n/**\n * Function to add/remove class from `body` based on color mode\n */\nexport function syncBodyClassName(isDark: boolean) {\n  const body = getBody()\n  body.classList.add(isDark ? classNames.dark : classNames.light)\n  body.classList.remove(isDark ? classNames.light : classNames.dark)\n}\n\n/**\n * Check if JS media query matches the query string passed\n */\nfunction getMediaQuery(query: string) {\n  const mediaQueryList = window.matchMedia?.(query)\n  if (!mediaQueryList) {\n    return undefined\n  }\n  return !!mediaQueryList.media === mediaQueryList.matches\n}\n\nexport const queries = {\n  light: \"(prefers-color-scheme: light)\",\n  dark: \"(prefers-color-scheme: dark)\",\n}\n\nexport const lightQuery = queries.light\nexport const darkQuery = queries.dark\n\nexport function getColorScheme(fallback?: ColorMode) {\n  const isDark = getMediaQuery(queries.dark) ?? fallback === \"dark\"\n  return isDark ? \"dark\" : \"light\"\n}\n\n/**\n * Adds system os color mode listener, and run the callback\n * once preference changes\n */\nexport function addListener(fn: Function) {\n  if (!(\"matchMedia\" in window)) {\n    return noop\n  }\n\n  const mediaQueryList = window.matchMedia(queries.dark)\n\n  const listener = () => {\n    fn(mediaQueryList.matches ? \"dark\" : \"light\")\n  }\n\n  listener()\n  mediaQueryList.addListener(listener)\n\n  return () => {\n    mediaQueryList.removeListener(listener)\n  }\n}\n\nexport const root = {\n  get: () =>\n    document.documentElement.style.getPropertyValue(\n      \"--chakra-ui-color-mode\",\n    ) as ColorMode,\n  set: (mode: ColorMode) => {\n    if (isBrowser) {\n      document.documentElement.style.setProperty(\"--chakra-ui-color-mode\", mode)\n    }\n  },\n}\n"],"file":"color-mode.utils.js"}
+{"version":3,"sources":["../../src/color-mode.utils.ts"],"names":["isBrowser","noop","classNames","light","dark","mockBody","classList","add","remove","getBody","document","body","syncBodyClassName","isDark","getMediaQuery","query","mediaQueryList","window","matchMedia","undefined","media","matches","queries","lightQuery","darkQuery","getColorScheme","fallback","addListener","fn","listener","addEventListener","removeEventListener","root","get","documentElement","style","getPropertyValue","set","mode","setProperty"],"mappings":"AAAA,SAASA,SAAT,EAAoBC,IAApB,QAAgC,kBAAhC;AAEA,IAAMC,UAAU,GAAG;AACjBC,EAAAA,KAAK,EAAE,iBADU;AAEjBC,EAAAA,IAAI,EAAE;AAFW,CAAnB;;AAOA;AACA;AACA;AACA,IAAMC,QAAQ,GAAG;AACfC,EAAAA,SAAS,EAAE;AAAEC,IAAAA,GAAG,EAAEN,IAAP;AAAaO,IAAAA,MAAM,EAAEP;AAArB;AADI,CAAjB;;AAIA,IAAMQ,OAAO,GAAIC,QAAD,IAAyBV,SAAS,GAAGU,QAAQ,CAACC,IAAZ,GAAmBN,QAArE;AAEA;AACA;AACA;;;AACA,OAAO,SAASO,iBAAT,CAA2BC,MAA3B,EAA4CH,QAA5C,EAAgE;AACrE,MAAMC,IAAI,GAAGF,OAAO,CAACC,QAAD,CAApB;AACAC,EAAAA,IAAI,CAACL,SAAL,CAAeC,GAAf,CAAmBM,MAAM,GAAGX,UAAU,CAACE,IAAd,GAAqBF,UAAU,CAACC,KAAzD;AACAQ,EAAAA,IAAI,CAACL,SAAL,CAAeE,MAAf,CAAsBK,MAAM,GAAGX,UAAU,CAACC,KAAd,GAAsBD,UAAU,CAACE,IAA7D;AACD;AAED;AACA;AACA;;AACA,SAASU,aAAT,CAAuBC,KAAvB,EAAsC;AACpC,MAAMC,cAAc,GAAGC,MAAM,CAACC,UAAV,oBAAGD,MAAM,CAACC,UAAP,CAAoBH,KAApB,CAAvB;;AACA,MAAI,CAACC,cAAL,EAAqB;AACnB,WAAOG,SAAP;AACD;;AACD,SAAO,CAAC,CAACH,cAAc,CAACI,KAAjB,KAA2BJ,cAAc,CAACK,OAAjD;AACD;;AAED,OAAO,IAAMC,OAAO,GAAG;AACrBnB,EAAAA,KAAK,EAAE,+BADc;AAErBC,EAAAA,IAAI,EAAE;AAFe,CAAhB;AAKP,OAAO,IAAMmB,UAAU,GAAGD,OAAO,CAACnB,KAA3B;AACP,OAAO,IAAMqB,SAAS,GAAGF,OAAO,CAAClB,IAA1B;AAEP,OAAO,SAASqB,cAAT,CAAwBC,QAAxB,EAA8C;AAAA;;AACnD,MAAMb,MAAM,qBAAGC,aAAa,CAACQ,OAAO,CAAClB,IAAT,CAAhB,6BAAkCsB,QAAQ,KAAK,MAA3D;AACA,SAAOb,MAAM,GAAG,MAAH,GAAY,OAAzB;AACD;AAED;AACA;AACA;AACA;;AACA,OAAO,SAASc,WAAT,CACLC,EADK,EAEL;AACA,MAAI,EAAE,gBAAgBX,MAAlB,CAAJ,EAA+B;AAC7B,WAAOhB,IAAP;AACD;;AAED,MAAMe,cAAc,GAAGC,MAAM,CAACC,UAAP,CAAkBI,OAAO,CAAClB,IAA1B,CAAvB;;AAEA,MAAMyB,QAAQ,GAAG,MAAM;AACrBD,IAAAA,EAAE,CAACZ,cAAc,CAACK,OAAf,GAAyB,MAAzB,GAAkC,OAAnC,EAA4C,IAA5C,CAAF;AACD,GAFD;;AAIAL,EAAAA,cAAc,CAACc,gBAAf,CAAgC,QAAhC,EAA0CD,QAA1C;AAEA,SAAO,MAAM;AACXb,IAAAA,cAAc,CAACe,mBAAf,CAAmC,QAAnC,EAA6CF,QAA7C;AACD,GAFD;AAGD;AAED,OAAO,IAAMG,IAAI,GAAG;AAClBC,EAAAA,GAAG,EAAE,MACHvB,QAAQ,CAACwB,eAAT,CAAyBC,KAAzB,CAA+BC,gBAA/B,CACE,wBADF,CAFgB;AAKlBC,EAAAA,GAAG,EAAGC,IAAD,IAAqB;AACxB,QAAItC,SAAJ,EAAe;AACbU,MAAAA,QAAQ,CAACwB,eAAT,CAAyBC,KAAzB,CAA+BI,WAA/B,CAA2C,wBAA3C,EAAqED,IAArE;AACD;AACF;AATiB,CAAb","sourcesContent":["import { isBrowser, noop } from \"@chakra-ui/utils\"\n\nconst classNames = {\n  light: \"chakra-ui-light\",\n  dark: \"chakra-ui-dark\",\n}\n\nexport type ColorMode = \"light\" | \"dark\"\n\n/**\n * SSR: Graceful fallback for the `body` element\n */\nconst mockBody = {\n  classList: { add: noop, remove: noop },\n}\n\nconst getBody = (document: Document) => (isBrowser ? document.body : mockBody)\n\n/**\n * Function to add/remove class from `body` based on color mode\n */\nexport function syncBodyClassName(isDark: boolean, document: Document) {\n  const body = getBody(document)\n  body.classList.add(isDark ? classNames.dark : classNames.light)\n  body.classList.remove(isDark ? classNames.light : classNames.dark)\n}\n\n/**\n * Check if JS media query matches the query string passed\n */\nfunction getMediaQuery(query: string) {\n  const mediaQueryList = window.matchMedia?.(query)\n  if (!mediaQueryList) {\n    return undefined\n  }\n  return !!mediaQueryList.media === mediaQueryList.matches\n}\n\nexport const queries = {\n  light: \"(prefers-color-scheme: light)\",\n  dark: \"(prefers-color-scheme: dark)\",\n}\n\nexport const lightQuery = queries.light\nexport const darkQuery = queries.dark\n\nexport function getColorScheme(fallback?: ColorMode) {\n  const isDark = getMediaQuery(queries.dark) ?? fallback === \"dark\"\n  return isDark ? \"dark\" : \"light\"\n}\n\n/**\n * Adds system os color mode listener, and run the callback\n * once preference changes\n */\nexport function addListener(\n  fn: (cm: ColorMode, isListenerEvent: true) => unknown,\n) {\n  if (!(\"matchMedia\" in window)) {\n    return noop\n  }\n\n  const mediaQueryList = window.matchMedia(queries.dark)\n\n  const listener = () => {\n    fn(mediaQueryList.matches ? \"dark\" : \"light\", true)\n  }\n\n  mediaQueryList.addEventListener(\"change\", listener)\n\n  return () => {\n    mediaQueryList.removeEventListener(\"change\", listener)\n  }\n}\n\nexport const root = {\n  get: () =>\n    document.documentElement.style.getPropertyValue(\n      \"--chakra-ui-color-mode\",\n    ) as ColorMode,\n  set: (mode: ColorMode) => {\n    if (isBrowser) {\n      document.documentElement.style.setProperty(\"--chakra-ui-color-mode\", mode)\n    }\n  },\n}\n"],"file":"color-mode.utils.js"}

dist/types/color-mode-provider.d.ts

 import * as React from "react";
 import { ColorMode } from "./color-mode.utils";
 import { StorageManager } from "./storage-manager";
-export type { ColorMode };
+declare type ConfigColorMode = ColorMode | "system" | undefined;
+export type { ColorMode, ConfigColorMode };
 export interface ColorModeOptions {
-    initialColorMode?: ColorMode;
+    initialColorMode?: ConfigColorMode;
     useSystemColorMode?: boolean;
@@ -8,0 +9,0 @@ }

dist/types/color-mode-provider.d.ts.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"color-mode-provider.d.ts","sourceRoot":"","sources":["../../src/color-mode-provider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAEL,SAAS,EAIV,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAAuB,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAEvE,YAAY,EAAE,SAAS,EAAE,CAAA;AAEzB,MAAM,WAAW,gBAAgB;IAC/B,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B;AAED,UAAU,oBAAoB;IAC5B,SAAS,EAAE,SAAS,CAAA;IACpB,eAAe,EAAE,MAAM,IAAI,CAAA;IAC3B,YAAY,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAA;CACnC;AAED,eAAO,MAAM,gBAAgB,qCAAkD,CAAA;AAM/E;;;GAGG;AACH,eAAO,MAAM,YAAY,4BAMxB,CAAA;AAED,MAAM,WAAW,sBAAsB;IACrC,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,OAAO,EAAE,gBAAgB,CAAA;IACzB,gBAAgB,CAAC,EAAE,cAAc,CAAA;CAClC;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eAuF9D;yBAvFe,iBAAiB;;;AA6FjC;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAK5B,CAAA;AAMD;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAK7B,CAAA;AAMD;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,GAAG,OAAO,EAAE,KAAK,GAAG,OAAO,EACjE,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,KAAK,kBAIZ"}
+{"version":3,"file":"color-mode-provider.d.ts","sourceRoot":"","sources":["../../src/color-mode-provider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAEL,SAAS,EAIV,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAAuB,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAEvE,aAAK,eAAe,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAA;AACvD,YAAY,EAAE,SAAS,EAAE,eAAe,EAAE,CAAA;AAE1C,MAAM,WAAW,gBAAgB;IAC/B,gBAAgB,CAAC,EAAE,eAAe,CAAA;IAClC,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B;AAED,UAAU,oBAAoB;IAC5B,SAAS,EAAE,SAAS,CAAA;IACpB,eAAe,EAAE,MAAM,IAAI,CAAA;IAC3B,YAAY,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAA;CACnC;AAED,eAAO,MAAM,gBAAgB,qCAAkD,CAAA;AAM/E;;;GAGG;AACH,eAAO,MAAM,YAAY,4BAMxB,CAAA;AAED,MAAM,WAAW,sBAAsB;IACrC,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,OAAO,EAAE,gBAAgB,CAAA;IACzB,gBAAgB,CAAC,EAAE,cAAc,CAAA;CAClC;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eAkG9D;yBAlGe,iBAAiB;;;AAwGjC;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAK5B,CAAA;AAMD;;GAEG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAK7B,CAAA;AAMD;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,GAAG,OAAO,EAAE,KAAK,GAAG,OAAO,EACjE,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,KAAK,kBAIZ"}

dist/types/color-mode-script.d.ts

 /// <reference types="react" />
-import { ColorMode } from "./color-mode-provider";
-declare type Mode = ColorMode | "system" | undefined;
+import { ConfigColorMode } from "./color-mode-provider";
 interface ColorModeScriptProps {
-    initialColorMode?: Mode;
+    initialColorMode?: ConfigColorMode;
     /**
@@ -7,0 +6,0 @@ * Optional nonce that will be passed to the created `<script>` tag.

dist/types/color-mode-script.d.ts.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"color-mode-script.d.ts","sourceRoot":"","sources":["../../src/color-mode-script.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAA;AAEjD,aAAK,IAAI,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAA;AAgC5C,UAAU,oBAAoB;IAC5B,gBAAgB,CAAC,EAAE,IAAI,CAAA;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED;;;GAGG;AACH,eAAO,MAAM,eAAe,UAAW,oBAAoB,gBAM1D,CAAA"}
+{"version":3,"file":"color-mode-script.d.ts","sourceRoot":"","sources":["../../src/color-mode-script.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAkCvD,UAAU,oBAAoB;IAC5B,gBAAgB,CAAC,EAAE,eAAe,CAAA;IAClC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED;;;GAGG;AACH,eAAO,MAAM,eAAe,UAAW,oBAAoB,gBAM1D,CAAA"}

dist/types/color-mode.utils.d.ts

@@ -5,3 +5,3 @@ export declare type ColorMode = "light" | "dark";
  */
-export declare function syncBodyClassName(isDark: boolean): void;
+export declare function syncBodyClassName(isDark: boolean, document: Document): void;
 export declare const queries: {
@@ -18,3 +18,3 @@ light: string;
  */
-export declare function addListener(fn: Function): () => void;
+export declare function addListener(fn: (cm: ColorMode, isListenerEvent: true) => unknown): () => void;
 export declare const root: {
@@ -21,0 +21,0 @@ get: () => ColorMode;

dist/types/color-mode.utils.d.ts.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"color-mode.utils.d.ts","sourceRoot":"","sources":["../../src/color-mode.utils.ts"],"names":[],"mappings":"AAOA,oBAAY,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;AAWxC;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,OAAO,QAIhD;AAaD,eAAO,MAAM,OAAO;;;CAGnB,CAAA;AAED,eAAO,MAAM,UAAU,QAAgB,CAAA;AACvC,eAAO,MAAM,SAAS,QAAe,CAAA;AAErC,wBAAgB,cAAc,CAAC,QAAQ,CAAC,EAAE,SAAS,oBAGlD;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAAE,EAAE,QAAQ,cAiBvC;AAED,eAAO,MAAM,IAAI;;gBAKH,SAAS;CAKtB,CAAA"}
+{"version":3,"file":"color-mode.utils.d.ts","sourceRoot":"","sources":["../../src/color-mode.utils.ts"],"names":[],"mappings":"AAOA,oBAAY,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;AAWxC;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,QAIpE;AAaD,eAAO,MAAM,OAAO;;;CAGnB,CAAA;AAED,eAAO,MAAM,UAAU,QAAgB,CAAA;AACvC,eAAO,MAAM,SAAS,QAAe,CAAA;AAErC,wBAAgB,cAAc,CAAC,QAAQ,CAAC,EAAE,SAAS,oBAGlD;AAED;;;GAGG;AACH,wBAAgB,WAAW,CACzB,EAAE,EAAE,CAAC,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,IAAI,KAAK,OAAO,cAiBtD;AAED,eAAO,MAAM,IAAI;;gBAKH,SAAS;CAKtB,CAAA"}

package.json

 {
   "name": "@chakra-ui/color-mode",
-  "version": "1.1.13",
+  "version": "1.2.0",
   "description": "React component and hooks for handling light and dark mode.",
@@ -61,4 +61,5 @@ "keywords": [
   "dependencies": {
-    "@chakra-ui/hooks": "1.6.1",
-    "@chakra-ui/utils": "1.8.3"
+    "@chakra-ui/hooks": "1.6.2",
+    "@chakra-ui/react-env": "1.0.8",
+    "@chakra-ui/utils": "1.8.4"
   },
@@ -65,0 +66,0 @@ "peerDependencies": {

No alert changes

Improved metrics

Total package byte prevSize

93168

6.44%

Lines of code

796

2.45%

Worsened metrics

Dependency count

4

33.33%

Dependency changes

• + Added

  @chakra-ui/react-env@1.0.8

• + Added

  @chakra-ui/hooks@1.6.2
  (transitive)

• + Added

  @chakra-ui/react-env@1.0.8
  (transitive)

• + Added

  @chakra-ui/utils@1.8.4
  (transitive)

• - Removed

  @chakra-ui/hooks@1.6.1
  (transitive)

• - Removed

  @chakra-ui/utils@1.8.3
  (transitive)

• Updated

  @chakra-ui/hooks@1.6.2

• Updated

  @chakra-ui/utils@1.8.4