@blocklet/theme 2.13.54 → 2.13.56

package/dist/cjs/index.js

@@ -140,7 +140,12 @@ __export(src_exports, {
   BLOCKLET_THEME_PREFER_KEY: () => BLOCKLET_THEME_PREFER_KEY,
   DEFAULT_FONTS: () => DEFAULT_FONTS,
   DID_CONNECT_THEME_DARK: () => DID_CONNECT_THEME_DARK,
-  DID_CONNECT_THEME_LIGHT: () => DID_CONNECT_THEME_LIGHT
+  DID_CONNECT_THEME_LIGHT: () => DID_CONNECT_THEME_LIGHT,
+  buildThemeScript: () => buildThemeScript,
+  buildThemeStyles: () => buildThemeStyles,
+  getDefaultThemePrefer: () => getDefaultThemePrefer,
+  isValidThemeMode: () => isValidThemeMode,
+  merge: () => merge
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -254,15 +259,85 @@ function alpha(color, value) {
 
 // src/util.ts
 var import_deepmerge = __toESM(require_cjs());
+var BLOCKLET_THEME_PREFER_KEY = "blocklet_theme_prefer";
 var merge = (x, y) => {
   return (0, import_deepmerge.default)(x, y, {
     // 采用替换策略合并数组
     arrayMerge: (_, source) => source
   });
 };
+function isValidThemeMode(mode) {
+  return mode === "light" || mode === "dark";
+}
+function getDefaultThemePrefer(meta) {
+  const urlParams = new URLSearchParams(window.location.search);
+  const urlPrefer = urlParams.get("theme");
+  if (isValidThemeMode(urlPrefer)) {
+    return urlPrefer;
+  }
+  const sessionPrefer = sessionStorage.getItem(BLOCKLET_THEME_PREFER_KEY);
+  if (isValidThemeMode(sessionPrefer)) {
+    return sessionPrefer;
+  }
+  const prefer = Object.assign({}, window.blocklet, meta).theme?.prefer;
+  if (prefer === "light" || prefer === "dark") {
+    return prefer;
+  }
+  if (prefer === "system") {
+    const localPrefer = localStorage.getItem(BLOCKLET_THEME_PREFER_KEY);
+    if (isValidThemeMode(localPrefer)) {
+      return localPrefer;
+    }
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  }
+  return "light";
+}
+var buildThemeStyles = (theme) => {
+  const { light, dark } = theme;
+  return `
+    <style id="blocklet-theme-style">
+      :root {
+        --blocklet-background-default-color: ${light.palette?.background?.default ?? "#ffffff"};
+        --blocklet-text-primary-color: ${light.palette?.text?.primary ?? "#18181b"};
+      }
+
+      [data-theme='dark'] {
+        --blocklet-background-default-color: ${dark.palette?.background?.default ?? "#121212"};
+        --blocklet-text-primary-color: ${dark.palette?.text?.primary ?? "#ffffff"};
+      }
+
+      html, body {
+        background-color: var(--blocklet-background-default-color);
+        color: var(--blocklet-text-primary-color);
+      }
+    </style>
+  `;
+};
+var buildThemeScript = (theme) => {
+  return `
+    <script id="blocklet-theme-script">
+      (function() {
+        try {
+          const BLOCKLET_THEME_PREFER_KEY = '${BLOCKLET_THEME_PREFER_KEY}';
+          ${isValidThemeMode.toString()}
+          ${getDefaultThemePrefer.toString()}
+
+          const prefer = getDefaultThemePrefer(${JSON.stringify({ theme: { prefer: theme.prefer } })});
+          
+          if(prefer === 'dark') {
+            document.documentElement.setAttribute('data-theme', 'dark');
+          } else {
+            document.documentElement.removeAttribute('data-theme');
+          }
+        } catch (e) {
+          console.error('Theme init error:', e);
+        }
+      })();
+    </script>
+  `;
+};
 
 // src/blocklet.ts
-var BLOCKLET_THEME_PREFER_KEY = "blocklet_theme_prefer";
 var DEFAULT_FONTS = ["Roboto", "Helvetica", "Arial", "sans-serif"];
 var shadows = [
   "none",
@@ -611,37 +686,37 @@ var BLOCKLET_THEME_DARK = merge(BLOCKLET_THEME_LIGHT, {
     },
     primary: {
       main: "#00d5be",
-      contrastText: "#f4f4f5",
+      contrastText: "#121212",
       light: "#4ce3d0",
       dark: "#00a89a"
     },
     secondary: {
       main: "#00d3f3",
-      contrastText: "#f4f4f5",
+      contrastText: "#121212",
       light: "#51e1ff",
       dark: "#00a2c0"
     },
     error: {
       main: "#ff6467",
-      contrastText: "#f4f4f5",
+      contrastText: "#121212",
       light: "#ff9598",
       dark: "#e7000b"
     },
     warning: {
       main: "#ff8904",
-      contrastText: "#f4f4f5",
+      contrastText: "#121212",
       light: "#ffa644",
       dark: "#f54900"
     },
     info: {
       main: "#51a2ff",
-      contrastText: "#f4f4f5",
+      contrastText: "#121212",
       light: "#83c3ff",
       dark: "#1570e5"
     },
     success: {
       main: "#05df72",
-      contrastText: "#f4f4f5",
+      contrastText: "#121212",
       light: "#56e799",
       dark: "#00b24a"
     },
@@ -821,5 +896,10 @@ var DID_CONNECT_THEME_DARK = merge(BLOCKLET_THEME_DARK, {
   BLOCKLET_THEME_PREFER_KEY,
   DEFAULT_FONTS,
   DID_CONNECT_THEME_DARK,
-  DID_CONNECT_THEME_LIGHT
+  DID_CONNECT_THEME_LIGHT,
+  buildThemeScript,
+  buildThemeStyles,
+  getDefaultThemePrefer,
+  isValidThemeMode,
+  merge
 });

package/dist/es/index.js

@@ -237,15 +237,85 @@ function alpha(color, value) {
 
 // src/util.ts
 var import_deepmerge = __toESM(require_cjs());
+var BLOCKLET_THEME_PREFER_KEY = "blocklet_theme_prefer";
 var merge = (x, y) => {
   return (0, import_deepmerge.default)(x, y, {
     // 采用替换策略合并数组
     arrayMerge: (_, source) => source
   });
 };
+function isValidThemeMode(mode) {
+  return mode === "light" || mode === "dark";
+}
+function getDefaultThemePrefer(meta) {
+  const urlParams = new URLSearchParams(window.location.search);
+  const urlPrefer = urlParams.get("theme");
+  if (isValidThemeMode(urlPrefer)) {
+    return urlPrefer;
+  }
+  const sessionPrefer = sessionStorage.getItem(BLOCKLET_THEME_PREFER_KEY);
+  if (isValidThemeMode(sessionPrefer)) {
+    return sessionPrefer;
+  }
+  const prefer = Object.assign({}, window.blocklet, meta).theme?.prefer;
+  if (prefer === "light" || prefer === "dark") {
+    return prefer;
+  }
+  if (prefer === "system") {
+    const localPrefer = localStorage.getItem(BLOCKLET_THEME_PREFER_KEY);
+    if (isValidThemeMode(localPrefer)) {
+      return localPrefer;
+    }
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  }
+  return "light";
+}
+var buildThemeStyles = (theme) => {
+  const { light, dark } = theme;
+  return `
+    <style id="blocklet-theme-style">
+      :root {
+        --blocklet-background-default-color: ${light.palette?.background?.default ?? "#ffffff"};
+        --blocklet-text-primary-color: ${light.palette?.text?.primary ?? "#18181b"};
+      }
+
+      [data-theme='dark'] {
+        --blocklet-background-default-color: ${dark.palette?.background?.default ?? "#121212"};
+        --blocklet-text-primary-color: ${dark.palette?.text?.primary ?? "#ffffff"};
+      }
+
+      html, body {
+        background-color: var(--blocklet-background-default-color);
+        color: var(--blocklet-text-primary-color);
+      }
+    </style>
+  `;
+};
+var buildThemeScript = (theme) => {
+  return `
+    <script id="blocklet-theme-script">
+      (function() {
+        try {
+          const BLOCKLET_THEME_PREFER_KEY = '${BLOCKLET_THEME_PREFER_KEY}';
+          ${isValidThemeMode.toString()}
+          ${getDefaultThemePrefer.toString()}
+
+          const prefer = getDefaultThemePrefer(${JSON.stringify({ theme: { prefer: theme.prefer } })});
+          
+          if(prefer === 'dark') {
+            document.documentElement.setAttribute('data-theme', 'dark');
+          } else {
+            document.documentElement.removeAttribute('data-theme');
+          }
+        } catch (e) {
+          console.error('Theme init error:', e);
+        }
+      })();
+    </script>
+  `;
+};
 
 // src/blocklet.ts
-var BLOCKLET_THEME_PREFER_KEY = "blocklet_theme_prefer";
 var DEFAULT_FONTS = ["Roboto", "Helvetica", "Arial", "sans-serif"];
 var shadows = [
   "none",
@@ -594,37 +664,37 @@ var BLOCKLET_THEME_DARK = merge(BLOCKLET_THEME_LIGHT, {
     },
     primary: {
       main: "#00d5be",
-      contrastText: "#f4f4f5",
+      contrastText: "#121212",
       light: "#4ce3d0",
       dark: "#00a89a"
     },
     secondary: {
       main: "#00d3f3",
-      contrastText: "#f4f4f5",
+      contrastText: "#121212",
       light: "#51e1ff",
       dark: "#00a2c0"
     },
     error: {
       main: "#ff6467",
-      contrastText: "#f4f4f5",
+      contrastText: "#121212",
       light: "#ff9598",
       dark: "#e7000b"
     },
     warning: {
       main: "#ff8904",
-      contrastText: "#f4f4f5",
+      contrastText: "#121212",
       light: "#ffa644",
       dark: "#f54900"
     },
     info: {
       main: "#51a2ff",
-      contrastText: "#f4f4f5",
+      contrastText: "#121212",
       light: "#83c3ff",
       dark: "#1570e5"
     },
     success: {
       main: "#05df72",
-      contrastText: "#f4f4f5",
+      contrastText: "#121212",
       light: "#56e799",
       dark: "#00b24a"
     },
@@ -803,5 +873,10 @@ export {
   BLOCKLET_THEME_PREFER_KEY,
   DEFAULT_FONTS,
   DID_CONNECT_THEME_DARK,
-  DID_CONNECT_THEME_LIGHT
+  DID_CONNECT_THEME_LIGHT,
+  buildThemeScript,
+  buildThemeStyles,
+  getDefaultThemePrefer,
+  isValidThemeMode,
+  merge
 };

package/dist/types/index.d.ts

@@ -53,7 +53,6 @@ declare module "@mui/material/styles/createTypography" {
 		color?: Record<string, string>;
 	}
 }
-export declare const BLOCKLET_THEME_PREFER_KEY = "blocklet_theme_prefer";
 export declare const DEFAULT_FONTS: string[];
 /**
  * figma: https://www.figma.com/file/1qHyMF137EXOQpSFVByszG/UX-Library?node-id=295%3A1518
@@ -62,6 +61,23 @@ export declare const BLOCKLET_THEME_LIGHT: ThemeOptions;
 export declare const BLOCKLET_THEME_DARK: ThemeOptions;
 export declare const DID_CONNECT_THEME_LIGHT: import("@mui/material/styles").ThemeOptions;
 export declare const DID_CONNECT_THEME_DARK: import("@mui/material/styles").ThemeOptions;
+export declare const BLOCKLET_THEME_PREFER_KEY = "blocklet_theme_prefer";
+export declare const merge: <T>(x: T, y: Partial<T>) => T;
+export declare function isValidThemeMode(mode: any): mode is PaletteMode;
+export declare function getDefaultThemePrefer(meta?: {
+	theme: {
+		prefer: "light" | "dark" | "system";
+	};
+}): PaletteMode;
+export type ThemeSettings = {
+	prefer: "light" | "dark" | "system";
+	light: ThemeOptions;
+	dark: ThemeOptions;
+};
+/** 生成用于服务端注入的初始样式，避免首屏加载闪白 */
+export declare const buildThemeStyles: (theme: ThemeSettings) => string;
+/** 生成用于服务端注入的初始脚本，用于选择 theme mode */
+export declare const buildThemeScript: (theme: ThemeSettings) => string;
 
 export {
 	Theme,

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "2.13.54",
+  "version": "2.13.56",
   "description": "A preset MUI-based theme configuration designed for use with Blocklet.",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -55,5 +55,5 @@
     "ts-jest": "^29.1.2",
     "typescript": "~5.5.4"
   },
-  "gitHead": "6515646bea775127c4c85c737b6233823a0062ec"
+  "gitHead": "ebf7d863313f1ce95571b81df01182756395197e"
 }