feat: update themeColor in head from app state

package.json

@@ -18,6 +18,7 @@
     "geolib": "^3.3.3",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
+    "react-helmet": "^6.1.0",
     "ui-neumorphism": "^1.1.3",
     "use-position": "^1.0.0",
     "use-stay-awake": "^0.1.7"
@@ -28,6 +29,7 @@
     "@release-it/conventional-changelog": "^3.3.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "@types/react-helmet": "^6.1.4",
     "@types/use-position": "^0.0.0",
     "@typescript-eslint/eslint-plugin": "^5.7.0",
     "@typescript-eslint/parser": "^5.7.0",

src/App.tsx

@@ -9,6 +9,7 @@ import {
   isPast,
   add,
 } from "date-fns";
+import Helmet from "react-helmet";
 import useStayAwake from "use-stay-awake";
 
 import { TextField, Button, Dialog, Card } from "ui-neumorphism";
@@ -140,10 +141,30 @@ function App() {
     return () => clearInterval(interval);
   });
 
+  const getThemeColor = (appState: string) => {
+    switch (appState) {
+      case "alarm-playing":
+        return "coral";
+      case "alarm-set":
+        return "#000";
+      case "has-walked":
+        return "teal";
+      default:
+        return "#3E3D42";
+    }
+  };
+
   const [showResetModal, setResetModal] = useState(false);
 
   return (
     <div className={`App theme--dark ${appState}`}>
+      <Helmet>
+        <meta name="theme-color" content={getThemeColor(appState)} />
+        <meta
+          name="msapplication-TileColor"
+          content={getThemeColor(appState)}
+        />
+      </Helmet>
       <div className="App-header">
         {alarmSet && alarm ? (
           <p>

yarn.lock

@@ -1413,6 +1413,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-helmet@^6.1.4":
+  version "6.1.4"
+  resolved "https://registry.yarnpkg.com/@types/react-helmet/-/react-helmet-6.1.4.tgz#3e54a3eb37ba7fb34ffafc64f425be4e68df03b9"
+  integrity sha512-jyx50RNZXVaTGHY3MsoRPNpeiVk8b0XTPgD/O6KHF6COTDnG/+lRjPYvTK5nfWtR3xDOux0w6bHLAsaHo2ZLTA==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@^17.0.0":
   version "17.0.37"
   resolved "https://registry.npmjs.org/@types/react/-/react-17.0.37.tgz"
@@ -4666,6 +4673,21 @@ react-dom@^17.0.0:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
+react-fast-compare@^3.1.1:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
+  integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
+
+react-helmet@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726"
+  integrity sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==
+  dependencies:
+    object-assign "^4.1.1"
+    prop-types "^15.7.2"
+    react-fast-compare "^3.1.1"
+    react-side-effect "^2.1.0"
+
 react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
@@ -4676,6 +4698,11 @@ react-refresh@^0.11.0:
   resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz"
   integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
 
+react-side-effect@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.1.tgz#66c5701c3e7560ab4822a4ee2742dee215d72eb3"
+  integrity sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==
+
 react-transition-group@^4.4.1:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"