From 0b761776c4193199984c326bb914516ccfae77ed Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Fri, 16 May 2025 17:06:21 +0400
Subject: [PATCH] enh: high contrast mode

---
 .../components/chat/Settings/Interface.svelte | 29 +++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/src/lib/components/chat/Settings/Interface.svelte b/src/lib/components/chat/Settings/Interface.svelte
index f17c8b40d..ad41c05be 100644
--- a/src/lib/components/chat/Settings/Interface.svelte
+++ b/src/lib/components/chat/Settings/Interface.svelte
@@ -32,6 +32,8 @@
 	let notificationSound = true;
 	let notificationSoundAlways = false;
 
+	let highContrastMode = false;
+
 	let detectArtifacts = true;
 
 	let richTextInput = true;
@@ -85,6 +87,11 @@
 		saveSettings({ splitLargeChunks: splitLargeChunks });
 	};
 
+	const toggleHighContrastMode = async () => {
+		highContrastMode = !highContrastMode;
+		saveSettings({ highContrastMode: highContrastMode });
+	};
+
 	const togglePromptAutocomplete = async () => {
 		promptAutocomplete = !promptAutocomplete;
 		saveSettings({ promptAutocomplete: promptAutocomplete });
@@ -370,6 +377,28 @@
 		<div>
 			<div class=" mb-1.5 text-sm font-medium">{$i18n.t('UI')}</div>
 
+			<div>
+				<div class=" py-0.5 flex w-full justify-between">
+					<div class=" self-center text-xs">
+						{$i18n.t('High Contrast Mode')} ({$i18n.t('Beta')})
+					</div>
+
+					<button
+						class="p-1 px-3 text-xs flex rounded-sm transition"
+						on:click={() => {
+							toggleHighContrastMode();
+						}}
+						type="button"
+					>
+						{#if highContrastMode === true}
+							<span class="ml-2 self-center">{$i18n.t('On')}</span>
+						{:else}
+							<span class="ml-2 self-center">{$i18n.t('Off')}</span>
+						{/if}
+					</button>
+				</div>
+			</div>
+
 			<div>
 				<div class=" py-0.5 flex w-full justify-between">
 					<div class=" self-center text-xs">{$i18n.t('Landing Page Mode')}</div>