feat(desktop): redesign appearance settings with mode-first theme picker#1528
Conversation
![chatgpt-codex-connector[bot]](https://avatars.github.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 0d9316fa09
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Replaces the flat searchable theme list with three visual sections: 1. **Adapts to system** — Paired themes (light+dark) shown side by side with preview images. Selecting one auto-enables follow-system behavior. 2. **Light** — Light-only themes (no dark counterpart) with single preview. 3. **Dark** — Dark-only themes (no light counterpart) with single preview. Uses the same ThemePreviewFrame SVG from onboarding to show a visual representation of each theme. Removes the separate "Use system setting" toggle since paired themes now implicitly enable it. Refactors shared theme preview components out of ThemeStep into: - shared/theme/ThemePreviewFrame.tsx — SVG preview component - shared/theme/useThemePreviewVars.ts — preview vars loading hook The accent color picker remains below the theme sections.
Replaces the two separate ThemePreviewFrame images with a single SystemPreferencePreviewFrame that shows dark on top and light on bottom, matching the System Preference SVG design. Each paired theme tile now uses this combined preview to visually communicate that it adapts to the system color scheme.
- Remove card containers from theme tiles (just image + name below) - Switch all sections to horizontal scroll by default - Add 'Show all' / 'Collapse' toggle to section headers (shows when section has >4 items) — expands to a wrapping grid layout - Reduce tile size to 140px for a more compact horizontal row
- Increase tile size to 168x112px for larger previews - Use rounded-2xl (matching modal radius) on all preview frames - Remove section subtitles — just title + Show all - Add right-edge fade gradient on horizontal scroll sections - Add p-1 padding to scroll container so ring states aren't clipped - Make ThemePreviewSvg fill its container (h-full w-full) - Extract HorizontalScrollWithFade component for consistent scroll UX
- Use preserveAspectRatio='xMinYMin slice' so SVG covers the frame - Position SVG with inset-0 instead of bottom-0 right-0 - Applies to both ThemePreviewSvg and SystemPreferencePreviewSvg
Redesigns the appearance settings with a two-level approach: 1. Top-level mode selector: System / Light / Dark - Each shows a mini preview thumbnail - System shows the split dark/light preview - Light/Dark show a single theme preview 2. Theme list below changes based on selected mode: - System → paired themes (with split preview tiles) - Light → all light-capable themes (paired light + light-only) - Dark → all dark-capable themes (paired dark + dark-only) Selecting a theme in System mode auto-enables follow-system. Selecting in Light/Dark mode disables follow-system.
- Replace preview thumbnails in mode selector with Lucide icons (SunMoon for System, Sun for Light, Moon for Dark) - Switch from horizontal scroll to wrapping grid for theme list (since mode selector already filters the themes) - Remove HorizontalScrollWithFade component (no longer needed) - Remove section subtitles — just the mode buttons - Swap SystemPreferencePreviewSvg: light on top, dark on bottom - Remove unused expanded state and Show all toggle
- Position SVG at bottom-right (90% size, offset -1) showing the theme's muted background behind it — matches the original style - Add accent color elements (border line, title bar, primary squares) to SystemPreferencePreviewSvg light half - Use light theme's muted color as SystemPreferencePreviewFrame background - Increase grid gap from gap-3 to gap-4 for more breathing room - Fix accent color row clipping with padding on container
- Align traffic light positions in SystemPreferencePreviewSvg to match ThemePreviewSvg (x=3.5, 8, 12.5 instead of 4.5, 9, 13.5) - Use current app muted color (CSS var) for system preference frame background instead of the light theme's muted color - Move accent color picker between mode selector and theme grid so it doesn't get lost below the fold - Add accent color elements (border, title, primary squares) to the system preference SVG light half
- Only the theme grid scrolls — header, accent picker, and mode selector are pinned at the top (shrink-0 + min-h-0 flex layout) - Move accent color picker above the mode selector so it's the first choice - Update theme name text to text-xs font-medium (matches profile name style used elsewhere in settings)
- Theme grid has max-h-[430px] with internal scroll (~3 rows visible) - Accent color picker moved back below the theme grid - Page scrolls normally (no split scroll regions) - Mode selector stays above the theme grid
- Add gradient fades at top and bottom of the theme grid container - Use h-3 (12px) for a subtle fade effect, not too aggressive
klopez4212
force-pushed
the
kennylopez-appearance-menu
branch
from
0d9316f to
b8c7882
Compare
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: b8c7882ee4
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
- Add default aspect-[3/2] to ThemePreviewFrame so onboarding cards retain intrinsic dimensions when no className is provided - Persist followSystem immediately when mode button is clicked (not only when a theme tile is selected) - Update E2E test to click mode tabs before selecting cross-mode themes
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: ae46e2fbf1
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
When the user switches from System to Light/Dark (or between Light and Dark), automatically apply the paired theme counterpart so the app immediately reflects the chosen mode. Previously only followSystem was persisted, leaving the stored theme unchanged — e.g. clicking Dark with a light theme stored would disable system mode but keep the light theme active.
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 47e2530ddf
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
When the current theme has no counterpart (e.g. houston, dracula, catppuccin-macchiato), switching to Light/Dark mode now falls back to the first available theme in the target mode's list instead of leaving the app on the wrong mode.
wesbillman
left a comment
wesbillman
left a comment
There was a problem hiding this comment.
Review by Pinky (Buzz agent). Verdict: approve — solid refactor, faithful extraction of the onboarding preview into shared/theme, and all prior codex P2s are genuinely addressed. Verified locally on head 9cbd22d: typecheck clean, pnpm check clean, 1616/1616 unit tests pass. Three non-blocking nits inline.
…pping - ThemePreviewFrame: correct docstring to say 'light on top, dark on bottom' (matches the actual SVG render order). - SettingsPanels: replace suffix-only regex with pairedThemeLabel() that strips mode tokens from any position, fixing labels for github-light-default, github-light-high-contrast, gruvbox-light-*, material-theme-lighter, and light-plus.
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 7ddd33835c
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
When the current theme is unpaired (e.g. houston, dracula, catppuccin-macchiato), enabling System mode now falls back to the first paired theme so that resolveSystemTheme can actually switch between light/dark with the OS.
2 participants
Redesign Appearance Settings
Replaces the flat searchable theme list with a mode-first visual theme picker.
Changes
Mode selector — System / Light / Dark buttons with Lucide icons filter the theme grid:
Visual previews — reuses the
ThemePreviewFrameSVG from onboarding, offset bottom-right with the theme's muted background showing behind. System preference themes use a combined split SVG.Layout — theme grid constrained to ~3 rows with internal scroll + subtle top/bottom fade gradients. Accent color picker below.
Refactoring — extracted shared theme preview components:
shared/theme/ThemePreviewFrame.tsx— SVG preview + system preference split previewshared/theme/useThemePreviewVars.ts— preview vars loading hookScreenshots
System mode
Dark mode
Light mode
cc @AXARIbot for review