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>
This commit is contained in:
@@ -22,6 +22,7 @@ import {
|
|||||||
Dialog,
|
Dialog,
|
||||||
Header,
|
Header,
|
||||||
config,
|
config,
|
||||||
|
color,
|
||||||
Spinner,
|
Spinner,
|
||||||
PopOut,
|
PopOut,
|
||||||
RectCords,
|
RectCords,
|
||||||
@@ -522,10 +523,11 @@ function ProfileStatus() {
|
|||||||
onChange={(e) => setClearAfter(e.target.value)}
|
onChange={(e) => setClearAfter(e.target.value)}
|
||||||
aria-label="Auto-clear status after"
|
aria-label="Auto-clear status after"
|
||||||
style={{
|
style={{
|
||||||
background: 'var(--bg-surface-variant)',
|
background: color.SurfaceVariant.Container,
|
||||||
border: `1px solid var(--border-surface-variant)`,
|
border: `1px solid ${color.SurfaceVariant.ContainerLine}`,
|
||||||
borderRadius: config.radii.R300,
|
borderRadius: config.radii.R300,
|
||||||
color: 'inherit',
|
color: color.SurfaceVariant.OnContainer,
|
||||||
|
colorScheme: 'dark',
|
||||||
fontSize: '0.82rem',
|
fontSize: '0.82rem',
|
||||||
padding: `${config.space.S100} ${config.space.S200}`,
|
padding: `${config.space.S100} ${config.space.S200}`,
|
||||||
cursor: 'pointer',
|
cursor: 'pointer',
|
||||||
@@ -533,7 +535,14 @@ function ProfileStatus() {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{CLEAR_AFTER_OPTIONS.map((opt) => (
|
{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}
|
{opt.label}
|
||||||
</option>
|
</option>
|
||||||
))}
|
))}
|
||||||
|
|||||||
Reference in New Issue
Block a user