diff --git a/src/app.html b/src/app.html
index da6af2cc4..8a650098d 100644
--- a/src/app.html
+++ b/src/app.html
@@ -23,6 +23,8 @@
 			// On page load or when changing themes, best to add inline in `head` to avoid FOUC
 			(() => {
 				if (localStorage?.theme && localStorage?.theme.includes('oled')) {
+					document.documentElement.style.setProperty('--color-gray-800', '#171717');
+					document.documentElement.style.setProperty('--color-gray-850', '#0d0d0d');
 					document.documentElement.style.setProperty('--color-gray-900', '#000000');
 					document.documentElement.style.setProperty('--color-gray-950', '#000000');
 					document.documentElement.classList.add('dark');
diff --git a/src/lib/components/chat/Settings/General.svelte b/src/lib/components/chat/Settings/General.svelte
index 94275d76d..020c8f85a 100644
--- a/src/lib/components/chat/Settings/General.svelte
+++ b/src/lib/components/chat/Settings/General.svelte
@@ -118,6 +118,8 @@
 		theme.set(_theme);
 		localStorage.setItem('theme', _theme);
 		if (_theme.includes('oled')) {
+			document.documentElement.style.setProperty('--color-gray-800', '#171717');
+			document.documentElement.style.setProperty('--color-gray-850', '#0d0d0d');
 			document.documentElement.style.setProperty('--color-gray-900', '#000000');
 			document.documentElement.style.setProperty('--color-gray-950', '#000000');
 			document.documentElement.classList.add('dark');
diff --git a/tailwind.config.js b/tailwind.config.js
index 9caccabf5..907fea052 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -14,8 +14,8 @@ export default {
 					500: '#9b9b9b',
 					600: '#676767',
 					700: '#4e4e4e',
-					800: '#333',
-					850: '#262626',
+					800: 'var(--color-gray-850, #333)',
+					850: 'var(--color-gray-850, #262626)',
 					900: 'var(--color-gray-900, #171717)',
 					950: 'var(--color-gray-950, #0d0d0d)'
 				}