From 2a04dd0f9b683f866ce46374f4de6c7973488d6e Mon Sep 17 00:00:00 2001
From: Sebastian <sebastian.danielsson@proton.me>
Date: Sun, 8 Sep 2024 17:38:49 +0200
Subject: [PATCH] Set theme colors to fix white top bar for PWA

---
 src/app.html                                  | 29 ++++++++++---------
 .../components/chat/Settings/General.svelte   | 23 +++++++++++++++
 2 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/src/app.html b/src/app.html
index 532f2e9b5..d7f4513e7 100644
--- a/src/app.html
+++ b/src/app.html
@@ -8,6 +8,7 @@
 			name="viewport"
 			content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover"
 		/>
+		<meta name="theme-color" content="#171717" />
 		<meta name="robots" content="noindex,nofollow" />
 		<meta name="description" content="Open WebUI" />
 		<link
@@ -26,33 +27,33 @@
 		<script>
 			// On page load or when changing themes, best to add inline in `head` to avoid FOUC
 			(() => {
+				const metaThemeColorTag = document.querySelector('meta[name="theme-color"]');
+				const prefersDarkTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
 				if (!localStorage?.theme) {
 					localStorage.theme = 'system';
 				}
 
-				if (localStorage?.theme && localStorage?.theme.includes('oled')) {
+				if (localStorage.theme === 'system') {
+					document.documentElement.classList.add(prefersDarkTheme ? 'dark' : 'light');
+					metaThemeColorTag.setAttribute('content', prefersDarkTheme ? '#171717' : '#ffffff');
+				} else if (localStorage.theme === 'oled-dark') {
 					document.documentElement.style.setProperty('--color-gray-800', '#101010');
 					document.documentElement.style.setProperty('--color-gray-850', '#050505');
 					document.documentElement.style.setProperty('--color-gray-900', '#000000');
 					document.documentElement.style.setProperty('--color-gray-950', '#000000');
 					document.documentElement.classList.add('dark');
-				} else if (
-					localStorage.theme === 'light' ||
-					(!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: light)').matches)
-				) {
+					metaThemeColorTag.setAttribute('content', '#000000');
+				} else if (localStorage.theme === 'light') {
 					document.documentElement.classList.add('light');
-				} else if (localStorage.theme && localStorage.theme !== 'system') {
-					localStorage.theme.split(' ').forEach((e) => {
-						document.documentElement.classList.add(e);
-					});
-				} else if (localStorage.theme && localStorage.theme === 'system') {
-					systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
-					document.documentElement.classList.add(systemTheme ? 'dark' : 'light');
-				} else if (localStorage.theme && localStorage.theme === 'her') {
+					metaThemeColorTag.setAttribute('content', '#ffffff');
+				} else if (localStorage.theme === 'her') {
 					document.documentElement.classList.add('dark');
 					document.documentElement.classList.add('her');
+					metaThemeColorTag.setAttribute('content', '#983724');
 				} else {
 					document.documentElement.classList.add('dark');
+					metaThemeColorTag.setAttribute('content', '#171717');
 				}
 
 				window.matchMedia('(prefers-color-scheme: dark)').addListener((e) => {
@@ -60,9 +61,11 @@
 						if (e.matches) {
 							document.documentElement.classList.add('dark');
 							document.documentElement.classList.remove('light');
+							metaThemeColorTag.setAttribute('content', '#171717');
 						} else {
 							document.documentElement.classList.add('light');
 							document.documentElement.classList.remove('dark');
+							metaThemeColorTag.setAttribute('content', '#ffffff');
 						}
 					}
 				});
diff --git a/src/lib/components/chat/Settings/General.svelte b/src/lib/components/chat/Settings/General.svelte
index 6d6a5e4a0..c308b9005 100644
--- a/src/lib/components/chat/Settings/General.svelte
+++ b/src/lib/components/chat/Settings/General.svelte
@@ -114,6 +114,29 @@
 			document.documentElement.classList.add(e);
 		});
 
+		const metaThemeColor = document.querySelector('meta[name="theme-color"]');
+		if (metaThemeColor) {
+			if (_theme.includes('system')) {
+				const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
+					? 'dark'
+					: 'light';
+				console.log('Setting system meta theme color: ' + systemTheme);
+				metaThemeColor.setAttribute('content', systemTheme === 'light' ? '#ffffff' : '#171717');
+			} else {
+				console.log('Setting meta theme color: ' + _theme);
+				metaThemeColor.setAttribute(
+					'content',
+					_theme === 'dark'
+						? '#171717'
+						: _theme === 'oled-dark'
+							? '#000000'
+							: _theme === 'her'
+								? '#983724'
+								: '#ffffff'
+				);
+			}
+		}
+
 		console.log(_theme);
 	};