@fluid-app/portal-sdk 0.1.429 → 0.1.430

package/dist/index.cjs

@@ -2023,6 +2023,29 @@ var AppShellErrorBoundary = class extends react.Component {
 	}
 };
 //#endregion
+//#region src/shell/native-theme-bridge.ts
+const PORTAL_NATIVE_THEME_MESSAGE_TYPE = "fluid.portal.theme";
+function colorToSrgbHex(color) {
+	const srgb = color.to("srgb");
+	srgb.alpha = 1;
+	return srgb.toString({ format: "hex" });
+}
+function createPortalNativeThemeMessage({ resolvedTheme, mode }) {
+	return {
+		type: PORTAL_NATIVE_THEME_MESSAGE_TYPE,
+		version: 1,
+		payload: {
+			themeId: resolvedTheme.id,
+			mode,
+			colors: { muted: colorToSrgbHex(resolvedTheme[mode].muted.base) }
+		}
+	};
+}
+function postPortalNativeThemeMessage(message) {
+	if (typeof window === "undefined") return;
+	window.ReactNativeWebView?.postMessage(JSON.stringify(message));
+}
+//#endregion
 //#region src/shell/SdkLogoutButton.tsx
 /**
 * Sidebar footer slot. Renders Theme toggle + Log out.
@@ -2227,9 +2250,14 @@ function AppShell({ appData: appDataProp, navigation: navigationProp, customPage
 		const metaEl = meta;
 		const theme = resolvedTheme;
 		function update(prefersDark) {
-			const hex = ((themeMode === "auto" ? prefersDark ? "dark" : "light" : themeMode) === "dark" ? theme.dark.muted.base : theme.light.muted.base).toString();
-			metaEl.content = hex;
-			document.body.style.backgroundColor = hex;
+			const nativeThemeMessage = createPortalNativeThemeMessage({
+				resolvedTheme: theme,
+				mode: themeMode === "auto" ? prefersDark ? "dark" : "light" : themeMode
+			});
+			const mutedColor = nativeThemeMessage.payload.colors.muted;
+			metaEl.content = mutedColor;
+			document.body.style.backgroundColor = mutedColor;
+			postPortalNativeThemeMessage(nativeThemeMessage);
 		}
 		const mql = window.matchMedia("(prefers-color-scheme: dark)");
 		update(mql.matches);