UX Standards — 15: Theme Settings Panel (Right-Side Sheet)

Governs: The quick-access Theme Settings panel triggered from the header. Parent rules: See 02-HEADER.md and 00-OVERVIEW-AND-CSS-RULES.md first.

Overview

The Theme Settings panel is a right-side Sheet that slides in from the right edge of the screen when triggered from the header. It is non-blocking — the page content remains accessible behind the panel.

It provides 10 settings sections for customizing the visual experience. Unlike the full /settings/appearance page, this panel requires an explicit Save action.

Trigger

The Theme Settings panel is triggered by clicking the sliders/customize icon in the header toolbar (rightmost icon before the user avatar in some app implementations). In the MCP Admin, it appears as a tuning/adjustments icon (SlidersHorizontal from Lucide).

Sheet Container

<Sheet>
  <SheetTrigger asChild>
    <Button variant="ghost" size="icon" className="h-9 w-9">
      <SlidersHorizontal className="h-5 w-5" />
    </Button>
  </SheetTrigger>
  <SheetContent side="right" className="w-[320px] overflow-y-auto">
    <SheetHeader>
      <SheetTitle>Theme Settings</SheetTitle>
      <SheetDescription>
        Adjust the appearance and layout to suit your preferences.
      </SheetDescription>
    </SheetHeader>

    {/* Save + Reset buttons */}
    <div className="flex gap-2 py-3">
      <Button className="flex-1" onClick={handleSave}>
        <Save className="mr-2 h-4 w-4" />
        Save
      </Button>
      <Button variant="destructive" className="flex-1" onClick={handleReset}>
        <RotateCcw className="mr-2 h-4 w-4" />
        Reset
      </Button>
    </div>

    {/* 10 settings sections */}
  </SheetContent>
</Sheet>

Property	Value
Component	shadcn/ui `Sheet`
Side	`right`
Width	`~320px`
Overflow	`overflow-y-auto` (scrollable)
Blocking	No — overlay only, page stays interactive
Save mode	Explicit Save button (not auto-save)
Close	`✕` button top-right OR click outside

┌──────────────────────────────────────────┐ [✕]
│ Theme Settings                           │
│ Adjust the appearance and layout to      │
│ suit your preferences.                   │
├──────────────────────────────────────────┤
│ [💾 Save]          [↺ Reset]             │
├──────────────────────────────────────────┤
│ (scrollable sections below)              │

Option Card Pattern

All 10 sections use the same thumbnail card option pattern:

// Each selectable option:
<button
  onClick={() => setSetting(value)}
  className={cn(
    'flex flex-col items-center gap-1 rounded-lg border p-2 transition-colors',
    currentValue === value
      ? 'border-primary bg-primary/5'
      : 'hover:border-muted-foreground/50'
  )}
>
  {/* Visual preview (thumbnail, circle, Aa text, etc.) */}
  <span className="text-xs font-medium">{label}</span>
  {currentValue === value && (
    <div className="absolute top-1 right-1">
      <Check className="h-3 w-3 text-primary" />
    </div>
  )}
</button>

Active state: border-primary bg-primary/5 + small Check checkmark in top-right corner of card.

Section 1 — Theme

Label: Theme

Three options shown as thumbnail wireframe cards (mini UI preview images):

Option	Preview	Value
System	Auto-detect light/dark	`'system'`
Light	Light UI wireframe	`'light'`
Dark	Dark UI wireframe	`'dark'`

Section 2 — Color

Label: Color

Four color swatches in a row:

Option	Swatch	Value
Default	Gray/neutral circle	`'default'`
Blue	Blue circle	`'blue'`
Green	Green circle	`'green'`
Amber	Amber/gold circle	`'amber'`

Note: The MCP Admin has a 'default' (neutral gray) color option in addition to the three named colors (Blue, Green, Amber). Always include Default as the first option.

Section 3 — Font

Label: Font

Three font options with "Aa" preview text rendered in each font:

Option	Preview	Value
System	`Aa` in system default	`'system'`
Sans-serif	`Aa` in generic sans-serif	`'sans-serif'`
Roboto	`Aa` in Roboto	`'roboto'`

Section 4 — Font Size

Label: Font Size

Three size options with "Aa" at different sizes:

Option	Preview size	Value
Compact	`Aa` (small)	`'compact'`
Default	`Aa` (medium)	`'default'`
Large	`Aa` (large)	`'large'`

Note: In the Theme Sheet, the options are labeled Compact / Default / Large. The Appearance settings page uses Small / Default / Large. Use the labels appropriate for the implementation.

Section 5 — Font Color

Label: Font Color

Two options shown as dot/circle previews:

Option	Preview	Value
Color	Colored dots (multi-color)	`'color'`
Monochrome	Gray dots	`'monochrome'`

Section 6 — Radius

Label: Radius

Three border-radius options shown as circle/square previews:

Option	Preview	Value
Round	Full circle	`'round'`
Sharp	Square with no radius	`'sharp'`
Scaled	Intermediate radius	`'scaled'`

Section 7 — Page Layout

Label: Page Layout

Three layout modes shown as thumbnail wireframes (show sidebar presence):

Option	Preview shows	Value	Effect
Default	Full sidebar with labels	`'default'`	Normal sidebar
Compact	Icon-only sidebar	`'compact'`	Collapsed sidebar
Full layout	No sidebar	`'full'`	No sidebar, max content width

Section 8 — Content Density

Label: Content Density

Three density options (thumbnail previews showing row spacing):

