Mirrors/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2026-09-02 03:59:45 +02:00
Code Issues Packages Projects Releases Wiki Activity

refac

Browse Source
This commit is contained in:
Timothy Jaeryang Baek
2026-08-28 12:18:37 -04:00
parent 62e5eab60b
commit e6031ea6da
4 changed files with 72 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/app.css
View File

@@ -865,77 +865,115 @@ body {
padding-bottom: 2rem; /* space for the bottom toolbar */
}
/* High Contrast Mode: placeholders bottom out at 1.58:1 (WCAG 1.4.3 wants 4.5:1). */
/* Accessibility Mode: placeholders bottom out at 1.58:1 (WCAG 1.4.3 wants 4.5:1). */
@layer utilities {
html.high-contrast:not(.dark) :is(input, textarea)::placeholder {
color: var(--color-gray-600);
color: var(--color-gray-700);
}
html.high-contrast.dark :is(input, textarea)::placeholder {
color: var(--color-gray-500);
color: var(--color-gray-300);
}
}
/* High Contrast Mode: muted text fails WCAG 1.4.3 (2.07:1 light, 3.12:1 dark).
/* Accessibility Mode: muted text fails WCAG 1.4.3 (2.07:1 light, 3.12:1 dark).
:where() keeps these at low specificity so hover variants still win. */
@layer utilities {
html:where(.high-contrast):not(:where(.dark)) .text-gray-400 {
color: var(--color-gray-600);
color: var(--color-gray-700);
}
html:where(.high-contrast).dark .dark\:text-gray-600 {
color: var(--color-gray-400);
html:where(.high-contrast).dark :is(.dark\:text-gray-400, .dark\:text-gray-500, .dark\:text-gray-600) {
color: var(--color-gray-300);
}
html:where(.high-contrast).dark
:is(
.dark\:hover\:text-gray-100:hover,
.dark\:hover\:text-gray-200:hover,
.dark\:hover\:text-gray-300:hover,
.dark\:hover\:text-gray-400:hover
) {
color: #fff;
}
/* Elements that hover to a lighter grey than the new resting colour. */
html:where(.high-contrast):not(:where(.dark)) .hover\:text-gray-500:hover {
color: var(--color-gray-800);
html:where(.high-contrast):not(:where(.dark))
:is(
.hover\:text-gray-500:hover,
.hover\:text-gray-600:hover,
.hover\:text-gray-700:hover,
.hover\:text-gray-800:hover
) {
color: var(--color-gray-900);
}
}
/* High Contrast Mode: gray-500 muted text is 2.77:1 in light (WCAG 1.4.3 wants 4.5:1).
/* Accessibility Mode: gray-500 muted text is 2.77:1 in light (WCAG 1.4.3 wants 4.5:1).
The utility stays in the layer so hover variants still outrank it; the classes below
are unlayered, so their override has to be too. */
@layer utilities {
html:where(.high-contrast):not(:where(.dark)) .text-gray-500 {
color: var(--color-gray-600);
html:where(.high-contrast):not(:where(.dark)) :is(.text-gray-500, .text-gray-600) {
color: var(--color-gray-700);
}
}
html.high-contrast:not(.dark) :is(.app-muted, .app-icon-muted, .tiptap table) {
color: var(--color-gray-600);
color: var(--color-gray-700);
}
/* High Contrast Mode: the lightest muted pair, 1.58:1 in light and 2.14:1 in dark.
html.high-contrast.dark :is(.app-muted, .app-icon-muted, .tiptap table) {
color: var(--color-gray-300);
}
/* Accessibility Mode: the lightest muted pair, 1.58:1 in light and 2.14:1 in dark.
text-gray-400/70 is an icon colour, so 1.4.11 governs it, and 2.07:1 misses that too. */
@layer utilities {
html:where(.high-contrast):not(:where(.dark)) :is(.text-gray-300, .text-gray-400\/70) {
color: var(--color-gray-600);
color: var(--color-gray-700);
}
html:where(.high-contrast).dark .dark\:text-gray-700 {
color: var(--color-gray-400);
html:where(.high-contrast).dark :is(.dark\:text-gray-700, .dark\:text-gray-800) {
color: var(--color-gray-300);
}
/* Hover states that land lighter than the new resting colour. */
html:where(.high-contrast):not(:where(.dark)) .hover\:text-gray-500:hover {
color: var(--color-gray-800);
html:where(.high-contrast):not(:where(.dark))
:is(
.hover\:text-gray-500:hover,
.hover\:text-gray-600:hover,
.hover\:text-gray-700:hover,
.hover\:text-gray-800:hover
) {
color: var(--color-gray-900);
}
html:where(.high-contrast):not(:where(.dark)) .group:hover .group-hover\:text-gray-500 {
color: var(--color-gray-800);
html:where(.high-contrast):not(:where(.dark))
.group:hover
:is(.group-hover\:text-gray-500, .group-hover\:text-gray-600, .group-hover\:text-gray-700) {
color: var(--color-gray-900);
}
html:where(.high-contrast).dark
.group:hover
:is(
.dark\:group-hover\:text-gray-200,
.dark\:group-hover\:text-gray-300,
.dark\:group-hover\:text-gray-400
) {
color: #fff;
}
}
/* Autocompletion ghost text is 2.65:1 in light; the dark canvas already passes. */
html.high-contrast:not(.dark) .ai-autocompletion::after {
color: var(--color-gray-600);
color: var(--color-gray-700);
}
/* The shimmer gradient is 2.10:1 in light, and clipping it to the text leaves no
solid colour to raise; render it as flat text instead. */
html.high-contrast:not(.dark) .shimmer {
background: none;
color: var(--color-gray-700);
-webkit-text-fill-color: var(--color-gray-700);
color: var(--color-gray-800);
-webkit-text-fill-color: var(--color-gray-800);
}

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

@@ -268,6 +268,8 @@
'full width mode',
'haptic feedback',
'hapticfeedback',
'accessibility mode',
'accessibilitymode',
'high contrast mode',
'highcontrastmode',
'iframe sandbox allow forms',

6
src/lib/components/common/InterfaceSettings.svelte
View File

@@ -490,13 +490,13 @@
<div>
<div class={settingRowClass}>
<div id="high-contrast-mode-label" class={settingLabelClass}>
{$i18n.t('High Contrast Mode')}
<div id="accessibility-mode-label" class={settingLabelClass}>
{$i18n.t('Accessibility Mode')}
</div>
<div class={settingControlClass}>
<Switch
ariaLabelledbyId="high-contrast-mode-label"
ariaLabelledbyId="accessibility-mode-label"
tooltip={true}
bind:state={highContrastMode}
inherited={isDefaultSetting('highContrastMode')}

5
src/lib/components/workspace/Knowledge.svelte
View File

@@ -272,6 +272,11 @@
viewOption = localStorage?.workspaceViewOption || '';
sourceOption = localStorage?.workspaceKnowledgeSourceOption || '';
loaded = true;
await tick();
if (items === null && !itemsLoading) {
await init();
}
if (showCreateOnMount) {
showCreateModal = true;