Repository navigation
Configure the global theme from Blazor - #564
Open
MayaKirova wants to merge 3 commits into
Open
MayaKirova wants to merge 3 commits into
MayaKirova wants to merge 3 commits into
Conversation
Add ConfigureThemeAsync on IIgniteUIBlazor, backed by a new api.js configureTheme export, and update the theming skill to pair it with the stylesheet swap. The theme state now loads at startup (~4 KB gzip). Closes #562 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Let vite read the tsconfig paths (resolve.tsconfigPaths) instead of repeating each deep import as an alias. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
The shared theming recipe directs full-product users to an unavailable api.js module and needs Lite-only labeling plus guidance to use IgbThemeProvider with a stylesheet swap.
1 open issue
What changed in this PR
Adds page-wide theme configuration to the Blazor library, addressing #562 by allowing runtime stylesheet swaps to update component structural styles too.
Changes:
- Adds
ConfigureThemeAsyncand the JavaScriptconfigureThemeexport. - Adjusts bundling to preserve lazy component loading and adds API tests.
- Updates theming guidance, adds a page-wide theme story, and documents the feature.
| File | Description |
|---|---|
vite.config.mts |
Resolves direct theming imports and separates shared theme dependencies. |
tsconfig.json |
Maps the direct web-components theme configuration import. |
tests/js/static-web-assets.test.mjs |
Checks theme events, default variant, and lazy loading. |
tests/IgniteUI.Blazor.Tests/ThemeConfigurationTests.cs |
Tests interop arguments, defaults, module reuse, and null handling. |
stories/Components/Stories/ThemeProvider.stories.razor |
Adds a page-wide structural theme-switching example. |
src/src/api.ts |
Exports configureTheme and standalone theme types. |
src/componentsBase/InteropModule.cs |
Defines the public API module path. |
src/componentsBase/IgniteUIBlazorThemeExtensions.cs |
Adds the Blazor theme configuration extension. |
skills/igniteui-blazor-theming/SKILL.md |
Clarifies structural styles versus stylesheet colors. |
skills/igniteui-blazor-theming/references/common-patterns.md |
Pairs runtime stylesheet swaps with theme configuration. |
CHANGELOG.md |
Records the new page-wide theming APIs. |
Review effort: Balanced
| ``` | ||
|
|
||
| Register `IgbThemeProviderModule`. Providers nest — an inner one overrides the outer for its subtree. | ||
| A theme has two parts: the stylesheet (palette and other CSS variables) and the structural styles each component picks for the active theme and variant, read from the stylesheet once and then cached. A runtime switch changes both: swap the stylesheet, and tell the components — page-wide with `ConfigureThemeAsync`, or for a subtree with `IgbThemeProvider`. Swapping only the stylesheet gives the new colors on the old shapes; telling only the components gives the new shapes in the old colors. |
Replace the optional variant with overloads, so the client applies its own default, and complete the XML docs. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This branch has not been deployed
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
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.
Description
Add ConfigureThemeAsync on IIgniteUIBlazor, backed by a new api.js
configureTheme export, and update the theming skill to pair it with
the stylesheet swap.
Type of Change (check all that apply):
How Has This Been Tested?
Checklist:
README.MDCHANGELOG.MDupdates for newly added functionalityCloses #562