@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.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/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.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/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-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.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;

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": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

93168

increased by6.44%

Lines of code

796

increased by2.45%

Worsened metrics

Dependency count

4

increased by33.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