osobh/clawmates
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Set color-scheme so native UI matches the theme

Browse Source 
The app sets the `.dark` class but never `color-scheme`, so the browser
renders native UI (scrollbars, form controls, select/date popups,
autofill) in its light default over the dark app — the one real gap a
panel review surfaced. Set `color-scheme: dark` on `.dark`, and reset it
to `light` on the `.marketing` scope (it lives inside the dark <html> and
color-scheme inherits).

The review's other claims were verified against the compiled CSS and are
non-issues: shadow utilities (shadow-dock-tile/screen/…) ARE generated
with values inlined into --tw-shadow (Tailwind v4 doesn't emit them as
root vars); --computer-width/--app-origin-scale are runtime inline styles,
not :root tokens; all 54 @property --tw-* are present.

typecheck/lint/86 unit/31 E2E green; all 6 visual baselines unchanged.

Co-Authored-By: Claude Opus 4.8 <[email protected]>
This commit is contained in:
Omar Sobh
2026-06-12 03:52:15 -05:00
co-authored by Claude Opus 4.8
parent 5ff2b2ca33
commit 62d4338309
1 changed files with 10 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/globals.css
+10
View File
@@ -42,6 +42,10 @@
} }
.dark { .dark {
/* Match the theme so native UI (scrollbars, form controls, date/select
popups, autofill) renders dark instead of the browser's light default. */
color-scheme: dark;
--background: #0a0a0a; --background: #0a0a0a;
--foreground: #fafafa; --foreground: #fafafa;
--card: #0a0a0a; --card: #0a0a0a;
@@ -193,3 +197,9 @@ body {
color: var(--color-foreground); color: var(--color-foreground);
font-family: var(--font-sans); font-family: var(--font-sans);
} }
/* The marketing site is light but lives inside the dark <html>; color-scheme
inherits, so reset it here or native controls would render dark on light. */
.marketing {
color-scheme: light;
}