Option	Value	Effect
Spacious	`'spacious'`	Most padding, fewest rows visible
Compact	`'compact'`	Tight padding, more rows visible
Dense	`'dense'`	Maximum rows, minimal padding

Note: In the Theme Sheet, labels are Spacious / Compact / Dense. The Appearance settings page uses Compact / Comfortable / Spacious. Use the labels for the implementation.

Label: Navigation Style

Three navigation style options (thumbnail wireframes showing sidebar style):

Option	Value	Effect
Floating	`'floating'`	Sidebar floats above content with gap
Inset	`'inset'`	Sidebar is inset within the page boundary
Tight	`'tight'`	Sidebar flush against content edge

Label: Menu Position

Two options shown as thumbnail wireframes:

Option	Value	Effect
Left	`'left'`	Sidebar on left side (default)
Right	`'right'`	Sidebar on right side

Full Visual Anatomy (Scrolling)

┌─────────────────────────────────────────┐
│ Theme Settings                    [✕]   │
│ Adjust the appearance and layout...     │
├─────────────────────────────────────────┤
│ [💾 Save]          [↺ Reset]            │
├─────────────────────────────────────────┤
│ Theme                                   │
│ [System ✓] [Light  ] [Dark  ]          │
├─────────────────────────────────────────┤
│ Color                                   │
│ [● Default ✓] [● Blue] [● Green] [● Amber] │
├─────────────────────────────────────────┤
│ Font                                    │
│ [Aa System ✓] [Aa Sans-serif] [Aa Roboto] │
├─────────────────────────────────────────┤
│ Font Size                               │
│ [Aa Compact] [Aa Default ✓] [Aa Large] │
├─────────────────────────────────────────┤
│ Font Color                              │
│ [●●● Color ✓]  [●● Monochrome]         │
├─────────────────────────────────────────┤
│ Radius                                  │
│ [○ Round] [□ Sharp] [◻ Scaled ✓]       │
├─────────────────────────────────────────┤
│ Page Layout                             │
│ [Default] [Compact ✓] [Full layout]    │
├─────────────────────────────────────────┤
│ Content Density                         │
│ [Spacious] [Compact] [Dense ✓]         │
├─────────────────────────────────────────┤
│ Navigation Style                        │
│ [Floating] [Inset] [Tight ✓]           │
├─────────────────────────────────────────┤
│ Menu Position                           │
│ [Left ✓]  [Right]                      │
└─────────────────────────────────────────┘

Save vs Reset Behavior

Button	Label	Icon	Variant	Behavior
Save	`Save`	`Save h-4 w-4`	`default` (primary)	Persists all settings to cookie + database
Reset	`Reset`	`RotateCcw h-4 w-4`	`destructive`	Restores all settings to defaults

Changes are NOT applied until Save is clicked. The panel shows pending changes visually (selected option highlighted) but the page does not update until saved. (This differs from the /settings/appearance page which auto-saves.)

Persistence

Layer	Mechanism
Cookie	`theme_settings` (1-year max-age)
Phase 2 (planned)	Database via user preferences API for cross-device sync

Relation to `/settings/appearance` Page

The Theme Settings Sheet and the /settings/appearance page control overlapping but not identical settings:

Setting	Theme Sheet	Appearance Page
Theme (light/dark/system)	✅	✅
Color	✅ (4 options incl. Default)	✅ (3 options)
Font family	✅	❌
Font size	✅ (Compact/Default/Large)	✅ (Small/Default/Large)
Font color	✅	❌
Border radius	✅	❌
Page layout	✅	✅
Content density	✅ (Spacious/Compact/Dense)	✅ (Compact/Comfortable/Spacious)
Navigation style	✅ (Floating/Inset/Tight)	✅ (Default/Floating/Inset)
Menu position	✅ (Left/Right)	❌

The Theme Sheet is the quick-access control; the Appearance page is the full settings page.

UX Standards — 15: Theme Settings Panel (Right-Side Sheet)

Overview

Trigger

Sheet Container

Header

Option Card Pattern

Section 1 — Theme

Section 2 — Color

Section 3 — Font

Section 4 — Font Size

Section 5 — Font Color

Section 6 — Radius

Section 7 — Page Layout

Section 8 — Content Density

Section 9 — Navigation Style

Section 10 — Menu Position

Full Visual Anatomy (Scrolling)

Save vs Reset Behavior

Persistence

Relation to `/settings/appearance` Page

Violation Checklist

Overview​

Trigger​

Sheet Container​

Header​

Option Card Pattern​

Section 1 — Theme​

Section 2 — Color​

Section 3 — Font​

Section 4 — Font Size​

Section 5 — Font Color​

Section 6 — Radius​

Section 7 — Page Layout​

Section 8 — Content Density​

Section 9 — Navigation Style​

Section 10 — Menu Position​

Full Visual Anatomy (Scrolling)​

Save vs Reset Behavior​

Persistence​

Relation to /settings/appearance Page​

Violation Checklist​

Overview

Trigger

Sheet Container

Header

Option Card Pattern

Section 1 — Theme

Section 2 — Color

Section 3 — Font

Section 4 — Font Size

Section 5 — Font Color

Section 6 — Radius

Section 7 — Page Layout

Section 8 — Content Density

Section 9 — Navigation Style

Section 10 — Menu Position

Full Visual Anatomy (Scrolling)

Save vs Reset Behavior

Persistence

Relation to `/settings/appearance` Page

Violation Checklist