From 25c71d8ac2eadea2babb25e2cc077c843ac5aea0 Mon Sep 17 00:00:00 2001
From: Danny Liu <dannyjialiliu@gmail.com>
Date: Wed, 27 Mar 2024 16:04:34 -0700
Subject: [PATCH] Update theme options and persist OLED dark theme if selected

---
 src/app.html                                  |  6 +++++-
 .../components/chat/Settings/General.svelte   | 21 +++++++++++--------
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/app.html b/src/app.html
index c52cff98c..45b5d20e7 100644
--- a/src/app.html
+++ b/src/app.html
@@ -9,7 +9,11 @@
 		<script>
 			// On page load or when changing themes, best to add inline in `head` to avoid FOUC
 			(() => {
-				if (
+				if (localStorage.theme.includes('oled')) {
+					document.documentElement.style.setProperty('--color-gray-900', '#000000');
+					document.documentElement.classList.add('dark');
+				}
+				else if (
 					localStorage.theme === 'light' ||
 					(!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: light)').matches)
 				) {
diff --git a/src/lib/components/chat/Settings/General.svelte b/src/lib/components/chat/Settings/General.svelte
index fb05668eb..5e9c3c414 100644
--- a/src/lib/components/chat/Settings/General.svelte
+++ b/src/lib/components/chat/Settings/General.svelte
@@ -14,7 +14,7 @@
 	export let getModels: Function;
 
 	// General
-	let themes = ['dark', 'light', 'rose-pine dark', 'rose-pine-dawn light', 'oled'];
+	let themes = ['dark', 'light', 'rose-pine dark', 'rose-pine-dawn light', 'oled-dark'];
 	let selectedTheme = 'system';
 
 	let languages = [];
@@ -93,11 +93,15 @@
 	const applyTheme = (_theme: string) => {
 		let themeToApply = _theme;
 
+		if (themeToApply.includes('oled')) {
+			themeToApply = 'dark';
+		}
+
 		if (_theme === 'system') {
 			themeToApply = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
 		}
 
-		if (themeToApply === 'dark') {
+		if (themeToApply === 'dark' && !_theme.includes('oled')) {
 			document.documentElement.style.setProperty('--color-gray-900', '#171717');
 		}
 
@@ -117,14 +121,13 @@
 	};
 
 	const themeChangeHandler = (_theme: string) => {
-		if (_theme === 'oled') {
+		theme.set(_theme);
+		localStorage.setItem('theme', _theme);
+		if (_theme.includes('oled')) {
 			document.documentElement.style.setProperty('--color-gray-900', '#000000');
-		} else {
-			theme.set(_theme);
-			localStorage.setItem('theme', _theme);
-
-			applyTheme(_theme);
+			document.documentElement.classList.add('dark');
 		}
+		applyTheme(_theme);
 	};
 </script>
 
@@ -147,7 +150,7 @@
 						<option value="light">☀️ {$i18n.t('Light')}</option>
 						<option value="rose-pine dark">🪻 {$i18n.t('Rosé Pine')}</option>
 						<option value="rose-pine-dawn light">🌷 {$i18n.t('Rosé Pine Dawn')}</option>
-						<option value="oled">🌌 {$i18n.t('OLED Dark')}</option>
+						<option value="oled-dark">🌌 {$i18n.t('OLED Dark')}</option>
 					</select>
 				</div>
 			</div>