feat: OLED dark theme

sime2408 · Mar 27, 2024 · 976c714 · 976c714
1 parent 7d45d27
commit 976c714
Showing 2 changed files with 13 additions and 5 deletions.
diff --git 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
@@ -16,8 +16,7 @@ export default {
 					700: '#4e4e4e',
 					800: '#333',
 					850: '#262626',
-
-					900: '#171717',
+					900: 'var(--color-gray-900, #171717)',
 					950: '#0d0d0d'
 				}
 			},