feat: add theming system with color palettes, wallpapers, and transparency controls by bradjenn · Pull Request #727 · pingdotgg/t3code

bradjenn · 2026-03-09T19:40:12Z

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

…r presets, and configurable opacity/blur controls Add theming system with 11 dark-mode color palettes (Cyberpunk, Josean, Tokyo Night, Dracula, Catppuccin Mocha, Gruvbox Dark, Nord, One Dark, Solarized Dark, Rose Pine, Kanagawa), 8 wallpaper presets, and configurable opacity/blur controls. - Color themes override CSS variables via inline styles (dark mode only) - Three-tier wallpaper transparency: interactive (inputs), nested (panels), and transparent (layout containers) with per-theme opacity rates - Text vibrancy boost for muted/dim colors when wallpaper is active - Settings UI with theme swatches, wallpaper thumbnails, custom URL input, and opacity/blur sliders - All state persisted via existing appSettings pattern (localStorage) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

coderabbitai · 2026-03-09T19:40:32Z

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

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

maria-rcks · 2026-03-09T23:42:51Z

could you split this into different prs?

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

bradjenn · 2026-03-09T19:40:12Z

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

…r presets, and configurable opacity/blur controls Add theming system with 11 dark-mode color palettes (Cyberpunk, Josean, Tokyo Night, Dracula, Catppuccin Mocha, Gruvbox Dark, Nord, One Dark, Solarized Dark, Rose Pine, Kanagawa), 8 wallpaper presets, and configurable opacity/blur controls. - Color themes override CSS variables via inline styles (dark mode only) - Three-tier wallpaper transparency: interactive (inputs), nested (panels), and transparent (layout containers) with per-theme opacity rates - Text vibrancy boost for muted/dim colors when wallpaper is active - Settings UI with theme swatches, wallpaper thumbnails, custom URL input, and opacity/blur sliders - All state persisted via existing appSettings pattern (localStorage) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

coderabbitai · 2026-03-09T19:40:32Z

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

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

maria-rcks · 2026-03-09T23:42:51Z

could you split this into different prs?

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

bradjenn · 2026-03-09T19:40:12Z

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

…r presets, and configurable opacity/blur controls Add theming system with 11 dark-mode color palettes (Cyberpunk, Josean, Tokyo Night, Dracula, Catppuccin Mocha, Gruvbox Dark, Nord, One Dark, Solarized Dark, Rose Pine, Kanagawa), 8 wallpaper presets, and configurable opacity/blur controls. - Color themes override CSS variables via inline styles (dark mode only) - Three-tier wallpaper transparency: interactive (inputs), nested (panels), and transparent (layout containers) with per-theme opacity rates - Text vibrancy boost for muted/dim colors when wallpaper is active - Settings UI with theme swatches, wallpaper thumbnails, custom URL input, and opacity/blur sliders - All state persisted via existing appSettings pattern (localStorage) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

coderabbitai · 2026-03-09T19:40:32Z

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

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

maria-rcks · 2026-03-09T23:42:51Z

could you split this into different prs?

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

bradjenn · 2026-03-09T19:40:12Z

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

…r presets, and configurable opacity/blur controls Add theming system with 11 dark-mode color palettes (Cyberpunk, Josean, Tokyo Night, Dracula, Catppuccin Mocha, Gruvbox Dark, Nord, One Dark, Solarized Dark, Rose Pine, Kanagawa), 8 wallpaper presets, and configurable opacity/blur controls. - Color themes override CSS variables via inline styles (dark mode only) - Three-tier wallpaper transparency: interactive (inputs), nested (panels), and transparent (layout containers) with per-theme opacity rates - Text vibrancy boost for muted/dim colors when wallpaper is active - Settings UI with theme swatches, wallpaper thumbnails, custom URL input, and opacity/blur sliders - All state persisted via existing appSettings pattern (localStorage) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

coderabbitai · 2026-03-09T19:40:32Z

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

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

