feat: add theming system with color palettes, wallpapers, and transparency controls

[bradjenn]

Summary

Adds an omarchy inspired theming system to T3 Code with full color palette, wallpaper, and transparency support — all configurable from the settings panel.

• 11 dark-mode color themes — Cyberpunk, Josean, Tokyo Night, Dracula, Catppuccin Mocha, Gruvbox Dark, Nord, One Dark, Solarized Dark, Rose Pine, and Kanagawa
• 8 bundled wallpaper presets with support for custom URLs
• Configurable overlay opacity and blur controls for wallpaper backgrounds
• Three-tier transparency system — interactive (inputs/buttons), nested (panels), and transparent (layout containers) with per-theme opacity rates
• Text vibrancy boost — muted/dim text colors are automatically brightened when a wallpaper is active to maintain readability
• All settings persisted via the existing appSettings pattern (localStorage)

Color themes work by overriding CSS custom properties on the document root (dark mode only), so they integrate cleanly with the existing shadcn/ui design tokens without any component changes.

Demo

Themes are applied in real-time from Settings > Appearance:

• Pick a color palette from the swatch grid
• Choose a wallpaper preset or paste a custom image URL
• Fine-tune overlay opacity and blur with range sliders

Screen.Recording.2026-03-09.at.19.25.37.mov

Test plan

• Enable dark mode, select each of the 11 color themes — verify colors apply correctly
• Switch back to light mode — verify theme overrides are removed
• Select a wallpaper preset — verify it renders behind the app with overlay
• Adjust opacity and blur sliders — verify real-time updates
• Enter a custom wallpaper URL and apply — verify it loads
• Select "None" wallpaper — verify background is removed and overlay controls hide
• Select "Default" color theme — verify all CSS variables are reset
• Refresh the page — verify all settings persist
• Verify text remains readable across all theme + wallpaper combinations

🤖 Generated with Claude Code

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 29e5c861-1970-4afc-8a11-fe1dc90b1d67

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[maria-rcks]

could you split this into different prs?

@juliusmarminge dk if this a feature you want to add rn, reopen if needed