From b5f54180c8645113ae4e177f3ebb97e1947dc9e2 Mon Sep 17 00:00:00 2001
From: satnaing <satnaingdev@gmail.com>
Date: Thu, 14 Sep 2023 11:53:46 +0630
Subject: [PATCH] feat: update theme-color tag on theme switch

---
 public/toggle-theme.js   | 17 +++++++++++++++++
 src/layouts/Layout.astro |  2 ++
 2 files changed, 19 insertions(+)

diff --git a/public/toggle-theme.js b/public/toggle-theme.js
index 23ad32e58..bea85d781 100644
--- a/public/toggle-theme.js
+++ b/public/toggle-theme.js
@@ -27,6 +27,23 @@ function reflectPreference() {
   document.firstElementChild.setAttribute("data-theme", themeValue);
 
   document.querySelector("#theme-btn")?.setAttribute("aria-label", themeValue);
+
+  // Get a reference to the body element
+  const body = document.body;
+
+  // Check if the body element exists before using getComputedStyle
+  if (body) {
+    // Get the computed styles for the body element
+    const computedStyles = window.getComputedStyle(body);
+
+    // Get the background color property
+    const bgColor = computedStyles.backgroundColor;
+
+    // Set the background color in <meta theme-color ... />
+    document
+      .querySelector("meta[name='theme-color']")
+      ?.setAttribute("content", bgColor);
+  }
 }
 
 // set early so no page flashes / CSS is made aware
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 05ae788e5..1373076a7 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -63,6 +63,8 @@ const socialImageURL = new URL(
       rel="stylesheet"
     />
 
+    <meta name="theme-color" content="" />
+
     {
       // If PUBLIC_GOOGLE_SITE_VERIFICATION is set in the environment variable,
       // include google-site-verification tag in the heading