feat: update theme handling and status bar integration

Daniel-Robbins · Daniel-Robbins · commit 818d46634fc2 · 2026-02-18T23:43:05.000+08:00
- Changed default status bar style to "DEFAULT" in capacitor.config.ts.
- Updated index.html to dynamically set the theme based on user preference or system settings.
- Enhanced App.tsx to synchronize the status bar style with the current theme during app initialization.
- Modified main.tsx to adjust the status bar style based on the active theme, improving native app appearance.
diff --git a/capacitor.config.ts b/capacitor.config.ts
@@ -25,8 +25,7 @@ const config: CapacitorConfig = {
       showSpinner: false,
     },
     StatusBar: {
-      style: "DARK",
-      backgroundColor: "#1A1D21",
+      style: "DEFAULT",
     },
     Keyboard: {
       resize: "none",
diff --git a/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-512@2x.png b/ios/App/App/Assets.xcassets/AppIcon.appiconset/AppIcon-512@2x.png
diff --git a/packages/web/index.html b/packages/web/index.html
@@ -1,13 +1,15 @@
 <!DOCTYPE html>
-<html lang="en" data-theme="dark">
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
+    <script>
+      (function(){var s=localStorage.getItem("botschat_theme");var t=s==="light"||s==="dark"?s:window.matchMedia&&window.matchMedia("(prefers-color-scheme: light)").matches?"light":"dark";document.documentElement.setAttribute("data-theme",t)})();
+    </script>
 
     <!-- PWA manifest -->
     <link rel="manifest" href="/manifest.json" />
 
-    <!-- Theme color — matches dark theme bg -->
     <meta name="theme-color" content="#1A1D21" />
 
     <!-- iOS PWA support -->
diff --git a/packages/web/src/App.tsx b/packages/web/src/App.tsx
@@ -97,9 +97,14 @@ export default function App() {
   useEffect(() => {
     document.documentElement.setAttribute("data-theme", theme);
     localStorage.setItem("botschat_theme", theme);
-    // Sync PWA theme-color meta tag with current theme
     const meta = document.querySelector('meta[name="theme-color"]');
     if (meta) meta.setAttribute("content", theme === "dark" ? "#1A1D21" : "#FFFFFF");
+    // Sync native status bar style on Capacitor
+    if (Capacitor.isNativePlatform()) {
+      import("@capacitor/status-bar").then(({ StatusBar, Style }) => {
+        StatusBar.setStyle({ style: theme === "dark" ? Style.Dark : Style.Light }).catch(() => {});
+      });
+    }
   }, [theme]);
 
   // Persist active view (messages / automations)
diff --git a/packages/web/src/main.tsx b/packages/web/src/main.tsx
@@ -11,7 +11,8 @@ initAnalytics();
 if (Capacitor.isNativePlatform()) {
   // Configure status bar and keyboard for native app
   import("@capacitor/status-bar").then(({ StatusBar, Style }) => {
-    StatusBar.setStyle({ style: Style.Dark }).catch(() => {});
+    const isDark = document.documentElement.getAttribute("data-theme") !== "light";
+    StatusBar.setStyle({ style: isDark ? Style.Dark : Style.Light }).catch(() => {});
     StatusBar.setOverlaysWebView({ overlay: true }).catch(() => {});
   });
   import("@capacitor/keyboard").then(({ Keyboard }) => {
