@mfeflow/theme 0.2.0 → 0.3.0

package/dist/index.js

@@ -67,6 +67,6 @@ function noFlashScript(themes, options) {
                 }
             ]))
     }).replace(/</g, '\\u003c');
-    return `(function(){try{var o=${data};var n;try{n=JSON.parse(localStorage.getItem(o.k)||'null')}catch(e){}if(!o.t[n]){n=o.d;if(o.s&&window.matchMedia&&window.matchMedia('(prefers-color-scheme: dark)').matches){for(var x in o.t){if(o.t[x].c==='dark'){n=x;break}}}}var t=o.t[n],r=document.documentElement;for(var v in t.v){r.style.setProperty(v,t.v[v])}r.setAttribute('data-theme',n);r.style.colorScheme=t.c}catch(e){}})();`;
+    return `(function(){try{var o=${data};var n;try{n=JSON.parse(localStorage.getItem(o.k)||'null')}catch(e){}if(!Object.prototype.hasOwnProperty.call(o.t,n)){n=o.d;if(o.s&&window.matchMedia&&window.matchMedia('(prefers-color-scheme: dark)').matches){for(var x in o.t){if(o.t[x].c==='dark'){n=x;break}}}}var t=o.t[n],r=document.documentElement;for(var v in t.v){r.style.setProperty(v,t.v[v])}r.setAttribute('data-theme',n);r.style.colorScheme=t.c}catch(e){}})();`;
 }
 export { CSS_VAR_PREFIX, THEME_STORAGE_KEY, THEME_STORAGE_MFE, applyTheme, cssVar, cssVarName, defineTheme, noFlashScript, resolveTheme, themeToCssVars };

package/dist/react.js

@@ -15,7 +15,7 @@ function ThemeProvider({ themes, defaultTheme, followSystem = true, storage, roo
         storage
     ]);
     const [stored, setStored] = useStoredState(store, THEME_STORAGE_KEY, null, isThemeName);
-    const theme = resolveTheme(themes, stored ?? void 0, defaultTheme, followSystem && null === stored && prefersDark());
+    const theme = resolveTheme(themes, stored ?? void 0, defaultTheme, followSystem && prefersDark());
     useLayoutEffect(()=>{
         applyTheme(theme, root);
     }, [

package/dist/starting.d.ts

@@ -0,0 +1,14 @@
+import { type Theme } from './index.js';
+export interface StartingThemeOptions {
+    defaultTheme: string;
+    /** Use the OS dark-mode preference when no theme is stored. Default true, as for `ThemeProvider`. */
+    followSystem?: boolean;
+    /** Where the choice is read from. Default `localStorage`. */
+    storage?: Pick<Storage, 'getItem'>;
+}
+/**
+ * The theme to show before React renders: the stored choice if it names a theme in the list (a stray value such as
+ * "constructor" is not one), else the system dark preference when `followSystem` is on, else the default. The same
+ * order `noFlashScript` and `ThemeProvider` use. For the shell's first boot step.
+ */
+export declare function startingTheme(themes: readonly Theme[], options: StartingThemeOptions): Theme;

package/dist/starting.js

@@ -0,0 +1,18 @@
+import { THEME_STORAGE_KEY, THEME_STORAGE_MFE, resolveTheme } from "./index.js";
+function storedName(storage) {
+    try {
+        const raw = storage?.getItem(`${THEME_STORAGE_MFE}:${THEME_STORAGE_KEY}`);
+        const value = null == raw ? void 0 : JSON.parse(raw);
+        return 'string' == typeof value ? value : void 0;
+    } catch  {
+        return;
+    }
+}
+function prefersDark() {
+    return 'function' == typeof matchMedia && matchMedia('(prefers-color-scheme: dark)').matches;
+}
+function startingTheme(themes, options) {
+    const storage = options.storage ?? ("u" < typeof localStorage ? void 0 : localStorage);
+    return resolveTheme(themes, storedName(storage), options.defaultTheme, (options.followSystem ?? true) && prefersDark());
+}
+export { startingTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mfeflow/theme",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Design tokens as CSS variables for micro-frontends: the shell sets the theme once, every remote inherits it. ThemeProvider, useTheme, persisted choice, no-flash script.",
   "keywords": [
     "micro-frontend",
@@ -34,6 +34,11 @@
       "types": "./dist/react.d.ts",
       "import": "./dist/react.js",
       "default": "./dist/react.js"
+    },
+    "./starting": {
+      "types": "./dist/starting.d.ts",
+      "import": "./dist/starting.js",
+      "default": "./dist/starting.js"
     }
   },
   "files": [
@@ -47,7 +52,7 @@
     "provenance": true
   },
   "dependencies": {
-    "@mfeflow/storage": "0.2.0"
+    "@mfeflow/storage": "0.3.0"
   },
   "peerDependencies": {
     "react": "^19.0.0"