Merge pull request #344 from ollama-webui/custom-theme

fix: rose renamed to rose pine

src/app.html

@@ -12,11 +12,11 @@
 				(!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: light)').matches)
 			) {
 				document.documentElement.classList.add('light');
-			} else if (localStorage.theme === 'rose') {
+			} else if (localStorage.theme === 'dark') {
 				document.documentElement.classList.add('dark');
-				document.documentElement.classList.add(localStorage.theme);
 			} else {
 				document.documentElement.classList.add('dark');
+				document.documentElement.classList.add(localStorage.theme);
 			}
 		</script>
 

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 @@
 									
 								</button> -->
 
-								<div class="flex items-center">
+								<div class="flex items-center relative">
-									<div>
+									<div class=" absolute right-16">
 										{#if theme === 'dark'}
 											<svg
 												xmlns="http://www.w3.org/2000/svg"
@@ -985,10 +985,10 @@
 									</div>
 
 									<select
-										class="w-fit pr-8 rounded py-2 px-2 text-xs bg-transparent outline-none"
+										class="w-fit pr-8 rounded py-2 px-2 text-xs bg-transparent outline-none text-right"
 										bind:value={theme}
 										placeholder="Select a theme"
-										on:change={() => {
+										on:change={(e) => {
 											localStorage.theme = theme;
 
 											themes
@@ -999,7 +999,7 @@
 
 											document.documentElement.classList.add(theme);
 
-											if (theme === 'rose') {
+											if (theme === 'rose-pine') {
 												document.documentElement.classList.add('dark');
 											}
 
@@ -1008,7 +1008,7 @@
 									>
 										<option value="dark">Dark</option>
 										<option value="light">Light</option>
-										<option value="rose">Rose</option>
+										<option value="rose-pine">Rosé Pine</option>
 									</select>
 								</div>
 							</div>

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;
 }