Skip to content

GitLab

"git@developer.sourcefind.cn:jerrrrry/infinicore.git" did not exist on "99e19cc80dcead25229c889882966f4f233390fe"
Commit cea74eaf authored by Timothy J. Baek's avatar Timothy J. Baek
Browse files

feat: light mode theme update

parent adf9ccb5
Show whitespace changes
Inline Side-by-side
Showing with 1909 additions and 5075 deletions
package-lock.json
View file @ cea74eaf
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
View file @ cea74eaf
{ {
"name": "open-webui", "name": "open-webui",
"version": "0.1.114", "version": "0.1.115",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "vite dev --host", "dev": "vite dev --host",
......
src/lib/components/chat/Messages/Placeholder.svelte
View file @ cea74eaf
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
<img <img
src={modelfiles[model]?.imageUrl ?? `${WEBUI_BASE_URL}/static/favicon.png`} src={modelfiles[model]?.imageUrl ?? `${WEBUI_BASE_URL}/static/favicon.png`}
alt="modelfile" alt="modelfile"
class=" w-14 rounded-full border-[1px] border-gray-200 dark:border-none" class=" size-12 rounded-full border-[1px] border-gray-200 dark:border-none"
draggable="false" draggable="false"
/> />
{:else} {:else}
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
src={models.length === 1 src={models.length === 1
? `${WEBUI_BASE_URL}/static/favicon.png` ? `${WEBUI_BASE_URL}/static/favicon.png`
: `${WEBUI_BASE_URL}/static/favicon.png`} : `${WEBUI_BASE_URL}/static/favicon.png`}
class=" w-14 rounded-full border-[1px] border-gray-200 dark:border-none" class=" size-12 rounded-full border-[1px] border-gray-200 dark:border-none"
alt="logo" alt="logo"
draggable="false" draggable="false"
/> />
......
src/lib/components/layout/Navbar.svelte
View file @ cea74eaf
...@@ -69,10 +69,7 @@ ...@@ -69,10 +69,7 @@
</script> </script>
<ShareChatModal bind:show={showShareChatModal} {downloadChat} {shareChat} /> <ShareChatModal bind:show={showShareChatModal} {downloadChat} {shareChat} />
<nav <nav id="nav" class=" sticky py-2.5 top-0 flex flex-row justify-center z-30">
id="nav"
class=" sticky py-2.5 top-0 flex flex-row justify-center bg-white/95 dark:bg-gray-900/90 dark:text-gray-200 backdrop-blur-xl z-30"
>
<div <div
class=" flex {$settings?.fullScreenMode ?? null class=" flex {$settings?.fullScreenMode ?? null
? 'max-w-full' ? 'max-w-full'
...@@ -113,7 +110,7 @@ ...@@ -113,7 +110,7 @@
<Tags {tags} {deleteTag} {addTag} /> <Tags {tags} {deleteTag} {addTag} />
<button <button
class=" cursor-pointer p-1.5 flex dark:hover:bg-gray-700 rounded-lg transition border dark:border-gray-600" class=" cursor-pointer p-1.5 flex dark:hover:bg-gray-700 rounded-lg transition"
on:click={async () => { on:click={async () => {
showShareChatModal = !showShareChatModal; showShareChatModal = !showShareChatModal;
......
src/lib/components/layout/Sidebar.svelte
View file @ cea74eaf
...@@ -108,7 +108,7 @@ ...@@ -108,7 +108,7 @@
bind:this={navElement} bind:this={navElement}
class="h-screen max-h-[100dvh] min-h-screen {show class="h-screen max-h-[100dvh] min-h-screen {show
? 'lg:relative w-[260px]' ? 'lg:relative w-[260px]'
: '-translate-x-[260px] w-[0px]'} bg-black text-gray-200 shadow-2xl text-sm transition z-40 fixed top-0 left-0 : '-translate-x-[260px] w-[0px]'} bg-gray-50 dark:bg-gray-950 dark:text-gray-200 text-sm transition z-40 fixed top-0 left-0
" "
> >
<div <div
...@@ -119,7 +119,7 @@ ...@@ -119,7 +119,7 @@
<div class="px-2 flex justify-center space-x-2"> <div class="px-2 flex justify-center space-x-2">
<a <a
id="sidebar-new-chat-button" id="sidebar-new-chat-button"
class="flex-grow flex justify-between rounded-xl px-3.5 py-2 hover:bg-gray-900 transition" class="flex-grow flex justify-between rounded-xl px-4 py-2 hover:bg-gray-200 dark:hover:bg-gray-900 transition"
href="/" href="/"
on:click={async () => { on:click={async () => {
selectedChatId = null; selectedChatId = null;
...@@ -135,7 +135,7 @@ ...@@ -135,7 +135,7 @@
<div class="self-center mr-1.5"> <div class="self-center mr-1.5">
<img <img
src="{WEBUI_BASE_URL}/static/favicon.png" src="{WEBUI_BASE_URL}/static/favicon.png"
class=" w-7 -translate-x-1.5 rounded-full" class=" size-6 -translate-x-1.5 rounded-full"
alt="logo" alt="logo"
/> />
</div> </div>
...@@ -164,7 +164,7 @@ ...@@ -164,7 +164,7 @@
{#if $user?.role === 'admin'} {#if $user?.role === 'admin'}
<div class="px-2 flex justify-center mt-0.5"> <div class="px-2 flex justify-center mt-0.5">
<a <a
class="flex-grow flex space-x-3 rounded-xl px-3.5 py-2 hover:bg-gray-900 transition" class="flex-grow flex space-x-3 rounded-xl px-3.5 py-2 hover:bg-gray-200 dark:hover:bg-gray-900 transition"
href="/modelfiles" href="/modelfiles"
on:click={() => { on:click={() => {
selectedChatId = null; selectedChatId = null;
...@@ -196,7 +196,7 @@ ...@@ -196,7 +196,7 @@
<div class="px-2 flex justify-center"> <div class="px-2 flex justify-center">
<a <a
class="flex-grow flex space-x-3 rounded-xl px-3.5 py-2 hover:bg-gray-900 transition" class="flex-grow flex space-x-3 rounded-xl px-3.5 py-2 hover:bg-gray-200 dark:hover:bg-gray-900 transition"
href="/prompts" href="/prompts"
on:click={() => { on:click={() => {
selectedChatId = null; selectedChatId = null;
...@@ -228,7 +228,7 @@ ...@@ -228,7 +228,7 @@
<div class="px-2 flex justify-center mb-1"> <div class="px-2 flex justify-center mb-1">
<a <a
class="flex-grow flex space-x-3 rounded-xl px-3.5 py-2 hover:bg-gray-900 transition" class="flex-grow flex space-x-3 rounded-xl px-3.5 py-2 hover:bg-gray-200 dark:hover:bg-gray-900 transition"
href="/documents" href="/documents"
on:click={() => { on:click={() => {
selectedChatId = null; selectedChatId = null;
...@@ -261,7 +261,7 @@ ...@@ -261,7 +261,7 @@
<div class="relative flex flex-col flex-1 overflow-y-auto"> <div class="relative flex flex-col flex-1 overflow-y-auto">
{#if !($settings.saveChatHistory ?? true)} {#if !($settings.saveChatHistory ?? true)}
<div class="absolute z-40 w-full h-full bg-black/90 flex justify-center"> <div class="absolute z-40 w-full h-full dark:bg-black/90 flex justify-center">
<div class=" text-left px-5 py-2"> <div class=" text-left px-5 py-2">
<div class=" font-medium">{$i18n.t('Chat History is off for this browser.')}</div> <div class=" font-medium">{$i18n.t('Chat History is off for this browser.')}</div>
<div class="text-xs mt-2"> <div class="text-xs mt-2">
...@@ -305,7 +305,7 @@ ...@@ -305,7 +305,7 @@
<div class="px-2 mt-1 mb-2 flex justify-center space-x-2"> <div class="px-2 mt-1 mb-2 flex justify-center space-x-2">
<div class="flex w-full" id="chat-search"> <div class="flex w-full" id="chat-search">
<div class="self-center pl-3 py-2 rounded-l-xl bg-gray-950"> <div class="self-center pl-3 py-2 rounded-l-xl bg-white dark:bg-gray-950">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" viewBox="0 0 20 20"
...@@ -321,7 +321,7 @@ ...@@ -321,7 +321,7 @@
</div> </div>
<input <input
class="w-full rounded-r-xl py-1.5 pl-2.5 pr-4 text-sm text-gray-300 bg-gray-950 outline-none" class="w-full rounded-r-xl py-1.5 pl-2.5 pr-4 text-sm dark:text-gray-300 dark:bg-gray-950 outline-none"
placeholder={$i18n.t('Search')} placeholder={$i18n.t('Search')}
bind:value={search} bind:value={search}
on:focus={() => { on:focus={() => {
...@@ -334,7 +334,7 @@ ...@@ -334,7 +334,7 @@
{#if $tags.length > 0} {#if $tags.length > 0}
<div class="px-2.5 mt-0.5 mb-2 flex gap-1 flex-wrap"> <div class="px-2.5 mt-0.5 mb-2 flex gap-1 flex-wrap">
<button <button
class="px-2.5 text-xs font-medium bg-gray-900 hover:bg-gray-800 transition rounded-full" class="px-2.5 text-xs font-medium bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-800 transition rounded-full"
on:click={async () => { on:click={async () => {
await chats.set(await getChatList(localStorage.token)); await chats.set(await getChatList(localStorage.token));
}} }}
...@@ -343,7 +343,7 @@ ...@@ -343,7 +343,7 @@
</button> </button>
{#each $tags as tag} {#each $tags as tag}
<button <button
class="px-2.5 text-xs font-medium bg-gray-900 hover:bg-gray-800 transition rounded-full" class="px-2.5 text-xs font-medium bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-800 transition rounded-full"
on:click={async () => { on:click={async () => {
let chatIds = await getChatListByTagName(localStorage.token, tag.name); let chatIds = await getChatListByTagName(localStorage.token, tag.name);
if (chatIds.length === 0) { if (chatIds.length === 0) {
...@@ -385,10 +385,10 @@ ...@@ -385,10 +385,10 @@
class=" w-full flex justify-between rounded-xl px-3 py-2 {chat.id === $chatId || class=" w-full flex justify-between rounded-xl px-3 py-2 {chat.id === $chatId ||
chat.id === chatTitleEditId || chat.id === chatTitleEditId ||
chat.id === chatDeleteId chat.id === chatDeleteId
? 'bg-gray-900' ? 'bg-gray-300 dark:bg-gray-900'
: chat.id === selectedChatId : chat.id === selectedChatId
? 'bg-gray-950' ? 'bg-gray-100 dark:bg-gray-950'
: 'group-hover:bg-gray-950'} whitespace-nowrap text-ellipsis" : 'group-hover:bg-gray-100 dark:group-hover:bg-gray-950'} whitespace-nowrap text-ellipsis"
> >
<input bind:value={chatTitle} class=" bg-transparent w-full outline-none mr-10" /> <input bind:value={chatTitle} class=" bg-transparent w-full outline-none mr-10" />
</div> </div>
...@@ -397,10 +397,10 @@ ...@@ -397,10 +397,10 @@
class=" w-full flex justify-between rounded-xl px-3 py-2 {chat.id === $chatId || class=" w-full flex justify-between rounded-xl px-3 py-2 {chat.id === $chatId ||
chat.id === chatTitleEditId || chat.id === chatTitleEditId ||
chat.id === chatDeleteId chat.id === chatDeleteId
? 'bg-gray-900' ? 'bg-gray-300 dark:bg-gray-900'
: chat.id === selectedChatId : chat.id === selectedChatId
? 'bg-gray-950' ? 'bg-gray-100 dark:bg-gray-950'
: 'group-hover:bg-gray-950'} whitespace-nowrap text-ellipsis" : ' group-hover:bg-gray-100 dark:group-hover:bg-gray-950'} whitespace-nowrap text-ellipsis"
href="/c/{chat.id}" href="/c/{chat.id}"
on:click={() => { on:click={() => {
selectedChatId = chat.id; selectedChatId = chat.id;
...@@ -422,10 +422,10 @@ ...@@ -422,10 +422,10 @@
class=" class="
{chat.id === $chatId || chat.id === chatTitleEditId || chat.id === chatDeleteId {chat.id === $chatId || chat.id === chatTitleEditId || chat.id === chatDeleteId
? ' from-gray-900' ? 'from-gray-300 dark:from-gray-900'
: chat.id === selectedChatId : chat.id === selectedChatId
? 'from-gray-950' ? 'from-gray-100 dark:from-gray-950'
: 'invisible group-hover:visible from-gray-950'} : 'invisible group-hover:visible from-gray-100 dark:from-gray-950'}
absolute right-[10px] top-[10px] pr-2 pl-5 bg-gradient-to-l from-80% absolute right-[10px] top-[10px] pr-2 pl-5 bg-gradient-to-l from-80%
to-transparent" to-transparent"
...@@ -433,7 +433,7 @@ ...@@ -433,7 +433,7 @@
{#if chatTitleEditId === chat.id} {#if chatTitleEditId === chat.id}
<div class="flex self-center space-x-1.5 z-10"> <div class="flex self-center space-x-1.5 z-10">
<button <button
class=" self-center hover:text-white transition" class=" self-center dark:hover:text-white transition"
on:click={() => { on:click={() => {
editChatTitle(chat.id, chatTitle); editChatTitle(chat.id, chatTitle);
chatTitleEditId = null; chatTitleEditId = null;
...@@ -454,7 +454,7 @@ ...@@ -454,7 +454,7 @@
</svg> </svg>
</button> </button>
<button <button
class=" self-center hover:text-white transition" class=" self-center dark:hover:text-white transition"
on:click={() => { on:click={() => {
chatTitleEditId = null; chatTitleEditId = null;
chatTitle = ''; chatTitle = '';
...@@ -475,7 +475,7 @@ ...@@ -475,7 +475,7 @@
{:else if chatDeleteId === chat.id} {:else if chatDeleteId === chat.id}
<div class="flex self-center space-x-1.5 z-10"> <div class="flex self-center space-x-1.5 z-10">
<button <button
class=" self-center hover:text-white transition" class=" self-center dark:hover:text-white transition"
on:click={() => { on:click={() => {
deleteChat(chat.id); deleteChat(chat.id);
}} }}
...@@ -494,7 +494,7 @@ ...@@ -494,7 +494,7 @@
</svg> </svg>
</button> </button>
<button <button
class=" self-center hover:text-white transition" class=" self-center dark:hover:text-white transition"
on:click={() => { on:click={() => {
chatDeleteId = null; chatDeleteId = null;
}} }}
...@@ -527,7 +527,7 @@ ...@@ -527,7 +527,7 @@
> >
<button <button
aria-label="Chat Menu" aria-label="Chat Menu"
class=" self-center hover:text-white transition" class=" self-center dark:hover:text-white transition"
on:click={() => { on:click={() => {
selectedChatId = chat.id; selectedChatId = chat.id;
}} }}
...@@ -558,7 +558,7 @@ ...@@ -558,7 +558,7 @@
<div class="flex flex-col"> <div class="flex flex-col">
{#if $user !== undefined} {#if $user !== undefined}
<button <button
class=" flex rounded-xl py-3 px-3.5 w-full hover:bg-gray-900 transition" class=" flex rounded-xl py-3 px-3.5 w-full hover:bg-gray-200 dark:hover:bg-gray-900 transition"
on:click={() => { on:click={() => {
showDropdown = !showDropdown; showDropdown = !showDropdown;
}} }}
...@@ -576,13 +576,13 @@ ...@@ -576,13 +576,13 @@
{#if showDropdown} {#if showDropdown}
<div <div
id="dropdownDots" id="dropdownDots"
class="absolute z-40 bottom-[70px] 4.5rem rounded-xl shadow w-[240px] bg-gray-900" class="absolute z-40 bottom-[70px] 4.5rem rounded-xl shadow w-[240px] bg-white dark:bg-gray-900"
in:slide={{ duration: 150 }} in:slide={{ duration: 150 }}
> >
<div class="py-2 w-full"> <div class="py-2 w-full">
{#if $user.role === 'admin'} {#if $user.role === 'admin'}
<button <button
class="flex py-2.5 px-3.5 w-full hover:bg-gray-800 transition" class="flex py-2.5 px-3.5 w-full dark:hover:bg-gray-800 transition"
on:click={() => { on:click={() => {
goto('/admin'); goto('/admin');
showDropdown = false; showDropdown = false;
...@@ -608,7 +608,7 @@ ...@@ -608,7 +608,7 @@
</button> </button>
<button <button
class="flex py-2.5 px-3.5 w-full hover:bg-gray-800 transition" class="flex py-2.5 px-3.5 w-full dark:hover:bg-gray-800 transition"
on:click={() => { on:click={() => {
goto('/playground'); goto('/playground');
showDropdown = false; showDropdown = false;
...@@ -635,7 +635,7 @@ ...@@ -635,7 +635,7 @@
{/if} {/if}
<button <button
class="flex py-2.5 px-3.5 w-full hover:bg-gray-800 transition" class="flex py-2.5 px-3.5 w-full dark:hover:bg-gray-800 transition"
on:click={async () => { on:click={async () => {
await showSettings.set(true); await showSettings.set(true);
showDropdown = false; showDropdown = false;
...@@ -666,11 +666,11 @@ ...@@ -666,11 +666,11 @@
</button> </button>
</div> </div>
<hr class=" border-gray-700 m-0 p-0" /> <hr class=" dark:border-gray-700 m-0 p-0" />
<div class="py-2 w-full"> <div class="py-2 w-full">
<button <button
class="flex py-2.5 px-3.5 w-full hover:bg-gray-800 transition" class="flex py-2.5 px-3.5 w-full dark:hover:bg-gray-800 transition"
on:click={() => { on:click={() => {
localStorage.removeItem('token'); localStorage.removeItem('token');
location.href = '/auth'; location.href = '/auth';
...@@ -722,7 +722,7 @@ ...@@ -722,7 +722,7 @@
}} }}
><span class="" data-state="closed" ><span class="" data-state="closed"
><div ><div
class="flex h-[72px] w-8 items-center justify-center opacity-20 group-hover:opacity-100 transition" class="flex h-[72px] w-8 items-center justify-center opacity-50 group-hover:opacity-100 transition"
> >
<div class="flex h-6 w-6 flex-col items-center"> <div class="flex h-6 w-6 flex-col items-center">
<div <div
......
src/lib/components/layout/Sidebar/ChatMenu.svelte
View file @ cea74eaf
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
<div slot="content"> <div slot="content">
<DropdownMenu.Content <DropdownMenu.Content
class="w-full max-w-[130px] rounded-lg px-1 py-1.5 border border-gray-700/50 z-50 bg-gray-850 text-white" class="w-full max-w-[130px] rounded-lg px-1 py-1.5 border border-gray-300/30 dark:border-gray-700/50 z-50 bg-white dark:bg-gray-850 dark:text-white shadow"
sideOffset={-2} sideOffset={-2}
side="bottom" side="bottom"
align="start" align="start"
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment