From 7390863a1005eeadbb6dbdcbc47f9cc13298e101 Mon Sep 17 00:00:00 2001
From: Eiichi Yoshikawa <edo@bari-ikutsu.com>
Date: Mon, 19 Feb 2024 11:06:00 +0900
Subject: [PATCH] Add theme-color meta tag and apply selection of theme (#2918)

* Add theme-color meta tag and apply selection of theme

* update logic for retrieving current theme color

* add ts-ignore

* fix ts error

---------

Co-authored-by: Hailey <me@haileyok.com>
---
 bskyweb/templates/base.html       |  1 +
 src/alf/util/useColorModeTheme.ts | 19 ++++++++++---------
 web/index.html                    |  1 +
 3 files changed, 12 insertions(+), 9 deletions(-)
diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html
index 198e3baa..99b6f1dc 100644
--- a/bskyweb/templates/base.html
+++ b/bskyweb/templates/base.html
@@ -2,6 +2,7 @@
 <html>
 <head>
   <meta charset="UTF-8">
+  <meta name="theme-color">
   <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, viewport-fit=cover">
   <meta name="referrer" content="origin-when-cross-origin">
   <!--
diff --git a/src/alf/util/useColorModeTheme.ts b/src/alf/util/useColorModeTheme.ts
index 48cf904f..4f8921bf 100644
--- a/src/alf/util/useColorModeTheme.ts
+++ b/src/alf/util/useColorModeTheme.ts
@@ -13,7 +13,7 @@ export function useColorModeTheme(): ThemeName {
   React.useLayoutEffect(() => {
     const theme = getThemeName(colorScheme, colorMode, darkTheme)
     updateDocument(theme)
-    updateSystemBackground(theme)
+    SystemUI.setBackgroundColorAsync(getBackgroundColor(theme))
   }, [colorMode, colorScheme, darkTheme])
 
   return React.useMemo(
@@ -42,23 +42,24 @@ function updateDocument(theme: ThemeName) {
   if (isWeb && typeof window !== 'undefined') {
     // @ts-ignore web only
     const html = window.document.documentElement
+    // @ts-ignore web only
+    const meta = window.document.querySelector('meta[name="theme-color"]')
+
     // remove any other color mode classes
     html.className = html.className.replace(/(theme)--\w+/g, '')
-
     html.classList.add(`theme--${theme}`)
+    // set color to 'theme-color' meta tag
+    meta?.setAttribute('content', getBackgroundColor(theme))
   }
 }
 
-function updateSystemBackground(theme: ThemeName) {
+function getBackgroundColor(theme: ThemeName): string {
   switch (theme) {
     case 'light':
-      SystemUI.setBackgroundColorAsync(light.atoms.bg.backgroundColor)
-      break
+      return light.atoms.bg.backgroundColor
     case 'dark':
-      SystemUI.setBackgroundColorAsync(dark.atoms.bg.backgroundColor)
-      break
+      return dark.atoms.bg.backgroundColor
     case 'dim':
-      SystemUI.setBackgroundColorAsync(dim.atoms.bg.backgroundColor)
-      break
+      return dim.atoms.bg.backgroundColor
   }
 }
diff --git a/web/index.html b/web/index.html
index 42b443bb..992e69e0 100644
--- a/web/index.html
+++ b/web/index.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8">
+    <meta name="theme-color">
     <!--
       This viewport works for phones with notches.
       It's optimized for gestures by disabling global zoom.
