@blocklet/theme 2.13.55 → 2.13.56

package/dist/cjs/index.js

@@ -141,6 +141,8 @@ __export(src_exports, {
   DEFAULT_FONTS: () => DEFAULT_FONTS,
   DID_CONNECT_THEME_DARK: () => DID_CONNECT_THEME_DARK,
   DID_CONNECT_THEME_LIGHT: () => DID_CONNECT_THEME_LIGHT,
+  buildThemeScript: () => buildThemeScript,
+  buildThemeStyles: () => buildThemeStyles,
   getDefaultThemePrefer: () => getDefaultThemePrefer,
   isValidThemeMode: () => isValidThemeMode,
   merge: () => merge
@@ -290,6 +292,50 @@ function getDefaultThemePrefer(meta) {
   }
   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 DEFAULT_FONTS = ["Roboto", "Helvetica", "Arial", "sans-serif"];
@@ -640,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"
     },
@@ -851,6 +897,8 @@ var DID_CONNECT_THEME_DARK = merge(BLOCKLET_THEME_DARK, {
   DEFAULT_FONTS,
   DID_CONNECT_THEME_DARK,
   DID_CONNECT_THEME_LIGHT,
+  buildThemeScript,
+  buildThemeStyles,
   getDefaultThemePrefer,
   isValidThemeMode,
   merge

package/dist/es/index.js

@@ -270,6 +270,50 @@ function getDefaultThemePrefer(meta) {
   }
   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 DEFAULT_FONTS = ["Roboto", "Helvetica", "Arial", "sans-serif"];
@@ -620,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"
     },
@@ -830,6 +874,8 @@ export {
   DEFAULT_FONTS,
   DID_CONNECT_THEME_DARK,
   DID_CONNECT_THEME_LIGHT,
+  buildThemeScript,
+  buildThemeStyles,
   getDefaultThemePrefer,
   isValidThemeMode,
   merge

package/dist/types/index.d.ts

@@ -69,6 +69,15 @@ export declare function getDefaultThemePrefer(meta?: {
 		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.55",
+  "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": "fd8de005ce497660cbf1ea7378cf0d725b45fe87"
+  "gitHead": "ebf7d863313f1ce95571b81df01182756395197e"
 }