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 Packages Projects Releases Wiki Activity

highContrastMode (for accessibility) on text color in add connection modal

Browse Source
This commit is contained in:
Sine Jespersen 2025-06-13 13:16:11 +02:00
parent 1160a03644
commit 669a9f0777
1 changed files with 45 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/lib/components/AddConnectionModal.svelte
View File

@ -3,7 +3,7 @@
import { getContext, onMount } from 'svelte'; import { getContext, onMount } from 'svelte';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
import { models } from '$lib/stores'; import { settings } from '$lib/stores';
import { verifyOpenAIConnection } from '$lib/apis/openai'; import { verifyOpenAIConnection } from '$lib/apis/openai';
import { verifyOllamaConnection } from '$lib/apis/ollama'; import { verifyOllamaConnection } from '$lib/apis/ollama';
@ -258,7 +258,12 @@
<div class="flex gap-2 mt-1.5"> <div class="flex gap-2 mt-1.5">
<div class="flex flex-col w-full"> <div class="flex flex-col w-full">
<label for="url-input" class=" mb-0.5 text-xs text-gray-500">{$i18n.t('URL')}</label> <label
for="url-input"
class={`mb-0.5 text-xs text-gray-500
${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : ''}`}
>{$i18n.t('URL')}</label
>
<div class="flex-1"> <div class="flex-1">
<input <input
@ -310,7 +315,11 @@
<div class="flex gap-2 mt-2"> <div class="flex gap-2 mt-2">
<div class="flex flex-col w-full"> <div class="flex flex-col w-full">
<div class=" mb-0.5 text-xs text-gray-500">{$i18n.t('Key')}</div> <label
class={`mb-0.5 text-xs text-gray-500
${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : ''}`}
>{$i18n.t('Key')}</label
>
<div class="flex-1"> <div class="flex-1">
<SensitiveInput <SensitiveInput
@ -323,7 +332,12 @@
</div> </div>
<div class="flex flex-col w-full"> <div class="flex flex-col w-full">
<div class=" mb-1 text-xs text-gray-500">{$i18n.t('Prefix ID')}</div> <label
for="prefix-id-input"
class={`mb-0.5 text-xs text-gray-500
${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : ''}`}
>{$i18n.t('Prefix ID')}</label
>
<div class="flex-1"> <div class="flex-1">
<Tooltip <Tooltip
@ -334,6 +348,7 @@
<input <input
class="w-full text-sm bg-transparent placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-hidden" class="w-full text-sm bg-transparent placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-hidden"
type="text" type="text"
id="prefix-id-input"
bind:value={prefixId} bind:value={prefixId}
placeholder={$i18n.t('Prefix ID')} placeholder={$i18n.t('Prefix ID')}
autocomplete="off" autocomplete="off"
@ -346,10 +361,16 @@
{#if azure} {#if azure}
<div class="flex gap-2 mt-2"> <div class="flex gap-2 mt-2">
<div class="flex flex-col w-full"> <div class="flex flex-col w-full">
<div class=" mb-1 text-xs text-gray-500">{$i18n.t('API Version')}</div> <label
for="api-version-input"
class={`mb-0.5 text-xs text-gray-500
${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : ''}`}
>{$i18n.t('API Version')}</label
>
<div class="flex-1"> <div class="flex-1">
<input <input
id="api-version-input"
class="w-full text-sm bg-transparent placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-hidden" class="w-full text-sm bg-transparent placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-hidden"
type="text" type="text"
bind:value={apiVersion} bind:value={apiVersion}
@ -364,7 +385,12 @@
<div class="flex gap-2 mt-2"> <div class="flex gap-2 mt-2">
<div class="flex flex-col w-full"> <div class="flex flex-col w-full">
<div class=" mb-1.5 text-xs text-gray-500">{$i18n.t('Tags')}</div> <div
class={`mb-0.5 text-xs text-gray-500
${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : ''}`}
>
{$i18n.t('Tags')}
</div>
<div class="flex-1"> <div class="flex-1">
<Tags <Tags
@ -389,7 +415,12 @@
<div class="flex flex-col w-full"> <div class="flex flex-col w-full">
<div class="mb-1 flex justify-between"> <div class="mb-1 flex justify-between">
<div class="text-xs text-gray-500">{$i18n.t('Model IDs')}</div> <div
class={`mb-0.5 text-xs text-gray-500
${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : ''}`}
>
{$i18n.t('Model IDs')}
</div>
</div> </div>
{#if modelIds.length > 0} {#if modelIds.length > 0}
@ -413,7 +444,10 @@
{/each} {/each}
</div> </div>
{:else} {:else}
<div class="text-gray-500 text-xs text-center py-2 px-10"> <div
class={`text-gray-500 text-xs text-center py-2 px-10
${($settings?.highContrastMode ?? false) ? 'text-gray-800 dark:text-gray-100' : ''}`}
>
{#if ollama} {#if ollama}
{$i18n.t('Leave empty to include all models from "{{url}}/api/tags" endpoint', { {$i18n.t('Leave empty to include all models from "{{url}}/api/tags" endpoint', {
url: url url: url
@ -438,7 +472,9 @@
<input <input
class="w-full py-1 text-sm rounded-lg bg-transparent {modelId class="w-full py-1 text-sm rounded-lg bg-transparent {modelId
? '' ? ''
: 'text-gray-500'} placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-hidden" : 'text-gray-500'} {($settings?.highContrastMode ?? false)
? 'dark:placeholder:text-gray-100 placeholder:text-gray-700'
: 'placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-hidden'}"
bind:value={modelId} bind:value={modelId}
placeholder={$i18n.t('Add a model ID')} placeholder={$i18n.t('Add a model ID')}
/> />