From 976c714063b10cceabb7cb7310cb52731382e2f0 Mon Sep 17 00:00:00 2001
From: Danny Liu <dannyjialiliu@gmail.com>
Date: Wed, 27 Mar 2024 10:50:30 -0700
Subject: [PATCH] feat: OLED dark theme

---
 src/lib/components/chat/Settings/General.svelte | 15 ++++++++++++---
 tailwind.config.js                              |  3 +--
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/chat/Settings/General.svelte b/src/lib/components/chat/Settings/General.svelte
index 35f777a78..e1869f828 100644
--- a/src/lib/components/chat/Settings/General.svelte
+++ b/src/lib/components/chat/Settings/General.svelte
@@ -97,6 +97,10 @@
 			themeToApply = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
 		}
 
+		if (themeToApply === 'dark') {
+			document.documentElement.style.setProperty('--color-gray-900', '#171717');
+		}
+
 		themes
 			.filter((e) => e !== themeToApply)
 			.forEach((e) => {
@@ -113,10 +117,14 @@
 	};
 
 	const themeChangeHandler = (_theme: string) => {
-		theme.set(_theme);
-		localStorage.setItem('theme', _theme);
+		if (_theme === 'oled') {
+			document.documentElement.style.setProperty('--color-gray-900', '#000000');
+		} else {
+			theme.set(_theme);
+			localStorage.setItem('theme', _theme);
 
-		applyTheme(_theme);
+			applyTheme(_theme);
+		}
 	};
 </script>
 
@@ -139,6 +147,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>
 					</select>
 				</div>
 			</div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 4a2143191..63413ccdb 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -16,8 +16,7 @@ export default {
 					700: '#4e4e4e',
 					800: '#333',
 					850: '#262626',
-
-					900: '#171717',
+					900: 'var(--color-gray-900, #171717)',
 					950: '#0d0d0d'
 				}
 			},