feat(web): add modular theme library - #5226
Open
StiensWout wants to merge 33 commits into
Open
Conversation
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
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. Comment |
github-actions
Bot
added
size:XXL
![macroscopeapp[bot]](https://avatars.githubusercontent.com/in/900172?s=60&v=4){kind=small}
StiensWout
force-pushed
the
t3code/modular-theme-system
branch
from
August 2, 2026 11:52
e0f79e4 to
607dd6b
Compare
StiensWout
marked this pull request as ready for review
August 2, 2026 12:27
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
Contributor
ApprovabilityVerdict: Needs human review Diff is too large for automated approval analysis. A human reviewer should evaluate this PR. You can customize Macroscope's approvability policy. Learn more. |
|
I did not have time to go through this PR thoroughly. But the general direction taken is exactly what I had in mind when I started #418. From what I see, it should be easy to create a custom theme based on the tokens created. |
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.
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>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- 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>
Swap the light palette to t3.chat's actual tokens — #a84370 primary, surface family — for the deeper pink accents of the product. The boot splash and managed-editor fallbacks follow, and a contrast guard test keeps the key pairings readable. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
StiensWout
force-pushed
the
t3code/modular-theme-system
branch
from
August 4, 2026 08:18
f52a34c to
2cf3d56
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
T3 Code now has a token-based theme foundation for the web client and desktop app.
Closes #418
Screenshots
Maintainer theme cards
Theme library
Dark workspace controls
Personal themes
Three temporary personal themes were used for the library evidence; they are not committed as built-in themes.
Workspace examples
Core component coverage
Built with GPT-5.6-Luna in T3 Code.