@hope-ui/core - npm Package Compare versions

Comparing version 1.0.0-next.8 to 1.0.0-next.9

dist/source/color-mode/color-mode-provider.jsx

@@ -10,2 +10,3 @@ /*!
 import { ColorModeContext } from "./color-mode-context";
+import { initialColorMode } from "./color-mode-script";
 import { localStorageManager } from "./storage-manager";
@@ -42,3 +43,3 @@ import { addColorModeListener, getInitialColorMode, getSystemColorMode, setColorModeClassName, setColorModeDataset, } from "./utils";
     createEffect(() => {
-        setColorMode(colorModeManager().get() ?? "system");
+        setColorMode(colorModeManager().get() ?? initialColorMode());
     });
@@ -45,0 +46,0 @@ onCleanup(() => {

dist/source/color-mode/color-mode-script.jsx

@@ -8,5 +8,6 @@ /*!
  */
-import { createMemo } from "solid-js";
+import { createMemo, createSignal } from "solid-js";
 import { mergeDefaultProps } from "../utils";
 import { COLOR_MODE_STORAGE_KEY } from "./storage-manager";
+const FALLBACK_VALUE = "system";
 const VALID_VALUES = new Set(["light", "dark", "system"]);
@@ -18,19 +19,21 @@ /**
     if (!VALID_VALUES.has(initialColorMode)) {
-        return "light";
+        return FALLBACK_VALUE;
     }
     return initialColorMode;
 }
+/** Globally managed initial color mode. */
+const [initialColorMode, setInitialColorMode] = createSignal(FALLBACK_VALUE);
+export { initialColorMode };
 export function ColorModeScript(props) {
     props = mergeDefaultProps({
-        initialColorMode: "system",
+        initialColorMode: FALLBACK_VALUE,
         storageType: "localStorage",
         storageKey: COLOR_MODE_STORAGE_KEY,
     }, props);
+    setInitialColorMode(normalize(props.initialColorMode));
     const scriptSrc = createMemo(() => {
         // runtime safe-guard against invalid color mode values
-        const init = normalize(props.initialColorMode);
-        const cookieScript = `(function(){try{var a=function(o){var l="(prefers-color-scheme: dark)",v=window.matchMedia(l).matches?"dark":"light",e=o==="system"?v:o,d=document.documentElement,m=document.body,i="hope-theme-light",n="hope-theme-dark",s=e==="dark";return m.classList.add(s?n:i),m.classList.remove(s?i:n),d.style.colorScheme=e,d.dataset.theme=e,o},u=a,h="${init}",r="${props.storageKey}",t=document.cookie.match(new RegExp("(^| )".concat(r,"=([^;]+)"))),c=t?t[2]:null;c?a(c):document.cookie="".concat(r,"=").concat(a(h),"; max-age=31536000; path=/")}catch(a){}})();
-  `;
-        const localStorageScript = `(function(){try{var a=function(c){var v="(prefers-color-scheme: dark)",h=window.matchMedia(v).matches?"dark":"light",r=c==="system"?h:c,o=document.documentElement,s=document.body,l="hope-theme-light",d="hope-theme-dark",i=r==="dark";return s.classList.add(i?d:l),s.classList.remove(i?l:d),o.style.colorScheme=r,o.dataset.theme=r,c},n=a,m="${init}",e="${props.storageKey}",t=localStorage.getItem(e);t?a(t):localStorage.setItem(e,a(m))}catch(a){}})();
-  `;
+        const init = initialColorMode();
+        const cookieScript = `(function(){try{var a=function(o){var l="(prefers-color-scheme: dark)",v=window.matchMedia(l).matches?"dark":"light",e=o==="system"?v:o,d=document.documentElement,m=document.body,i="hope-theme-light",n="hope-theme-dark",s=e==="dark";return m.classList.add(s?n:i),m.classList.remove(s?i:n),d.style.colorScheme=e,d.dataset.theme=e,o},u=a,h="${init}",r="${props.storageKey}",t=document.cookie.match(new RegExp("(^| )".concat(r,"=([^;]+)"))),c=t?t[2]:null;c?a(c):document.cookie="".concat(r,"=").concat(a(h),"; max-age=31536000; path=/")}catch(a){}})();`;
+        const localStorageScript = `(function(){try{var a=function(c){var v="(prefers-color-scheme: dark)",h=window.matchMedia(v).matches?"dark":"light",r=c==="system"?h:c,o=document.documentElement,s=document.body,l="hope-theme-light",d="hope-theme-dark",i=r==="dark";return s.classList.add(i?d:l),s.classList.remove(i?l:d),o.style.colorScheme=r,o.dataset.theme=r,c},n=a,m="${init}",e="${props.storageKey}",t=localStorage.getItem(e);t?a(t):localStorage.setItem(e,a(m))}catch(a){}})();`;
         const fn = props.storageType === "cookie" ? cookieScript : localStorageScript;
@@ -37,0 +40,0 @@ return `!${fn}`.trim();

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

@@ -8,3 +8,6 @@ /*!
  */
-import { ColorModeScriptProps } from "./types";
+import { ColorModeScriptProps, ConfigColorMode } from "./types";
+/** Globally managed initial color mode. */
+declare const initialColorMode: import("solid-js").Accessor<ConfigColorMode>;
+export { initialColorMode };
 export declare function ColorModeScript(props: ColorModeScriptProps): import("solid-js").JSX.Element;

package.json

 {
   "name": "@hope-ui/core",
-  "version": "1.0.0-next.8",
+  "version": "1.0.0-next.9",
   "private": false,
@@ -45,8 +45,8 @@ "description": "Hope UI core components library.",
     "@floating-ui/dom": "^1.0.4",
-    "@hope-ui/primitives": "^1.0.0-next.8",
-    "@hope-ui/styles": "^1.0.0-next.8",
-    "@hope-ui/utils": "^1.0.0-next.8"
+    "@hope-ui/primitives": "^1.0.0-next.9",
+    "@hope-ui/styles": "^1.0.0-next.9",
+    "@hope-ui/utils": "^1.0.0-next.9"
   },
   "devDependencies": {
-    "@hope-ui/tests": "1.0.0-next.8",
+    "@hope-ui/tests": "1.0.0-next.9",
     "@storybook/addon-a11y": "6.5.10",
@@ -53,0 +53,0 @@ "@storybook/addon-actions": "6.5.10",

No alert changes

Improved metrics

Total package byte prevSize

1244595

increased by0.17%

Lines of code

16015

increased by0.07%

Dependency changes

• Updated@hope-ui/primitives@^1.0.0-next.9

• Updated@hope-ui/styles@^1.0.0-next.9

• Updated@hope-ui/utils@^1.0.0-next.9