feat(examples-chat): A2UI Theme palette dropdown (Pass 4)#236
Merged
Conversation
Adds a 6th palette dropdown that switches A2UI theme presets at runtime by toggling `data-theme` on the document root. The global stylesheet keys scoped `--a2ui-*` overrides off this attribute. Four presets, mirroring the lib-side files shipped in PR #235: - Default dark (lib's :host defaults; data-theme attr set but no override block needed — the unset state) - Default light (neutral light, blue accent, off-white surface) - Material dark (M3 purple primary on dark surface) - Material light (M3 purple primary on near-white surface) Inline-themes-in-styles.css approach (vs. dynamic <link> swap) sidesteps the workspace-vs-published-path resolution complexity: each theme's :root override block lives in examples/chat/angular/src/styles.css gated by `data-theme="..."` attribute selector. Mirrors content from libs/chat/src/themes/*.css. Wiring: - demo-shell: `theme` signal (default 'default-dark', persisted via palette-persistence under key 'theme'); `effect()` reflects current signal value onto `<html data-theme>` so the global stylesheet's `:root[data-theme=...]` rules activate. Initial mount reads from persistence and the effect immediately syncs the attribute. - control-palette: new `theme` + `themeOptions` inputs and `themeChange` output; new `<select>` next to Gen UI. - palette-persistence: `theme` added to PaletteState type. Verified live: switching the dropdown updates --a2ui-primary computed style on document root in real time: - default-dark: lib :host default (--a2ui-primary inherited from surface component, computed at root = empty/inherit) - material-dark: --a2ui-primary = #D0BCFF (M3 purple) - material-light: --a2ui-primary = #6750A4 (M3 light purple) - data-theme attribute on <html> updates synchronously The agent's beginRendering.styles.primaryColor still wins per surface (host inline-style binding, highest specificity), so consumer-chosen theme + agent-chosen primary color compose: theme decides palette baseline, agent can per-surface override. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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
1 participant
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
Pass 4 of the A2UI theming track — a demo-side palette dropdown that lets users switch the four shipped theme presets at runtime without editing CSS. Lives alongside Model / Effort / Gen UI in the existing palette.
Behavior
Implementation
Inline-themes-in-styles.css approach (vs. dynamic `` swap) sidesteps workspace-vs-published-path resolution complexity. Each theme's `:root[data-theme=...]` override block lives in `examples/chat/angular/src/styles.css`, mirroring the content of `libs/chat/src/themes/*.css` from PR #235.