feat: implement adaptive day/night browser bar theme 🚀🔥

components/ThemeToggler/themeToggler.tsx

@@ -1,45 +1,59 @@
-import { useState, useEffect } from 'react'
-import { useTheme } from 'next-themes'
-import { HiSun, HiMoon } from 'react-icons/hi'
+import { useState, useEffect } from 'react';
+import { useTheme } from 'next-themes';
+import { HiSun, HiMoon } from 'react-icons/hi';
+import { Helmet, HelmetProvider } from 'react-helmet-async';
 
 export function ThemeToggler() {
-  const { resolvedTheme, setTheme } = useTheme()
-  const [mounted, setMounted] = useState(false)
+  const { resolvedTheme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
-    setMounted(true)
-  }, [])
+    setMounted(true);
+  }, []);
 
   if (!mounted) {
-    return null
+    return null;
   }
 
   const handleThemeToggle = () => {
-    setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')
+    setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
   }
 
   const iconProps = {
     className: 'hover:text-theme-primary transition duration-300 ease-in-out',
     size: '1.5rem',
   }
 
+  const themeColor = resolvedTheme === 'dark' ? '#101623' : '#F5F3FF';
+
   return (
-    <button
-      onClick={handleThemeToggle}
-      title={`Toggle dark mode (current state: ${resolvedTheme})`}
-      aria-label="Toggle dark mode"
-    >
-      {resolvedTheme === 'dark' ? (
-        <HiSun
-          {...iconProps}
-          className="text-light-primary hover:text-theme-primary transition duration-300 ease-in-out"
-        />
-      ) : (
-        <HiMoon
-          {...iconProps}
-          className="text-text-secondary hover:text-theme-primary transition duration-300 ease-in-out"
+    <HelmetProvider>
+      <Helmet>
+        <meta name="theme-color" content={themeColor} />
+        <meta name="msapplication-navbutton-color" content={themeColor} />
+        <meta name="msapplication-TileColor" content={themeColor} />
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta
+          name="apple-mobile-web-app-status-bar-style"
+          content={themeColor}
         />
-      )}
-    </button>
-  )
+      </Helmet>
+      <button
+        onClick={handleThemeToggle}
+        title={`Toggle dark mode (current state: ${resolvedTheme})`}
+      >
+        {resolvedTheme === 'dark' ? (
+          <HiSun
+            {...iconProps}
+            className="text-light-primary hover:text-theme-primary transition duration-300 ease-in-out"
+          />
+        ) : (
+          <HiMoon
+            {...iconProps}
+            className="text-text-secondary hover:text-theme-primary transition duration-300 ease-in-out"
+          />
+        )}
+      </button>
+    </HelmetProvider>
+  );
 }

package.json

@@ -31,6 +31,7 @@
     "react": "18.2.0",
     "react-autosuggest": "^10.1.0",
     "react-dom": "18.2.0",
+    "react-helmet-async": "^1.3.0",
     "react-icons": "^4.8.0",
     "react-spinners": "^0.13.8",
     "react-tooltip": "^5.20.0",