From 3eabc8f4ddf9d6923631f8bf589a49ecd9d4511c Mon Sep 17 00:00:00 2001
From: Jared Vititoe <jjvititoe1@gmail.com>
Date: Wed, 3 Jun 2026 15:50:05 -0400
Subject: [PATCH] fix: auto-clear dropdown unreadable in dark mode

var(--bg-surface-variant) and var(--border-surface-variant) are not
defined in Cinny's vanilla-extract theme, so the select element renders
with a transparent/white background. Also native <option> elements ignore
most inherited CSS.

Fix: use folds color tokens (color.SurfaceVariant.*) for background,
border, and text color; add colorScheme:'dark' so the browser renders
the OS popup with dark styling; apply background+color to <option>
elements as a belt-and-suspenders fallback for browsers that honour it.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app/features/settings/account/Profile.tsx | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/app/features/settings/account/Profile.tsx b/src/app/features/settings/account/Profile.tsx
index c2117e0b0..ce261c902 100644
--- a/src/app/features/settings/account/Profile.tsx
+++ b/src/app/features/settings/account/Profile.tsx
@@ -22,6 +22,7 @@ import {
   Dialog,
   Header,
   config,
+  color,
   Spinner,
   PopOut,
   RectCords,
@@ -522,10 +523,11 @@ function ProfileStatus() {
             onChange={(e) => setClearAfter(e.target.value)}
             aria-label="Auto-clear status after"
             style={{
-              background: 'var(--bg-surface-variant)',
-              border: `1px solid var(--border-surface-variant)`,
+              background: color.SurfaceVariant.Container,
+              border: `1px solid ${color.SurfaceVariant.ContainerLine}`,
               borderRadius: config.radii.R300,
-              color: 'inherit',
+              color: color.SurfaceVariant.OnContainer,
+              colorScheme: 'dark',
               fontSize: '0.82rem',
               padding: `${config.space.S100} ${config.space.S200}`,
               cursor: 'pointer',
@@ -533,7 +535,14 @@ function ProfileStatus() {
             }}
           >
             {CLEAR_AFTER_OPTIONS.map((opt) => (
-              <option key={opt.value} value={opt.value}>
+              <option
+                key={opt.value}
+                value={opt.value}
+                style={{
+                  background: color.SurfaceVariant.Container,
+                  color: color.SurfaceVariant.OnContainer,
+                }}
+              >
                 {opt.label}
               </option>
             ))}