All files / app/components NativeColorSchemeSync.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { useColorScheme } from "@mui/material/styles";
import { useEffect } from "react";
import { useIsNativeEmbed } from "utils/nativeLink";
 
/**
 * Syncs the web app's color scheme to the native mobile app on initial load.
 * This ensures the native UI matches the web app's theme preference.
 */
export default function NativeColorSchemeSync() {
  const { mode } = useColorScheme();
  const isNativeEmbed = useIsNativeEmbed();
 
  useEffect(() => {
    Iif (!isNativeEmbed || !window.ReactNativeWebView) return;
 
    // Send the current color scheme to native app
    // "system" mode sends null so native follows system preference
    const nativeMode = mode === "system" ? null : mode;
    window.ReactNativeWebView.postMessage(
      JSON.stringify({
        type: "COLOR_SCHEME_CHANGE",
        mode: nativeMode,
      }),
    );
  }, [isNativeEmbed, mode]);
 
  return null;
}