From e0a8fba7879e89c65d01c44523f64d2177cd6ba0 Mon Sep 17 00:00:00 2001
From: Ramin <39030920+raminr77@users.noreply.github.com>
Date: Fri, 1 Nov 2024 15:02:39 +0100
Subject: [PATCH] feat: update navigation color with theme

---
 index.html                                    |  6 ++---
 public/manifest.json                          |  2 +-
 .../components/toggle-theme-button/index.tsx  | 22 +++++++++++++++++--
 src/shared/redux/app/app-selectors.ts         |  2 +-
 4 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index 0888989..48c1e75 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
   <meta name="language" content="en" />
   <meta name="copyright" content="2024" />
   <link rel="manifest" href="/manifest.json" />
-  <meta name="theme-color" content="#fd4085" />
+  <meta name="theme-color" content="#F1F5F9" />
   <meta name="author" content="Ramin Rezaei" />
   <meta name="robots" content="index, follow" />
   <meta name="document-type" content="Public" />
@@ -15,13 +15,13 @@
   <meta http-equiv="content-language" content="en" />
   <meta name="mobile-web-app-capable" content="yes" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-  <meta name="msapplication-TileColor" content="#fd4085" />
+  <meta name="msapplication-TileColor" content="#F1F5F9" />
   <meta name="apple-mobile-web-app-capable" content="yes" />
   <link href="/images/favicon.png" rel="apple-touch-icon" />
   <meta name="application-name" content="Memories Counter" />
   <link rel="canonical" href="https://memories-counter.ir/" />
   <link rel="icon" type="image/png" href="/images/favicon.png" />
-  <meta name="msapplication-navbutton-color" content="#fd4085" />
+  <meta name="msapplication-navbutton-color" content="#F1F5F9" />
   <meta name="apple-mobile-web-app-title" content="Memories Counter" />
   <meta name="apple-mobile-web-app-status-bar-style" content="default" />
   <meta name="keywords" content="Memories Counter, Memories, Day Counter" />
diff --git a/public/manifest.json b/public/manifest.json
index c78e3ec..18c6bdd 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -6,7 +6,7 @@
   "short_name": "Memories Counter",
   "display": "fullScreen",
   "author": "Ramin Rezaei",
-  "theme_color": "#fd4085",
+  "theme_color": "#F1F5F9",
   "orientation": "portrait",
   "background_color": "#ffffff",
   "description": "Memories Counter is an application that can count the good days you have experienced in life!",
diff --git a/src/shared/components/toggle-theme-button/index.tsx b/src/shared/components/toggle-theme-button/index.tsx
index 7d2a5e8..d56dbc5 100644
--- a/src/shared/components/toggle-theme-button/index.tsx
+++ b/src/shared/components/toggle-theme-button/index.tsx
@@ -6,8 +6,26 @@ import { appSelectors } from 'shared/redux/app/app-selectors';
 
 export function ToggleThemeButton({ className }: GCommonComponentProperties) {
     const dispatch = useDispatch();
-    const { darkMode } = useSelector(appSelectors.appData);
-    const toggleTheme = () => dispatch(toggleDarkMode(!darkMode));
+    const { darkMode } = useSelector(appSelectors.appData) as GApp;
+
+    const updateBrowserColor = (isDarkMode: boolean) => {
+        const color = isDarkMode ? '#1E2A3B' : '#F1F5F9';
+
+        const themeColorTag: HTMLMetaElement | null = document.querySelector('meta[name="theme-color"]');
+        const tileColorTag: HTMLMetaElement | null = document.querySelector('msapplication-TileColor');
+        const navigationColor: HTMLMetaElement | null = document.querySelector('msapplication-navbutton-color');
+
+        if (themeColorTag && tileColorTag && navigationColor) {
+            themeColorTag.content = color;
+            tileColorTag.content = color;
+            navigationColor.content = color;
+        }
+    };
+
+    const toggleTheme = () => {
+        updateBrowserColor(darkMode);
+        dispatch(toggleDarkMode(!darkMode));
+    };
 
     return (
         <button
diff --git a/src/shared/redux/app/app-selectors.ts b/src/shared/redux/app/app-selectors.ts
index b618b5d..6f3ff29 100644
--- a/src/shared/redux/app/app-selectors.ts
+++ b/src/shared/redux/app/app-selectors.ts
@@ -2,7 +2,7 @@ import { createDraftSafeSelector } from '@reduxjs/toolkit';
 
 const appData = createDraftSafeSelector(
     (state: { APP: GApp }) => state.APP,
-    (state) => ({
+    (state: GApp) => ({
         ...state
     })
 );