maria-rcks · 2026-03-09T23:42:51Z

could you split this into different prs?

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

bradjenn · 2026-03-09T19:40:12Z

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

…r presets, and configurable opacity/blur controls Add theming system with 11 dark-mode color palettes (Cyberpunk, Josean, Tokyo Night, Dracula, Catppuccin Mocha, Gruvbox Dark, Nord, One Dark, Solarized Dark, Rose Pine, Kanagawa), 8 wallpaper presets, and configurable opacity/blur controls. - Color themes override CSS variables via inline styles (dark mode only) - Three-tier wallpaper transparency: interactive (inputs), nested (panels), and transparent (layout containers) with per-theme opacity rates - Text vibrancy boost for muted/dim colors when wallpaper is active - Settings UI with theme swatches, wallpaper thumbnails, custom URL input, and opacity/blur sliders - All state persisted via existing appSettings pattern (localStorage) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

coderabbitai · 2026-03-09T19:40:32Z

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

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

maria-rcks · 2026-03-09T23:42:51Z

could you split this into different prs?

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

bradjenn · 2026-03-09T19:40:12Z

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

…r presets, and configurable opacity/blur controls Add theming system with 11 dark-mode color palettes (Cyberpunk, Josean, Tokyo Night, Dracula, Catppuccin Mocha, Gruvbox Dark, Nord, One Dark, Solarized Dark, Rose Pine, Kanagawa), 8 wallpaper presets, and configurable opacity/blur controls. - Color themes override CSS variables via inline styles (dark mode only) - Three-tier wallpaper transparency: interactive (inputs), nested (panels), and transparent (layout containers) with per-theme opacity rates - Text vibrancy boost for muted/dim colors when wallpaper is active - Settings UI with theme swatches, wallpaper thumbnails, custom URL input, and opacity/blur sliders - All state persisted via existing appSettings pattern (localStorage) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

coderabbitai · 2026-03-09T19:40:32Z

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

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

maria-rcks · 2026-03-09T23:42:51Z

could you split this into different prs?

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

bradjenn · 2026-03-09T19:40:12Z

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

…r presets, and configurable opacity/blur controls Add theming system with 11 dark-mode color palettes (Cyberpunk, Josean, Tokyo Night, Dracula, Catppuccin Mocha, Gruvbox Dark, Nord, One Dark, Solarized Dark, Rose Pine, Kanagawa), 8 wallpaper presets, and configurable opacity/blur controls. - Color themes override CSS variables via inline styles (dark mode only) - Three-tier wallpaper transparency: interactive (inputs), nested (panels), and transparent (layout containers) with per-theme opacity rates - Text vibrancy boost for muted/dim colors when wallpaper is active - Settings UI with theme swatches, wallpaper thumbnails, custom URL input, and opacity/blur sliders - All state persisted via existing appSettings pattern (localStorage) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

coderabbitai · 2026-03-09T19:40:32Z

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

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

maria-rcks · 2026-03-09T23:42:51Z

could you split this into different prs?

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

bradjenn · 2026-03-09T19:40:12Z

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

…r presets, and configurable opacity/blur controls Add theming system with 11 dark-mode color palettes (Cyberpunk, Josean, Tokyo Night, Dracula, Catppuccin Mocha, Gruvbox Dark, Nord, One Dark, Solarized Dark, Rose Pine, Kanagawa), 8 wallpaper presets, and configurable opacity/blur controls. - Color themes override CSS variables via inline styles (dark mode only) - Three-tier wallpaper transparency: interactive (inputs), nested (panels), and transparent (layout containers) with per-theme opacity rates - Text vibrancy boost for muted/dim colors when wallpaper is active - Settings UI with theme swatches, wallpaper thumbnails, custom URL input, and opacity/blur sliders - All state persisted via existing appSettings pattern (localStorage) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

coderabbitai · 2026-03-09T19:40:32Z

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

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

maria-rcks · 2026-03-09T23:42:51Z

could you split this into different prs?

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