update theme meta tag bg color

Author: nemanjam

src/components/BaseHead.astro

@@ -43,8 +43,7 @@ const ogImageUrl = new URL(image, url);
   <meta name="viewport" content="width=device-width,initial-scale=1" />
 
   {/* wrong, set from theme toggle */}
-  <meta name="theme-color" content="#c1ddf9" media="(prefers-color-scheme: light)" />
-  <meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)" />
+  <meta name="theme-color" content="" />
 
   {/* Links */}
   {/* Root-Relative URL (Starts with /): */}

src/components/ThemeScript.astro

@@ -1,16 +1,21 @@
 ---
+import { SELECTORS } from '@/constants/dom';
 import * as themeConstants from '@/constants/theme';
 import { CONFIG_CLIENT } from '@/config/client';
 import { getDefaultThemes } from '@/utils/theme';
 
 // can not import server vars, is:inline
 
 const { DEFAULT_MODE } = CONFIG_CLIENT;
+const { THEME_META_TAG_SELECTOR } = SELECTORS;
 const defaultThemes = getDefaultThemes();
 ---
 
 {/* Inlined to avoid flash of white content. */}
-<script is:inline define:vars={{ themeConstants, defaultThemes, DEFAULT_MODE }}>
+<script
+  is:inline
+  define:vars={{ themeConstants, defaultThemes, DEFAULT_MODE, THEME_META_TAG_SELECTOR }}
+>
   // this is JavaScript, not TypeScript
   const { MODES, THEMES, THEME_CONFIG } = themeConstants;
   const { DATA_ATTRIBUTE, CHANGE_EVENT, LOCAL_STORAGE_KEY } = THEME_CONFIG;
@@ -147,6 +152,22 @@ const defaultThemes = getDefaultThemes();
     if (typeof localStorage !== 'undefined') {
       localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(newTheme));
     }
+
+    // must have dealy for bg color to apply
+    setTimeout(() => updateMetaTag(), 1000);
+  };
+
+  const updateMetaTag = () => {
+    const bodyElement = document.body;
+    if (!bodyElement) return;
+
+    const computedStyles = window.getComputedStyle(bodyElement);
+    const bgColor = computedStyles.backgroundColor;
+
+    const metaElement = document.querySelector(THEME_META_TAG_SELECTOR);
+    if (!metaElement) return;
+
+    metaElement.setAttribute('content', bgColor);
   };
 
   // initial setup

src/constants/dom.ts

@@ -6,4 +6,5 @@ export const SELECTORS = {
   GITHUB_MARKDOWN_BODY_SELECTOR: '#markdown-body-id',
   SCROLL_TO_TOP_ID: 'main-header',
   SCROLL_TO_TOP_SELECTOR: '#main-header',
+  THEME_META_TAG_SELECTOR: 'meta[name="theme-color"]',
 } as const;