fix: activity bar colors on ios

avarayr · Sep 20, 2024 · 2e73eff · 2e73eff
1 parent 3b11086
commit 2e73eff
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git a/src/layouts/ChaiMessage/screens/ChatList.tsx b/src/layouts/ChaiMessage/screens/ChatList.tsx
@@ -118,12 +118,14 @@ export const ActivityBar = React.memo(
     const handleSearchInputFocus = useCallback(() => {
       setIsSearchInputFocused(true);
       document.querySelector("meta[name='theme-color']")?.setAttribute("content", ChaiColors.ACTIVITYBAR);
+      document.body.style.backgroundColor = ChaiColors.ACTIVITYBAR;
     }, [setIsSearchInputFocused]);
 
     const handleSearchInputBlur = useCallback(() => {
       setIsSearchInputFocused(false);
       setSearchValue("");
       document.querySelector("meta[name='theme-color']")?.setAttribute("content", ChaiColors.BACKGROUND);
+      document.body.style.backgroundColor = ChaiColors.BACKGROUND;
     }, [setIsSearchInputFocused, setSearchValue]);
 
     return (

diff --git a/src/layouts/ChaiMessage/screens/Texting.tsx b/src/layouts/ChaiMessage/screens/Texting.tsx
@@ -50,6 +50,15 @@ export const Texting = React.memo(
     });
     const persona = data?.chat?.personas?.[0];
 
+    useEffect(() => {
+      document.querySelector("meta[name='theme-color']")?.setAttribute("content", ChaiColors.TEXTING_ACTIVITYBAR);
+      document.body.style.backgroundColor = ChaiColors.TEXTING_ACTIVITYBAR;
+      return () => {
+        document.querySelector("meta[name='theme-color']")?.setAttribute("content", ChaiColors.BACKGROUND);
+        document.body.style.backgroundColor = ChaiColors.BACKGROUND;
+      };
+    }, []);
+
     const messages = useMemo(() => {
       // sort in reverse chronological order
       // because we're using a reverse flex direction for chat messages

diff --git a/vite.config.ts b/vite.config.ts
@@ -47,7 +47,6 @@ export default createApp({
           manifest: {
             name: "SuaveUI",
             short_name: "SuaveUI",
-            theme_color: "#000000",
             icons: [
               {
                 src: "/assets/pwa/android-chrome-192x192.png",