ReviewOS

stacks/system-cleaner

Extract color tokens and add a light theme (currently dark-only, 248 hardcoded colors)

#20
Closed glennmichael123 opened this 8 days ago ·
8 days ago

SystemCleaner is currently dark-only, hardcoded. layouts/app.stx pins it at the root:

<html lang='en' style='background:#0d0d0d;color-scheme:dark'>

and repeats it on html, body in the stylesheet. There is no light mode, and no way to add one without a refactor first, because the colors are literals rather than tokens.

Current state

count
Hardcoded color literals (#hex / rgba())248
CSS custom properties0
prefers-color-scheme queries0
data-theme hooks0

Distribution — layouts/app.stx carries 125 of them, the rest are spread across pages/system.stx (24), pages/updates.stx (18), pages/index.stx (9), pages/processes.stx (6), and every panel component.

The existing dark palette is good and shouldn't change — #1c1c1e chrome, rgba(28,28,30,0.95) sidebar, #0a84ff accent and the 0.5px hairline borders are already reading as macOS. This is about making that palette expressible rather than restyling it.

Proposed

  1. Extract tokens. Define the palette as custom properties on :root — surface/chrome/sidebar backgrounds, text primary/secondary/tertiary, accent, border-hairline, the scrollbar thumb. Replace the 248 literals with var() references. Mechanical, and the diff is large but low-risk.
  2. Add the light palette, redefining only the tokens under @media (prefers-color-scheme: light).
  3. Add a manual override via data-theme on <html> so the app can follow the system or be pinned — macOS apps generally offer Light / Dark / Auto rather than system-only. Worth confirming which @chrisbbreuer wants.
  4. Drop the hardcoded background/color-scheme off the <html> inline style, and make sure the view-transition anti-flash rules (::view-transition-group(root) is hardcoded #0d0d0d) use the token too, or light mode will flash black on every SPA navigation.

Blocker worth knowing about first

components/ and partials/ are byte-identical duplicates. All seven files — CleanupPanel, DashboardCards, DiskPanel, ExtensionsPanel, ProcessesPanel, StartupPanel, TopProcesses — exist twice with identical content, verified with diff.

So every styling change here has to be made twice or the two copies drift. That should be resolved before the token migration rather than after, otherwise this work doubles and the duplicate silently keeps the old palette. Whether the fix is deleting one directory depends on what STX resolves at build time — needs a look.

Spacing is a separate pass, tracked separately.

Sign in to comment on this issue.