Repository navigation
[FEATURE]: Move theme selector to floating side panel for better live preview visibility #5868
Description
Problem
When selecting a theme, the dialog appears as a centered modal that covers the main content area. While the theme preview updates live as you navigate through options, the dialog itself blocks the very content you're trying to preview — making it difficult to evaluate how each theme looks in practice.
Motivation
The whole point of live theme preview is to see how the theme affects your actual content (messages, code blocks, syntax highlighting, etc.). Having the dialog cover the center of the screen defeats this purpose.
Options Considered
Option 1: Side Panel (right edge)
Full-height panel anchored to right edge.
┌──────────────────────────────────────┬──────────────┐
│ │ Themes │
│ Main Content Area │ ────────── │
│ (messages, code, etc.) │ > dracula │
│ │ gruvbox │
│ Fully visible for │ monokai │
│ live theme preview │ nord │
│ │ ... │
│ │ │
└──────────────────────────────────────┴──────────────┘
Pros: More themes visible, stable position
Cons: Takes horizontal space, full-height feels heavy
Option 2: Bottom Drawer (horizontal scroll)
Full-width drawer at bottom with themes in a horizontal scrolling row.
┌────────────────────────────────────────────────────┐
│ │
│ Main Content Area │
│ (fully visible above drawer) │
│ │
├────────────────────────────────────────────────────┤
│ Themes [Search...] esc │
│ ◀ dracula │ gruvbox │ monokai │ nord │ ... ▶ │
└────────────────────────────────────────────────────┘
Pros: Full width visibility of content above
Cons: Limited vertical space, horizontal scrolling less intuitive
Option 3: Bottom Drawer (grid)
Multi-column grid layout at bottom.
┌────────────────────────────────────────────────────┐
│ │
│ Main Content Area │
│ │
├────────────────────────────────────────────────────┤
│ Themes [Search...] esc │
│ > dracula │ gruvbox │ monokai │
│ one-dark │ solarized │ tokyo-night │
└────────────────────────────────────────────────────┘
Pros: Shows many themes compactly
Cons: Complex grid navigation, less familiar UX
Option 4: Corner Float
Small floating panel in bottom-right corner.
┌────────────────────────────────────────────────────┐
│ │
│ Main Content Area │
│ │
│ ┌──────────────┐│
│ │ Themes ││
│ │ [Search...] ││
│ │ > dracula ││
│ │ gruvbox ││
│ └──────────────┘│
└────────────────────────────────────────────────────┘
Pros: Minimal footprint, non-obstructive
Cons: Compact size means fewer themes visible, more scrolling
Option 5: Compact Center
Smaller, more transparent centered modal positioned at top.
┌────────────────────────────────────────────────────┐
│ ┌──────────────────────────────────────┐ │
│ │ Themes [Search...] esc │ │
│ │ > dracula │ │
│ │ gruvbox │ │
│ └──────────────────────────────────────┘ │
│ │
│ Main Content Area │
│ (partially visible below) │
│ │
└────────────────────────────────────────────────────┘
Pros: Minimal code changes, familiar centered modal pattern
Cons: Still partially blocks view
Decision
Hybrid approach: Floating Side Panel
Combines the best of the side panel (Option 1) and corner float (Option 4):
┌────────────────────────────────────────────────────────────┐
│ │
│ Main Content Area │
│ (fully visible - no backdrop) │
│ │
│ ┌──────────────────┐│
│ │ Themes esc ││
│ │ [Search...] ││
│ │ > dracula ││
│ │ gruvbox ││
│ │ monokai ││
│ │ nord ││
│ │ one-dark ││
│ │ ... ││
│ └──────────────────┘│
└────────────────────────────────────────────────────────────┘
| Property | Value |
|---|---|
| Position | Bottom-right, anchored to right edge |
| Width | 30 characters (compact) |
| Height | Dynamic, up to 80% of terminal |
| Backdrop | None (fully transparent) |
Why This Approach
- Full content visibility — No backdrop means you see exactly how the theme affects your actual messages and code
- Shows enough themes — Dynamic height (up to 80%) shows 15-20+ themes without excessive scrolling
- Non-intrusive — Floating aesthetic feels lightweight, not modal-like
- Minimal disruption — Anchored to right edge keeps main content undisturbed
- All existing functionality preserved — Search, keyboard navigation, live preview, esc to cancel
Related
- [Feature Ask] Hot reload or add keymap to reload the theme #815 — Hot reload theme (same goal: better live preview experience)
Activity
anntnzrb commentedon Dec 20, 2025
PR: #5869
github-actions commentedon Dec 20, 2025
This issue might be related to existing issues. Please check:
Feel free to ignore if these don't address your specific case.