feat(web): add modular theme library by StiensWout · Pull Request #5226 · pingdotgg/t3code

StiensWout · 2026-08-02T11:09:15Z

Summary

T3 Code now has a token-based theme foundation that can grow from maintainer themes into user-created themes across the web client and desktop app.

Adds Default, T3 Chat, and T3 Grove maintainer themes, with light and dark variants where supported and a global Follow system preference.
Adds a theme library for selecting, creating, editing, renaming, deleting, importing, and exporting personal themes.
Supports guided theme editing for common roles and an advanced editor with a color picker and JSON upload/paste.
Applies semantic theme tokens across app surfaces and actions, including the composer send button, placeholders, secondary labels, muted icons, terminals, diffs, file previews, errors, warnings, updates, and splash screens.
Keeps theme choices after reloads and preserves the original artwork banner.

Closes #418

Screenshots

The library views show the maintainer themes alongside personal-theme cards.

View	Default	T3 Chat	T3 Grove (Light)	T3 Grove (Dark)
Workspace home
Theme library
Theme editor
Advanced color picker
JSON import and paste
Delete confirmation

Verification

Checked the theme library, guided editor, advanced color picker, JSON import/paste, and delete confirmation in light and dark mode.
Confirmed Follow system keeps the mode choice global, leaves mode previews visible, and selects cards rather than individual circles.
Confirmed light/dark selection does not change card dimensions or shift the grid.
Passed web typecheck, lint, formatting, and production build.

Note

Add modular theme library with custom theme support and semantic color tokens

