feat: synchronize theme browser chrome

apps/web/src/layouts/Layout.astro

@@ -52,7 +52,8 @@ const jsonLd = JSON.stringify({
     <link rel="icon" href="/favicon-32.png" sizes="32x32" type="image/png" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <link rel="manifest" href="/site.webmanifest" />
-    <meta name="theme-color" content="#082226" />
+    <meta name="theme-color" content="#f2f5ee" media={theme === "system" ? "(prefers-color-scheme: light)" : theme === "light" ? "all" : "not all"} data-theme-color="light" />
+    <meta name="theme-color" content="#071719" media={theme === "system" ? "(prefers-color-scheme: dark)" : theme === "dark" ? "all" : "not all"} data-theme-color="dark" />
     <meta property="og:locale" content="ru_RU" />
     <meta property="og:type" content="website" />
     <meta property="og:site_name" content="RF4 Spotter" />
@@ -94,6 +95,7 @@ const jsonLd = JSON.stringify({
 <script>
   const root = document.documentElement;
   const themeButtons = document.querySelectorAll<HTMLButtonElement>("[data-theme-option]");
+  const themeColors = document.querySelectorAll<HTMLMetaElement>("[data-theme-color]");
   const allowedThemes = new Set(["system", "light", "dark"]);
 
   const applyTheme = (value: string) => {
@@ -103,6 +105,10 @@ const jsonLd = JSON.stringify({
     themeButtons.forEach((button) => {
       button.setAttribute("aria-pressed", String(button.dataset.themeOption === theme));
     });
+    themeColors.forEach((meta) => {
+      const color = meta.dataset.themeColor;
+      meta.media = theme === "system" ? `(prefers-color-scheme: ${color})` : color === theme ? "all" : "not all";
+    });
     const secure = location.protocol === "https:" ? "; Secure" : "";
     document.cookie = `rf4-theme=${theme}; Max-Age=31536000; Path=/; SameSite=Lax${secure}`;
   };