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

Comparing version 0.0.0-pr-202203231241 to 0.0.0-pr-202204173424

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

@@ -123,3 +123,3 @@ '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;
   },
@@ -129,2 +129,3 @@ set: function set(mode) {
       document.documentElement.style.setProperty("--chakra-ui-color-mode", mode);
+      document.documentElement.setAttribute("data-theme", mode);
     }
@@ -406,3 +407,3 @@ }
   var systemPreference = mql.matches ? "dark" : "light";
-  var persistedPreference;
+  var persistedPreference = systemPreference;
 
@@ -415,14 +416,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);
   }
@@ -429,0 +430,0 @@ }

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

@@ -123,3 +123,3 @@ '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;
   },
@@ -129,2 +129,3 @@ set: function set(mode) {
       document.documentElement.style.setProperty("--chakra-ui-color-mode", mode);
+      document.documentElement.setAttribute("data-theme", mode);
     }
@@ -406,3 +407,3 @@ }
   var systemPreference = mql.matches ? "dark" : "light";
-  var persistedPreference;
+  var persistedPreference = systemPreference;
 
@@ -415,14 +416,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);
   }
@@ -429,0 +430,0 @@ }

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

@@ -99,3 +99,3 @@ 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;
   },
@@ -105,2 +105,3 @@ set: function set(mode) {
       document.documentElement.style.setProperty("--chakra-ui-color-mode", mode);
+      document.documentElement.setAttribute("data-theme", mode);
     }
@@ -382,3 +383,3 @@ }
   var systemPreference = mql.matches ? "dark" : "light";
-  var persistedPreference;
+  var persistedPreference = systemPreference;
 
@@ -391,14 +392,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);
   }
@@ -405,0 +406,0 @@ }

package.json

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

src/color-mode.utils.ts

@@ -78,10 +78,11 @@ 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) {
       document.documentElement.style.setProperty("--chakra-ui-color-mode", mode)
+      document.documentElement.setAttribute("data-theme", mode)
     }
   },
 }

No alert changes

Improved metrics

Total package byte prevSize

57584

increased by0.46%

Lines of code

1618

increased by0.31%

Dependency changes

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

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

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

• - Removed@chakra-ui/hooks@0.0.0-pr-202203231241(transitive)

• - Removed@chakra-ui/react-env@0.0.0-pr-202203231241(transitive)

• - Removed@chakra-ui/utils@0.0.0-pr-202203231241(transitive)

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

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

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