From 0b59ebd7b0d9deaa9e7211692bd5a42773b028da Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Mon, 19 Apr 2021 18:36:51 +0300
Subject: [PATCH] Dark Theme: Support browser UI coloring (#1027)

---
 src/util/switchTheme.ts | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/util/switchTheme.ts b/src/util/switchTheme.ts
index 3090fc20b..937064e9f 100644
--- a/src/util/switchTheme.ts
+++ b/src/util/switchTheme.ts
@@ -27,16 +27,21 @@ const colors = (Object.keys(themeColors) as Array<keyof typeof themeColors>).map
 }));
 
 export default (theme: ISettings['theme'], withAnimation: boolean) => {
+  const isDarkTheme = theme === 'dark';
   const shouldAnimate = isInitialized && withAnimation;
-  const startIndex = theme === 'dark' ? 0 : 1;
-  const endIndex = theme === 'dark' ? 1 : 0;
+  const startIndex = isDarkTheme ? 0 : 1;
+  const endIndex = isDarkTheme ? 1 : 0;
   const startAt = Date.now();
+  const themeColorTag = document.querySelector('meta[name="theme-color"]');
 
-  document.documentElement.classList.remove(`theme-${theme === 'dark' ? 'light' : 'dark'}`);
+  document.documentElement.classList.remove(`theme-${isDarkTheme ? 'light' : 'dark'}`);
   if (isInitialized) {
     document.documentElement.classList.add('disable-animations');
   }
   document.documentElement.classList.add(`theme-${theme}`);
+  if (themeColorTag) {
+    themeColorTag.setAttribute('content', isDarkTheme ? '#212121' : '#fff');
+  }
 
   setTimeout(() => {
     document.documentElement.classList.remove('disable-animations');