fix(ui): restore system theme and settings chrome

[eachann1024]

What

• Restore a visible, accessible System option in Settings → Appearance while retaining every existing explicit theme preset.
• Keep System mode responsive to runtime OS light/dark changes and synchronize Electron's native window appearance with the resolved renderer theme.
• Place the Settings overlay above the macOS drag region and conversation title bar, and use opaque themed surfaces to prevent Light-mode content bleed-through.
• Add focused theme-provider and appearance-picker tests, plus corresponding lat.md architecture documentation.

Why

The theme provider still understood the persisted system value and already had the native-appearance IPC path, but the multi-theme picker no longer exposed System. Existing users with that stored choice had no selected control, and new users could not enable it.

Separately, the Settings modal used lower stacking levels than the macOS drag region and browser-style conversation bar. Its translucent Light surfaces also allowed high-contrast content beneath the modal to remain visible.

User impact

Users can choose System again, existing saved themes remain compatible, and System follows OS appearance changes without restarting. The Settings modal now covers the complete window chrome and remains readable in Light mode.

Automated checks

• Focused theme tests: 14 passed
• Full test suite: 1,864 passed, 3 skipped
• npm run typecheck
• npm run build
• npm run lint: 0 errors, 21 baseline warnings
• npx lat.md check
• git diff --check

Manual QA limitation

The standalone renderer remained on onboarding without the Electron bridge, so full in-app Electron visual QA of Settings could not be completed without starting the installation flow.

[greptile-apps]

Greptile Summary

Restores the System appearance option and strengthens Settings modal presentation.

• Adds an accessible System theme control that reports the resolved light or dark appearance.
• Raises Settings above macOS window chrome and replaces translucent Settings surfaces with opaque theme surfaces.
• Adds focused theme-provider and appearance-picker tests.
• Documents theme selection, native appearance synchronization, and modal stacking behavior.

Confidence Score: 5/5

The pull request appears safe to merge with no actionable defects identified in the changed behavior.

The System control matches the existing ThemeProvider contract and translation resources, every supported theme defines the newly used surface tokens, and the raised modal stacking does not obscure any currently reachable nested Settings UI.

Important Files Changed

Filename	Overview
src/renderer/src/components/settings/AppearancePane.tsx	Adds a distinct, accessible System theme button while preserving all explicit preset controls.
src/renderer/src/assets/main.css	Raises the Settings overlay above custom window chrome and makes its principal surfaces opaque.
src/renderer/src/components/ThemeProvider.test.tsx	Verifies persisted System mode follows runtime OS changes and explicit presets retain their native appearance.
src/renderer/src/components/settings/AppearancePane.test.tsx	Verifies System selection state, resolved appearance labeling, and selection behavior.
lat.md/theme-selection.md	Documents persisted theme selection, runtime System resolution, native synchronization, and modal layering.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart LR
  User[Appearance picker] --> Choice{Selected theme}
  Choice -->|System| Media[prefers-color-scheme]
  Media --> Resolved[Resolved Light or Dark]
  Choice -->|Explicit preset| Preset[Preset theme and appearance]
  Resolved --> CSS[data-theme]
  Preset --> CSS
  Resolved --> Native[Electron native appearance: system]
  Preset --> NativePreset[Electron native appearance: light or dark]

Loading

_{Reviews (1): Last reviewed commit: "fix(ui): restore system theme and settin..." | Re-trigger Greptile}