[Feature]: Theme presets (Nord, Catppuccin, Dracula, etc.) #1567

Before submitting

• I searched existing issues and did not find a duplicate.
• I am describing a concrete problem or use case, not just a vague idea.

Area

apps/web

Problem or use case

The app only supports a Light/Dark/System toggle with no way to customize the color palette.

Proposed solution

A new Appearance page in settings (/settings/appearance) with a grid of clickable theme preset cards. Each preset defines accent, background, foreground, and border colors for both light and dark modes. Clicking one instantly recolors the app. Switching between light/dark/system automatically resolves the correct color variant for the active preset.

Presets would include: Default, Catppuccin, Nord, Dracula, Solarized, Monokai, One Dark, Gruvbox, Rose Pine, Tokyo Night, GitHub, and Ayu.

Why this matters

Developers spend hours in their tools and strongly prefer a consistent look across their setup. Matching the theme they already use in VS Code/terminal makes the app feel like home rather than a generic default. It's a low-cost, high-satisfaction feature — purely visual, zero impact on core functionality.

Smallest useful scope

Just the preset picker — a grid of named theme cards on a new Appearance settings page. One click applies all four colors (accent, background, foreground, border). No custom color editor, no import/export, no per-component overrides. Store a single themePreset string in client settings.

Alternatives considered

Exposing individual color pickers (accent, background, foreground, border separately) — more flexible but overwhelming UX and harder to get a cohesive look.

CSS-only approach with user stylesheets — too technical for most users.

Presets are the sweet spot: zero configuration needed, one click, always looks good.

Risks or tradeoffs

Adds 12 hardcoded preset definitions that need maintenance if the CSS variable system changes.

Preset colors override CSS custom properties via inline styles, which take priority over the stylesheet defaults. Resetting to "Default" cleanly removes all overrides.

Some themes (Dracula, Monokai) are primarily dark-mode themes — their light variants are community-derived approximations, not official.

Examples or references

Contribution

• I would be open to helping implement this.