From 4679ce485c285f95bc04ff0b9fe65d8af3a00b1f Mon Sep 17 00:00:00 2001
From: James Panther <4462786+jpanther@users.noreply.github.com>
Date: Tue, 22 Nov 2022 09:35:17 +1100
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8=20Support=20live=20switching=20of?=
 =?UTF-8?q?=20`theme-color`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/js/appearance.js    | 11 +++++++++++
 layouts/partials/head.html |  3 +--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/assets/js/appearance.js b/assets/js/appearance.js
index 417b1a4a..322b7c7e 100644
--- a/assets/js/appearance.js
+++ b/assets/js/appearance.js
@@ -1,8 +1,16 @@
 const sitePreference = document.documentElement.getAttribute("data-default-appearance");
 const userPreference = localStorage.getItem("appearance");
 
+function setThemeColor() {
+  const metaThemeColor = document.querySelector("meta[name=theme-color]");
+  document.documentElement.classList.contains("dark")
+    ? metaThemeColor.setAttribute("content", "#27272a")
+    : metaThemeColor.setAttribute("content", "#ffffff");
+}
+
 if ((sitePreference === "dark" && userPreference === null) || userPreference === "dark") {
   document.documentElement.classList.add("dark");
+  setThemeColor();
 }
 
 if (document.documentElement.getAttribute("data-auto-appearance") === "true") {
@@ -12,6 +20,7 @@ if (document.documentElement.getAttribute("data-auto-appearance") === "true") {
     userPreference !== "light"
   ) {
     document.documentElement.classList.add("dark");
+    setThemeColor();
   }
   window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (event) => {
     if (event.matches) {
@@ -19,6 +28,7 @@ if (document.documentElement.getAttribute("data-auto-appearance") === "true") {
     } else {
       document.documentElement.classList.remove("dark");
     }
+    setThemeColor();
   });
 }
 
@@ -27,6 +37,7 @@ window.addEventListener("DOMContentLoaded", (event) => {
   if (switcher) {
     switcher.addEventListener("click", () => {
       document.documentElement.classList.toggle("dark");
+      setThemeColor();
       localStorage.setItem(
         "appearance",
         document.documentElement.classList.contains("dark") ? "dark" : "light"
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index fc09774d..2de24263 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -4,8 +4,7 @@
     <meta http-equiv="content-language" content="{{ . }}" />
   {{ end }}
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff" />
-  <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#27272a" />
+  <meta name="theme-color" content="#ffffff" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   {{/* Title */}}
   {{ if .IsHome -}}