From aa36b269353304503a41dbcfa71a4cbdf8bc9d4c Mon Sep 17 00:00:00 2001 From: "Timothy J. Baek" Date: Mon, 1 Jan 2024 13:30:57 -0800 Subject: [PATCH 1/3] chore: funding yml added --- .github/FUNDING.yml | 1 + 1 file changed, 1 insertion(+) create mode 100644 .github/FUNDING.yml diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 000000000..ef274fa91 --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1 @@ +github: tjbck From af6e4eb90452ed54e6201a38e8518317744af673 Mon Sep 17 00:00:00 2001 From: "Timothy J. Baek" Date: Mon, 1 Jan 2024 16:05:05 -0800 Subject: [PATCH 2/3] feat: rosepine custom theme --- src/app.html | 3 + src/lib/components/chat/Messages.svelte | 2 +- src/lib/components/chat/SettingsModal.svelte | 89 ++++++++++++------ src/lib/components/layout/Navbar.svelte | 2 +- src/lib/stores/index.ts | 3 +- src/routes/(app)/+page.svelte | 4 +- src/routes/(app)/c/[id]/+page.svelte | 4 +- .../(app)/modelfiles/create/+page.svelte | 2 +- src/routes/(app)/modelfiles/edit/+page.svelte | 2 +- src/routes/+layout.svelte | 5 +- static/themes/rosepine.css | 91 +++++++++++++++++++ 11 files changed, 168 insertions(+), 39 deletions(-) create mode 100644 static/themes/rosepine.css diff --git a/src/app.html b/src/app.html index e5ed6aeb0..c07c5a690 100644 --- a/src/app.html +++ b/src/app.html @@ -12,6 +12,9 @@ (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: light)').matches) ) { document.documentElement.classList.add('light'); + } else if (localStorage.theme === 'rose') { + document.documentElement.classList.add('dark'); + document.documentElement.classList.add(localStorage.theme); } else { document.documentElement.classList.add('dark'); } diff --git a/src/lib/components/chat/Messages.svelte b/src/lib/components/chat/Messages.svelte index 8669f97b7..2a388fd2c 100644 --- a/src/lib/components/chat/Messages.svelte +++ b/src/lib/components/chat/Messages.svelte @@ -1,7 +1,7 @@ diff --git a/src/lib/components/chat/SettingsModal.svelte b/src/lib/components/chat/SettingsModal.svelte index b794f8571..dc4a59895 100644 --- a/src/lib/components/chat/SettingsModal.svelte +++ b/src/lib/components/chat/SettingsModal.svelte @@ -34,7 +34,7 @@ // General let API_BASE_URL = OLLAMA_API_BASE_URL; - let themes = ['dark', 'light', 'rose']; + let themes = ['dark', 'light', 'rose-pine']; let theme = 'dark'; let notificationEnabled = false; let system = ''; @@ -955,8 +955,8 @@ --> -
-
+
+
{#if theme === 'dark'}
diff --git a/static/themes/rosepine.css b/static/themes/rosepine.css index a7235b28b..352f06c3a 100644 --- a/static/themes/rosepine.css +++ b/static/themes/rosepine.css @@ -1,91 +1,91 @@ -.rose * { +.rose-pine * { color: #e0def4 !important; stroke: #907aa9 !important; } -.rose .app > * { +.rose-pine .app > * { background-color: #1f1d2e !important; } -.rose #nav { +.rose-pine #nav { background-color: #191724; } -.rose .py-2\.5.my-auto.flex.flex-col.justify-between.h-screen { +.rose-pine .py-2\.5.my-auto.flex.flex-col.justify-between.h-screen { background: #191724; } -.rose .bg-white.dark\:bg-gray-800 { +.rose-pine .bg-white.dark\:bg-gray-800 { background: #26233a; } -.rose .w-4.h-4 { +.rose-pine .w-4.h-4 { fill: #c4a7e7; } -.rose #chat-textarea { +.rose-pine #chat-textarea { background: #393552; margin: 0.3rem; padding: 0.5rem; } -.rose .bg-gradient-to-t.from-white.dark\:from-gray-800.from-40\%.pb-2 { +.rose-pine .bg-gradient-to-t.from-white.dark\:from-gray-800.from-40\%.pb-2 { background: #26233a !important; padding-top: 0.6rem; } -.rose +.rose-pine .text-white.bg-gray-100.dark\:text-gray-800.dark\:bg-gray-600.disabled.transition.rounded-lg.p-1.mr-0\.5.w-7.h-7.self-center { background-color: #6e6a86; transition: background 0.2s ease-out linear; } -.rose +.rose-pine .bg-black.text-white.hover\:bg-gray-900.dark\:bg-white.dark\:text-black.dark\:hover\:bg-gray-100.transition.rounded-lg.p-1.mr-0\.5.w-7.h-7.self-center { background-color: #286983; transition: background 0.2s ease-out linear; } -.rose +.rose-pine .bg-black.text-white.hover\:bg-gray-900.dark\:bg-white.dark\:text-black.dark\:hover\:bg-gray-100.transition.rounded-lg.p-1.mr-0\.5.w-7.h-7.self-center > * { fill: #9ccfd8 !important; transition: fill 0.2s ease-out linear; } -.rose +.rose-pine .w-full.flex.justify-between.rounded-md.px-3.py-2.hover\:bg-gray-900.bg-gray-900.transition.whitespace-nowrap.text-ellipsis { background-color: #56526e; font-weight: bold; } -.rose .hover\:bg-gray-900:hover { +.rose-pine .hover\:bg-gray-900:hover { --tw-bg-opacity: 1; background-color: rgb(57 53 82 / var(--tw-bg-opacity)); } -.rose .text-xs.text-gray-700.uppercase.bg-gray-50.dark\:bg-gray-700.dark\:text-gray-400 { +.rose-pine .text-xs.text-gray-700.uppercase.bg-gray-50.dark\:bg-gray-700.dark\:text-gray-400 { background-color: #403d52; } -.rose .scrollbar-hidden.relative.overflow-x-auto.whitespace-nowrap.svelte-3g4avz { +.rose-pine .scrollbar-hidden.relative.overflow-x-auto.whitespace-nowrap.svelte-3g4avz { border-radius: 16px 16px 0 0; } -.rose .base.enter.svelte-ug60r4 { +.rose-pine .base.enter.svelte-ug60r4 { background-color: #393552; } -.rose .message.svelte-1nauejd { +.rose-pine .message.svelte-1nauejd { color: #e0def4 !important; } -.rose .svelte-1ee93ns { +.rose-pine .svelte-1ee93ns { --primary: #eb6f92 !important; --secondary: #e0def4 !important; } -.rose .svelte-11kvm4p { +.rose-pine .svelte-11kvm4p { --primary: #9ccfd8 !important; --secondary: #1f1d2e !important; }