Introduces themePalette.ts, a new theme management module with APIs to parse/serialize theme files, resolve light/dark appearance, manage custom themes in localStorage, and subscribe to theme changes.
Replaces the simple theme dropdown in the Appearance settings panel with a new ThemeLibrary component, and adds followSystem state to useTheme with dedicated setFollowSystem and refreshTheme controls.
Adds a comprehensive boot-time theming script in index.html that resolves custom and built-in themes (t3-chat, t3-grove) from storage, applies splash CSS variables, and falls back to OS preference on failure.
Introduces semantic CSS custom properties in index.css for error/warning/update surfaces, message surfaces, code/terminal surfaces, and a html[data-theme-id] block that maps theme-file roles to these tokens.
Migrates component-level color classes from opacity-based text-muted-foreground/* variants to named tokens (text-secondary-label, text-icon-muted, text-placeholder, text-message-foreground, etc.) across the chat, sidebar, composer, and settings UI.
The terminal in ThreadTerminalDrawer.tsx now reads --terminal-* CSS variables so it respects the active theme palette.
Risk: Boot script now reads localStorage and sets documentElement dataset attributes synchronously on page load; errors fall back to OS preference rather than forcing dark mode, which changes the previous failure behavior.

^{Macroscope summarized 46827f2.}

Note

Medium Risk
Large cross-surface styling and boot-time localStorage logic; incorrect theme resolution could cause flash or wrong colors, but scope is mostly UI and persisted preferences rather than auth or data.

Overview
Adds a token-based theme system with maintainer themes (Default, T3 Chat, T3 Grove), personal themes in localStorage, and a Follow system preference separate from the stored theme id.

Appearance settings replace the light/dark/system dropdown with a theme library (select, create, edit, import/export JSON, guided vs advanced color editing). useTheme gains followSystem, setFollowSystem, and refreshTheme; theme writes return success/failure booleans.

Boot script in index.html mirrors runtime resolution for custom/built-in themes, splash --boot-* variables, and data-theme-* attributes; storage failures now follow OS appearance instead of forcing dark.

UI migration swaps ad-hoc muted-foreground/* and hard-coded blues/reds/ambers for semantic tokens (secondary-label, icon-muted, placeholder, message/message-action, code-*, error/warning/update surfaces). Composer send/actions, user message bubbles, diffs, file previews, terminals (--terminal-*), and update pills align with the active palette. Stage backdrop compact button art on the send control is removed.

^{Reviewed by Cursor Bugbot for commit 46827f2. Bugbot is set up for automated code reviews on this repo. Configure here.}

coderabbitai · 2026-08-02T11:09:22Z

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 Plus

Run ID: 31dd8f82-4b9b-4aa1-b8da-c2172641b04a

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

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.}

Adds semantic theme roles, persisted light and dark variants, personal theme import and creation, contrast-safe surfaces, and themed message actions. Includes the T3 Chat palette, follow-system behavior, splash handling, and the theme library UI.

macroscopeapp · 2026-08-02T12:31:52Z

Approvability

Verdict: Needs human review

This PR introduces a complete modular theme library feature with ~4100 new lines across multiple files, including a theme editor UI, color management system, import/export workflows, and boot script changes. The scope and complexity of this new user-facing feature warrants human review.

^{You can customize Macroscope's approvability policy. Learn more.}

Full review pass over the modular theme system: - Rewrite the index.html boot script to mirror runtime resolution exactly: clamp built-in themes to their available modes (T3 Chat is light-only), treat unrecognized preferences as the system default, follow the OS in the storage-failure fallback, and honor corrupted follow-system values the same way the runtime does. Add a boot/runtime parity test that evaluates the inline script against resolveThemeAppearance. - Keep the color picker's hue when a grey/white/black echo round-trips, open hand-tuned themes in advanced mode so guided regeneration cannot silently discard their palettes, and regenerate every saved appearance when toggling Advanced off. - Cache the useTheme snapshot instead of reading localStorage on every consumer render, and share one storage/matchMedia listener pair. - Restore hover and emphasis states lost in the token migration (message action hover, provider update pill, sidebar read/unread, plan-mode toggle) and fix message-foreground tokens used on background surfaces. - Extract the theme library/editor into ThemeSettings.tsx, memoize the color rows, reuse the Alert component and shared isThemeColor, drop the dead StageBackdropButtonArt and themePreferenceForSystem, and make stored-theme parsing tolerant of unknown roles from other builds. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

…e-system

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

cursor

Cursor Bugbot has reviewed your changes using high effort and found 3 potential issues.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit a096aba. Configure here.}

- The boot script no longer follows the OS for a `:system`-suffixed preference when follow-system is explicitly off, matching the runtime; covered by two new parity cases. - setTheme/setFollowSystem report write success, so the follow-system toggle leaves the theme preference untouched when its write fails, and removing the active theme keeps it installed when the selection cannot be moved off it. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

The document ships light-media, dark-media, and plain theme-color metas; the browser reads whichever matches the OS, so mutating only the first element left themed chrome colors unapplied on a dark OS. Both the boot script and syncBrowserChromeTheme now write the resolved color to every matching meta. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

github-actions Bot added size:XXL 1,000+ changed lines (additions + deletions). vouch:unvouched PR author is not yet trusted in the VOUCHED list. labels Aug 2, 2026

macroscopeapp Bot reviewed Aug 2, 2026

View reviewed changes

StiensWout added 3 commits August 2, 2026 13:43

feat(web): add modular theme library

8014c0a

Adds semantic theme roles, persisted light and dark variants, personal theme import and creation, contrast-safe surfaces, and themed message actions. Includes the T3 Chat palette, follow-system behavior, splash handling, and the theme library UI.

fix(web): smooth theme preview gradients

1446d32

fix(web): finish theme review fixes

607dd6b

StiensWout force-pushed the t3code/modular-theme-system branch from e0f79e4 to 607dd6b Compare August 2, 2026 11:52

macroscopeapp Bot reviewed Aug 2, 2026

View reviewed changes

feat(web): theme status and update colors

fcd1354

macroscopeapp Bot reviewed Aug 2, 2026

View reviewed changes

Comment thread apps/web/src/index.css Outdated

fix(web): address theme review feedback

ebcf874

StiensWout marked this pull request as ready for review August 2, 2026 12:27

cursor Bot reviewed Aug 2, 2026

View reviewed changes

Comment thread apps/web/index.html

Comment thread apps/web/index.html Outdated

Comment thread apps/web/index.html

StiensWout added 2 commits August 2, 2026 14:32

test(web): reset theme cache before storage test

23d92c4

feat(web): simplify theme editor defaults

f8ef5fa

cursor Bot reviewed Aug 2, 2026

View reviewed changes

Comment thread apps/web/src/components/settings/SettingsPanels.tsx Outdated

fix(web): unify theme card selection

e09a4cf

macroscopeapp Bot reviewed Aug 2, 2026

View reviewed changes

Comment thread apps/web/src/components/settings/SettingsPanels.tsx Outdated

fix(web): refine theme color editor

ef62202

macroscopeapp Bot reviewed Aug 2, 2026

View reviewed changes

Comment thread apps/web/src/components/settings/SettingsPanels.tsx Outdated

StiensWout added 2 commits August 2, 2026 15:02

fix(web): use themed dialog for theme deletion

de81120

feat(web): edit personal themes

82f9299

macroscopeapp Bot reviewed Aug 2, 2026

View reviewed changes

Comment thread apps/web/src/components/settings/SettingsPanels.tsx Outdated

cursor Bot reviewed Aug 2, 2026

View reviewed changes

Comment thread apps/web/src/components/settings/SettingsPanels.tsx Outdated

Comment thread apps/web/src/components/settings/SettingsPanels.tsx Outdated

StiensWout added 2 commits August 2, 2026 15:21

feat(web): add theme color picker

6a0acb1

fix(web): guide simple theme palettes

e4cf49a

macroscopeapp Bot reviewed Aug 3, 2026

View reviewed changes

Comment thread apps/web/src/components/settings/SettingsPanels.tsx Outdated

cursor Bot reviewed Aug 3, 2026

View reviewed changes

Comment thread apps/web/src/components/settings/SettingsPanels.tsx Outdated

t3-code Bot mentioned this pull request Aug 3, 2026

feat(web): add two-color appearance palette #5258

Draft

StiensWout added 2 commits August 3, 2026 08:53

feat(web): add T3 Grove theme

cd50639

fix(web): simplify guided theme copy

2650133

macroscopeapp Bot reviewed Aug 3, 2026

View reviewed changes

Comment thread apps/web/src/components/settings/SettingsPanels.tsx Outdated

cursor Bot reviewed Aug 3, 2026

View reviewed changes

Comment thread apps/web/src/themePalette.ts

Comment thread apps/web/src/themePalette.ts

Comment thread apps/web/src/components/settings/SettingsPanels.tsx Outdated

StiensWout added 2 commits August 3, 2026 09:07

fix(web): theme theme editor actions

9535885

fix(web): theme theme removal action

89d70e9

macroscopeapp Bot reviewed Aug 3, 2026

View reviewed changes

Comment thread apps/web/src/components/settings/SettingsPanels.tsx Outdated

Comment thread apps/web/index.html Outdated

cursor Bot reviewed Aug 3, 2026

View reviewed changes

Comment thread apps/web/index.html

StiensWout and others added 5 commits August 3, 2026 09:34

fix(web): align theme mode boot behavior

ea199da

fix(web): use theme tokens for status accents

cdd6470

Merge remote-tracking branch 'upstream/main' into t3code/modular-them…

833f9ee

…e-system

test(web): load the boot script via a raw import

a096aba

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

cursor Bot reviewed Aug 3, 2026

View reviewed changes

Comment thread apps/web/index.html

Comment thread apps/web/src/components/settings/ThemeSettings.tsx

Comment thread apps/web/src/components/settings/ThemeSettings.tsx

macroscopeapp Bot reviewed Aug 3, 2026

View reviewed changes

Comment thread apps/web/index.html Outdated

StiensWout mentioned this pull request Aug 3, 2026

Themes and UI cusomization #418

Open

StiensWout and others added 2 commits August 3, 2026 11:18

chore: retrigger CI after GitHub 503 during checkout

46827f2

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Uh oh!

Conversation

StiensWout commented Aug 2, 2026 • edited by cursor Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Screenshots

Verification

Add modular theme library with custom theme support and semantic color tokens

Uh oh!

coderabbitai Bot commented Aug 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

macroscopeapp Bot commented Aug 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Approvability

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

StiensWout commented Aug 2, 2026 •

edited by cursor Bot

Loading

coderabbitai Bot commented Aug 2, 2026 •

edited

Loading

macroscopeapp Bot commented Aug 2, 2026 •

edited

Loading