From 976c714063b10cceabb7cb7310cb52731382e2f0 Mon Sep 17 00:00:00 2001 From: Danny Liu Date: Wed, 27 Mar 2024 10:50:30 -0700 Subject: [PATCH 1/7] 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); + } }; @@ -139,6 +147,7 @@ + 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' } }, From c24d9d3beab709479a88979f26728095f25d32ee Mon Sep 17 00:00:00 2001 From: Danny Liu Date: Wed, 27 Mar 2024 11:23:00 -0700 Subject: [PATCH 2/7] Add 'oled' theme option to themes list --- src/lib/components/chat/Settings/General.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/chat/Settings/General.svelte b/src/lib/components/chat/Settings/General.svelte index e1869f828..fb05668eb 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']; + let themes = ['dark', 'light', 'rose-pine dark', 'rose-pine-dawn light', 'oled']; let selectedTheme = 'system'; let languages = []; From 25c71d8ac2eadea2babb25e2cc077c843ac5aea0 Mon Sep 17 00:00:00 2001 From: Danny Liu Date: Wed, 27 Mar 2024 16:04:34 -0700 Subject: [PATCH 3/7] 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 @@ @@ -147,7 +150,7 @@ - + From dfeadf9595e6893bf5134e55ad911527071098f5 Mon Sep 17 00:00:00 2001 From: Danny Liu Date: Wed, 27 Mar 2024 16:05:37 -0700 Subject: [PATCH 4/7] ordering of themes in select menu, group dark themes together --- src/lib/components/chat/Settings/General.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/chat/Settings/General.svelte b/src/lib/components/chat/Settings/General.svelte index 5e9c3c414..95b93824b 100644 --- a/src/lib/components/chat/Settings/General.svelte +++ b/src/lib/components/chat/Settings/General.svelte @@ -147,10 +147,10 @@ > + - From cf442097300c42fb7d40dced3e51bfef351ec00a Mon Sep 17 00:00:00 2001 From: Danny Liu Date: Wed, 27 Mar 2024 16:19:02 -0700 Subject: [PATCH 5/7] refac: code style --- src/lib/components/chat/Settings/General.svelte | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/lib/components/chat/Settings/General.svelte b/src/lib/components/chat/Settings/General.svelte index 95b93824b..65d358f8c 100644 --- a/src/lib/components/chat/Settings/General.svelte +++ b/src/lib/components/chat/Settings/General.svelte @@ -91,11 +91,7 @@ }); const applyTheme = (_theme: string) => { - let themeToApply = _theme; - - if (themeToApply.includes('oled')) { - themeToApply = 'dark'; - } + let themeToApply = _theme === 'oled-dark' ? 'dark' : _theme; if (_theme === 'system') { themeToApply = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; From 572eefe18175c7a8b6643ceb2923a3f65c8cd586 Mon Sep 17 00:00:00 2001 From: Danny Liu Date: Wed, 27 Mar 2024 16:19:57 -0700 Subject: [PATCH 6/7] =?UTF-8?q?use=20=F0=9F=8C=83=20emoji=20for=20oled-dar?= =?UTF-8?q?k=20option?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/lib/components/chat/Settings/General.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/components/chat/Settings/General.svelte b/src/lib/components/chat/Settings/General.svelte index 65d358f8c..3da335170 100644 --- a/src/lib/components/chat/Settings/General.svelte +++ b/src/lib/components/chat/Settings/General.svelte @@ -143,7 +143,7 @@ > - + From 67865fc5adb230c0cfb74385482665b0caf87172 Mon Sep 17 00:00:00 2001 From: Danny Liu Date: Wed, 27 Mar 2024 22:39:47 -0700 Subject: [PATCH 7/7] dynamically adjust --color-gray-950 value for OLED black sidebar --- src/app.html | 1 + src/lib/components/chat/Settings/General.svelte | 2 ++ tailwind.config.js | 2 +- 3 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/app.html b/src/app.html index 45b5d20e7..c9f86d8f6 100644 --- a/src/app.html +++ b/src/app.html @@ -11,6 +11,7 @@ (() => { if (localStorage.theme.includes('oled')) { document.documentElement.style.setProperty('--color-gray-900', '#000000'); + document.documentElement.style.setProperty('--color-gray-950', '#000000'); document.documentElement.classList.add('dark'); } else if ( diff --git a/src/lib/components/chat/Settings/General.svelte b/src/lib/components/chat/Settings/General.svelte index 3da335170..3b7126d85 100644 --- a/src/lib/components/chat/Settings/General.svelte +++ b/src/lib/components/chat/Settings/General.svelte @@ -99,6 +99,7 @@ if (themeToApply === 'dark' && !_theme.includes('oled')) { document.documentElement.style.setProperty('--color-gray-900', '#171717'); + document.documentElement.style.setProperty('--color-gray-950', '#0d0d0d'); } themes @@ -121,6 +122,7 @@ localStorage.setItem('theme', _theme); if (_theme.includes('oled')) { document.documentElement.style.setProperty('--color-gray-900', '#000000'); + document.documentElement.style.setProperty('--color-gray-950', '#000000'); document.documentElement.classList.add('dark'); } applyTheme(_theme); diff --git a/tailwind.config.js b/tailwind.config.js index 63413ccdb..9caccabf5 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -17,7 +17,7 @@ export default { 800: '#333', 850: '#262626', 900: 'var(--color-gray-900, #171717)', - 950: '#0d0d0d' + 950: 'var(--color-gray-950, #0d0d0d)' } }, typography: {