From e09496078bca4fe06fe93a9cc95b33170cede568 Mon Sep 17 00:00:00 2001
From: Sojan Jose <sojan@pepalo.com>
Date: Fri, 22 May 2026 12:59:48 +0530
Subject: [PATCH] fix(widget): improve dark mode select options (#14538)

Fixes the web widget select dropdown styling in dark mode so native
select options remain readable against the widget's dark UI.

Closes
None

## Screenshots

Previous state:

<img width="426" height="764" alt="Previous dark mode dropdown issue"
src="https://github.com/user-attachments/assets/812fa88c-ae5a-4769-be14-748fbbaf7dfe"
/>

Current state:

<img width="1210" height="610" alt="Current dark mode dropdown styling"
src="https://github.com/user-attachments/assets/0ec9b6d7-025d-4b97-b43e-ef026857f9c4"
/>

## How to test

1. Enable the web widget pre-chat form with a list/select field.
2. Load the widget with dark mode enabled.
3. Open the select field and verify the select control and option text
remain readable in dark mode.

## What changed

- Adds light/dark color-scheme handling for widget native selects.
- Applies explicit option background and text colors so dark-mode select
options do not inherit unreadable colors from the browser popup.

---------

Co-authored-by: iamsivin <iamsivin@gmail.com>
---
 app/javascript/widget/assets/scss/woot.scss | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/app/javascript/widget/assets/scss/woot.scss b/app/javascript/widget/assets/scss/woot.scss
index 07aa6a0e3..b47179d29 100755
--- a/app/javascript/widget/assets/scss/woot.scss
+++ b/app/javascript/widget/assets/scss/woot.scss
@@ -101,6 +101,15 @@ select:not(.reset-base) {
   background-repeat: no-repeat;
   background-size: 9px 6px;
   font-family: inherit;
+  @apply [color-scheme:light];
+
+  option:not(:disabled) {
+    @apply bg-n-solid-2 text-n-slate-12;
+  }
+}
+
+.dark select:not(.reset-base) {
+  @apply [color-scheme:dark];
 }
 
 p code {