From 446d85474e7e9f40820cde35065fa7a1ecea4739 Mon Sep 17 00:00:00 2001 From: "Timothy J. Baek" Date: Mon, 8 Jul 2024 19:55:00 -0700 Subject: [PATCH] feat: darker oled --- src/app.html | 2 ++ src/lib/components/chat/Settings/General.svelte | 2 ++ tailwind.config.js | 4 ++-- 3 files changed, 6 insertions(+), 2 deletions(-) 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)' }