feat: update navigation color with theme

raminr77 · Nov 1, 2024 · e0a8fba · e0a8fba
1 parent 2ce8f71
commit e0a8fba
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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
@@ -2,7 +2,7 @@ import { createDraftSafeSelector } from '@reduxjs/toolkit';
 
 const appData = createDraftSafeSelector(
     (state: { APP: GApp }) => state.APP,
-    (state) => ({
+    (state: GApp) => ({
         ...state
     })
 );