浏览代码

high contrast mode on model selector to enhance accessibility

Sine Jespersen 3 月之前
父节点
当前提交
e5435c6480
共有 1 个文件被更改,包括 7 次插入2 次删除
  1. 7 2
      src/lib/components/chat/ModelSelector/Selector.svelte

+ 7 - 2
src/lib/components/chat/ModelSelector/Selector.svelte

@@ -346,12 +346,17 @@
 	closeFocus={false}
 >
 	<DropdownMenu.Trigger
-		class="relative w-full font-primary"
+		class="relative w-full font-primary {($settings?.highContrastMode ?? false)
+			? ''
+			: 'outline-hidden focus:outline-hidden'}"
 		aria-label={placeholder}
 		id="model-selector-{id}-button"
 	>
 		<button
-			class="flex w-full text-left px-0.5 outline-hidden bg-transparent truncate {triggerClassName} justify-between font-medium placeholder-gray-400 focus:outline-hidden"
+			class="flex w-full text-left px-0.5 bg-transparent truncate {triggerClassName} justify-between font-medium {($settings?.highContrastMode ??
+			false)
+				? 'dark:placeholder-gray-100 placeholder-gray-800'
+				: 'placeholder-gray-400'}"
 			on:mouseenter={async () => {
 				models.set(
 					await getModels(