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

Comparing version 0.0.0-pr-20211129981 to 0.0.0-pr-2022013192043

dist/chakra-ui-color-mode.cjs.dev.js

@@ -123,7 +123,13 @@ 'use strict';
   get: function get() {
-    return document.documentElement.style.getPropertyValue("--chakra-ui-color-mode");
+    return document.documentElement.style.getPropertyValue("--chakra-ui-color-mode") || document.documentElement.dataset.theme;
   },
   set: function set(mode) {
     if (utils.isBrowser) {
+      /**
+       * @deprecated
+       * The CSS variable `--chakra-ui-color-mode` will be removed in the next major release
+       * Please use the `data-theme` attribute to determine the current color mode
+       */
       document.documentElement.style.setProperty("--chakra-ui-color-mode", mode);
+      document.documentElement.setAttribute("data-theme", mode);
     }
@@ -405,3 +411,3 @@ }
   var systemPreference = mql.matches ? "dark" : "light";
-  var persistedPreference;
+  var persistedPreference = systemPreference;
 
@@ -414,14 +420,14 @@ try {
 
-  var isInStorage = typeof persistedPreference === "string";
   var colorMode;
 
-  if (isInStorage) {
+  if (persistedPreference) {
     colorMode = persistedPreference;
+  } else if (initialValue === "system") {
+    colorMode = systemPreference;
   } else {
-    colorMode = initialValue === "system" ? systemPreference : initialValue;
+    colorMode = initialValue != null ? initialValue : systemPreference;
   }
 
   if (colorMode) {
-    var root = document.documentElement;
-    root.style.setProperty("--chakra-ui-color-mode", colorMode);
+    root.set(colorMode);
   }
@@ -428,0 +434,0 @@ }

dist/chakra-ui-color-mode.cjs.prod.js

@@ -123,7 +123,13 @@ 'use strict';
   get: function get() {
-    return document.documentElement.style.getPropertyValue("--chakra-ui-color-mode");
+    return document.documentElement.style.getPropertyValue("--chakra-ui-color-mode") || document.documentElement.dataset.theme;
   },
   set: function set(mode) {
     if (utils.isBrowser) {
+      /**
+       * @deprecated
+       * The CSS variable `--chakra-ui-color-mode` will be removed in the next major release
+       * Please use the `data-theme` attribute to determine the current color mode
+       */
       document.documentElement.style.setProperty("--chakra-ui-color-mode", mode);
+      document.documentElement.setAttribute("data-theme", mode);
     }
@@ -405,3 +411,3 @@ }
   var systemPreference = mql.matches ? "dark" : "light";
-  var persistedPreference;
+  var persistedPreference = systemPreference;
 
@@ -414,14 +420,14 @@ try {
 
-  var isInStorage = typeof persistedPreference === "string";
   var colorMode;
 
-  if (isInStorage) {
+  if (persistedPreference) {
     colorMode = persistedPreference;
+  } else if (initialValue === "system") {
+    colorMode = systemPreference;
   } else {
-    colorMode = initialValue === "system" ? systemPreference : initialValue;
+    colorMode = initialValue != null ? initialValue : systemPreference;
   }
 
   if (colorMode) {
-    var root = document.documentElement;
-    root.style.setProperty("--chakra-ui-color-mode", colorMode);
+    root.set(colorMode);
   }
@@ -428,0 +434,0 @@ }

dist/chakra-ui-color-mode.esm.js

@@ -99,7 +99,13 @@ import { useEnvironment } from '@chakra-ui/react-env';
   get: function get() {
-    return document.documentElement.style.getPropertyValue("--chakra-ui-color-mode");
+    return document.documentElement.style.getPropertyValue("--chakra-ui-color-mode") || document.documentElement.dataset.theme;
   },
   set: function set(mode) {
     if (isBrowser) {
+      /**
+       * @deprecated
+       * The CSS variable `--chakra-ui-color-mode` will be removed in the next major release
+       * Please use the `data-theme` attribute to determine the current color mode
+       */
       document.documentElement.style.setProperty("--chakra-ui-color-mode", mode);
+      document.documentElement.setAttribute("data-theme", mode);
     }
@@ -381,3 +387,3 @@ }
   var systemPreference = mql.matches ? "dark" : "light";
-  var persistedPreference;
+  var persistedPreference = systemPreference;
 
@@ -390,14 +396,14 @@ try {
 
-  var isInStorage = typeof persistedPreference === "string";
   var colorMode;
 
-  if (isInStorage) {
+  if (persistedPreference) {
     colorMode = persistedPreference;
+  } else if (initialValue === "system") {
+    colorMode = systemPreference;
   } else {
-    colorMode = initialValue === "system" ? systemPreference : initialValue;
+    colorMode = initialValue != null ? initialValue : systemPreference;
   }
 
   if (colorMode) {
-    var root = document.documentElement;
-    root.style.setProperty("--chakra-ui-color-mode", colorMode);
+    root.set(colorMode);
   }
@@ -404,0 +410,0 @@ }

package.json

 {
   "name": "@chakra-ui/color-mode",
-  "version": "0.0.0-pr-20211129981",
+  "version": "0.0.0-pr-2022013192043",
   "description": "React component and hooks for handling light and dark mode.",
@@ -41,5 +41,5 @@ "keywords": [
   "dependencies": {
-    "@chakra-ui/hooks": "0.0.0-pr-20211129981",
-    "@chakra-ui/react-env": "1.1.1",
-    "@chakra-ui/utils": "1.9.1"
+    "@chakra-ui/hooks": "0.0.0-pr-2022013192043",
+    "@chakra-ui/react-env": "0.0.0-pr-2022013192043",
+    "@chakra-ui/utils": "0.0.0-pr-2022013192043"
   },
@@ -46,0 +46,0 @@ "peerDependencies": {

src/color-mode.utils.ts

@@ -78,10 +78,16 @@ import { isBrowser, noop } from "@chakra-ui/utils"
   get: () =>
-    document.documentElement.style.getPropertyValue(
+    (document.documentElement.style.getPropertyValue(
       "--chakra-ui-color-mode",
-    ) as ColorMode | "",
+    ) || document.documentElement.dataset.theme) as ColorMode | "",
   set: (mode: ColorMode) => {
     if (isBrowser) {
+      /**
+       * @deprecated
+       * The CSS variable `--chakra-ui-color-mode` will be removed in the next major release
+       * Please use the `data-theme` attribute to determine the current color mode
+       */
       document.documentElement.style.setProperty("--chakra-ui-color-mode", mode)
+      document.documentElement.setAttribute("data-theme", mode)
     }
   },
 }

No alert changes

Improved metrics

Total package byte prevSize

58456

increased by2.04%

Lines of code

1638

increased by1.55%

Dependency changes

• + Added@chakra-ui/hooks@0.0.0-pr-2022013192043(transitive)

• + Added@chakra-ui/react-env@0.0.0-pr-2022013192043(transitive)

• + Added@chakra-ui/react-utils@1.2.1(transitive)

• + Added@chakra-ui/utils@0.0.0-pr-20220131920431.10.4(transitive)

• + Addedcompute-scroll-into-view@1.0.14(transitive)

• + Addedcopy-to-clipboard@3.3.1(transitive)

• + Addedtoggle-selection@1.0.6(transitive)

• - Removed@chakra-ui/react-env@1.1.1(transitive)

• - Removed@chakra-ui/utils@1.9.1(transitive)

• Updated@chakra-ui/hooks@0.0.0-pr-2022013192043

• Updated@chakra-ui/react-env@0.0.0-pr-2022013192043

• Updated@chakra-ui/utils@0.0.0-pr-2022013192043