OpenWebUI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-06-23 02:16:52 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Merge pull request #14827 from itk-dev/feature/high-contrast-mode-menu

Browse Source 
FEAT: high contrast mode menu
This commit is contained in:
Tim Jaeryang Baek 2025-06-10 11:49:47 +04:00 committed by GitHub
commit 6e11bf73a7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 94 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
src/lib/components/chat/SettingsModal.svelte
View File

@ -580,10 +580,16 @@
{#each visibleTabs as tabId (tabId)} {#each visibleTabs as tabId (tabId)}
{#if tabId === 'general'} {#if tabId === 'general'}
<button <button
class="px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab === class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
'general' ${
? '' selectedTab === 'general'
: ' text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}" ? ($settings.highContrastMode ?? false)
? 'dark:bg-gray-800 bg-gray-200'
: ''
: ($settings.highContrastMode ?? false)
? 'hover:bg-gray-200 dark:hover:bg-gray-800'
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'
}`}
on:click={() => { on:click={() => {
selectedTab = 'general'; selectedTab = 'general';
}} }}
@ -606,10 +612,16 @@
</button> </button>
{:else if tabId === 'interface'} {:else if tabId === 'interface'}
<button <button
class="px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab === class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
'interface' ${
? '' selectedTab === 'interface'
: ' text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}" ? ($settings.highContrastMode ?? false)
? 'dark:bg-gray-800 bg-gray-200'
: ''
: ($settings.highContrastMode ?? false)
? 'hover:bg-gray-200 dark:hover:bg-gray-800'
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'
}`}
on:click={() => { on:click={() => {
selectedTab = 'interface'; selectedTab = 'interface';
}} }}
@ -633,10 +645,16 @@
{:else if tabId === 'connections'} {:else if tabId === 'connections'}
{#if $user?.role === 'admin' || ($user?.role === 'user' && $config?.features?.enable_direct_connections)} {#if $user?.role === 'admin' || ($user?.role === 'user' && $config?.features?.enable_direct_connections)}
<button <button
class="px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab === class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
'connections' ${
? '' selectedTab === 'connections'
: ' text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}" ? ($settings.highContrastMode ?? false)
? 'dark:bg-gray-800 bg-gray-200'
: ''
: ($settings.highContrastMode ?? false)
? 'hover:bg-gray-200 dark:hover:bg-gray-800'
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'
}`}
on:click={() => { on:click={() => {
selectedTab = 'connections'; selectedTab = 'connections';
}} }}
@ -659,10 +677,16 @@
{:else if tabId === 'tools'} {:else if tabId === 'tools'}
{#if $user?.role === 'admin' || ($user?.role === 'user' && $user?.permissions?.features?.direct_tool_servers)} {#if $user?.role === 'admin' || ($user?.role === 'user' && $user?.permissions?.features?.direct_tool_servers)}
<button <button
class="px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab === class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
'tools' ${
? '' selectedTab === 'tools'
: ' text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}" ? ($settings.highContrastMode ?? false)
? 'dark:bg-gray-800 bg-gray-200'
: ''
: ($settings.highContrastMode ?? false)
? 'hover:bg-gray-200 dark:hover:bg-gray-800'
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'
}`}
on:click={() => { on:click={() => {
selectedTab = 'tools'; selectedTab = 'tools';
}} }}
@ -686,10 +710,16 @@
{/if} {/if}
{:else if tabId === 'personalization'} {:else if tabId === 'personalization'}
<button <button
class="px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab === class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
'personalization' ${
? '' selectedTab === 'personalization'
: ' text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}" ? ($settings.highContrastMode ?? false)
? 'dark:bg-gray-800 bg-gray-200'
: ''
: ($settings.highContrastMode ?? false)
? 'hover:bg-gray-200 dark:hover:bg-gray-800'
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'
}`}
on:click={() => { on:click={() => {
selectedTab = 'personalization'; selectedTab = 'personalization';
}} }}
@ -701,10 +731,16 @@
</button> </button>
{:else if tabId === 'audio'} {:else if tabId === 'audio'}
<button <button
class="px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab === class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
'audio' ${
? '' selectedTab === 'audio'
: ' text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}" ? ($settings.highContrastMode ?? false)
? 'dark:bg-gray-800 bg-gray-200'
: ''
: ($settings.highContrastMode ?? false)
? 'hover:bg-gray-200 dark:hover:bg-gray-800'
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'
}`}
on:click={() => { on:click={() => {
selectedTab = 'audio'; selectedTab = 'audio';
}} }}
@ -728,10 +764,16 @@
</button> </button>
{:else if tabId === 'chats'} {:else if tabId === 'chats'}
<button <button
class="px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab === class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
'chats' ${
? '' selectedTab === 'chats'
: ' text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}" ? ($settings.highContrastMode ?? false)
? 'dark:bg-gray-800 bg-gray-200'
: ''
: ($settings.highContrastMode ?? false)
? 'hover:bg-gray-200 dark:hover:bg-gray-800'
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'
}`}
on:click={() => { on:click={() => {
selectedTab = 'chats'; selectedTab = 'chats';
}} }}
@ -754,10 +796,16 @@
</button> </button>
{:else if tabId === 'account'} {:else if tabId === 'account'}
<button <button
class="px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab === class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
'account' ${
? '' selectedTab === 'account'
: ' text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}" ? ($settings.highContrastMode ?? false)
? 'dark:bg-gray-800 bg-gray-200'
: ''
: ($settings.highContrastMode ?? false)
? 'hover:bg-gray-200 dark:hover:bg-gray-800'
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'
}`}
on:click={() => { on:click={() => {
selectedTab = 'account'; selectedTab = 'account';
}} }}
@ -780,10 +828,16 @@
</button> </button>
{:else if tabId === 'about'} {:else if tabId === 'about'}
<button <button
class="px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab === class={`px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition
'about' ${
? '' selectedTab === 'about'
: ' text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}" ? ($settings.highContrastMode ?? false)
? 'dark:bg-gray-800 bg-gray-200'
: ''
: ($settings.highContrastMode ?? false)
? 'hover:bg-gray-200 dark:hover:bg-gray-800'
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'
}`}
on:click={() => { on:click={() => {
selectedTab = 'about'; selectedTab = 'about';
}} }}
@ -814,7 +868,9 @@
{#if $user?.role === 'admin'} {#if $user?.role === 'admin'}
<button <button
class="px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white mt-auto" class="px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {$settings.highContrastMode
? 'hover:bg-gray-200 dark:hover:bg-gray-800'
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'}"
on:click={async () => { on:click={async () => {
await goto('/admin/settings'); await goto('/admin/settings');
show = false; show = false;

1
src/lib/stores/index.ts
View File

@ -142,6 +142,7 @@ type Settings = {
audio?: AudioSettings; audio?: AudioSettings;
showUsername?: boolean; showUsername?: boolean;
notificationEnabled?: boolean; notificationEnabled?: boolean;
highContrastMode?: boolean;
title?: TitleSettings; title?: TitleSettings;
splitLargeDeltas?: boolean; splitLargeDeltas?: boolean;
chatDirection: 'LTR' | 'RTL' | 'auto'; chatDirection: 'LTR' | 'RTL' | 'auto';