Quality: light theme CSS is nearly empty and relies entirely on JS injection

[KrisPowers]

Summary

The `[data-theme="light"]` block in `app/frontend/src/App.css` (lines 125-130) only overrides four variables:

```css
[data-theme="light"] {
--surface-raised: rgba(0,0,0,0.04);
--surface-overlay: rgba(0,0,0,0.06);
--sep: rgba(0,0,0,0.08);
--sep-strong: rgba(0,0,0,0.14);
}
```

All other light-mode values (`--app-bg`, `--border-color`, `--info-bar-bg`, text colors, tab colors, etc.) are injected via JavaScript through the theme system. If JS is slow to run or a component renders before the theme effect fires, the component sees the dark defaults, producing a flash of dark-themed content inside a light UI.

How to fix

Move the complete set of light-mode CSS variable overrides into the `[data-theme="light"]` block as a stable CSS-only baseline. The JS injection can still override these for custom themes, but the light-mode defaults will be correct even before JS runs.

This also makes the light theme self-documenting: all the values are visible in one CSS block rather than scattered across the JavaScript theme definitions.

Files

• `app/frontend/src/App.css` (lines 125-130, `[data-theme="light"]` block)
• `app/frontend/src/themes.ts` (source of the JS-injected light values)