From d0da1a104ee779a2bab7854cc3d86386aa338814 Mon Sep 17 00:00:00 2001
From: ktprograms <71804605+ktprograms@users.noreply.github.com>
Date: Tue, 21 Dec 2021 09:26:42 +0800
Subject: [PATCH] Use Woodpecker theme colors on Safari Tab Bar / Header Bar
 (#632)

Add theme-color <meta> tag and dynamically change the theme-color when
switching into / out of dark mode.

It use the same colours as in the nav-bar component, but I don't think it's possible to access the Windi CSS colour definitions, so I had to hard core the hex values.

The theme-colour <meta> tag needs to be present in the HTML, otherwise `querySelector` returns null.
---
 web/index.html                      | 1 +
 web/src/compositions/useDarkMode.ts | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/web/index.html b/web/index.html
index fecf3cb87..66a0f1be1 100644
--- a/web/index.html
+++ b/web/index.html
@@ -5,6 +5,7 @@
     <link rel="alternate icon" type="image/png" href="/favicons/favicon-light-default.png" id="favicon-png" />
     <link rel="icon" type="image/svg+xml" href="/favicons/favicon-light-default.svg" id="favicon-svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="theme-color" content="#65a30d" />
     <title>Woodpecker</title>
     <script type="" src="/web-config.js"></script>
   </head>
diff --git a/web/src/compositions/useDarkMode.ts b/web/src/compositions/useDarkMode.ts
index 7d1c83e97..0188b2df0 100644
--- a/web/src/compositions/useDarkMode.ts
+++ b/web/src/compositions/useDarkMode.ts
@@ -7,9 +7,11 @@ watch(isDarkModeActive, (isActive) => {
   if (isActive) {
     document.documentElement.classList.remove('light');
     document.documentElement.classList.add('dark');
+    document.querySelector('meta[name=theme-color]')?.setAttribute('content', '#2e323e'); // dark-gray-900 (see windi.config.ts)
   } else {
     document.documentElement.classList.remove('dark');
     document.documentElement.classList.add('light');
+    document.querySelector('meta[name=theme-color]')?.setAttribute('content', '#65a30d'); // lime-600
   }
 });