Description
When a sample is embedded in the docs and the theme is switched with the docs theming widget, the full grids (IgbGrid, IgbTreeGrid, IgbHierarchicalGrid, IgbPivotGrid and the other components built on Angular Elements) only partly follow the new theme.
The grid stylesheet (_content/IgniteUI.Blazor/themes/grid/<mode>/<theme>.css) is swapped by sample-theme.js, so colors and CSS-variable-driven sizing change. The grid's internal theme does not: the parts that render per theme (for example the input groups in filtering and editing) keep the theme the grid was created with. The grid ends up mixing the new theme's CSS with the old theme's structure.
The web components (IgbInput, IgbButton, …) and GridLite are handled by #1308; the full grids are not covered by it (or by #1307).
Cause
The Angular Elements grids read their theme from a single root ThemeToken, created once when the first grid is built. It reads --ig-theme from document.body at that moment and is never updated afterwards:
// ThemeToken constructor in the igniteui-angular-elements bundle shipped with
// IgniteUI.Blazor 26.1.98 (de-minified)
const fromCss = globalThis.window?.getComputedStyle(this.document.body).getPropertyValue("--ig-theme").trim() || "material";
this.subject = new BehaviorSubject(explicitTheme ?? fromCss);Theme-dependent grid internals subscribe to it (themeToken.onChange(...)), so calling its set() would update them, but nothing public reaches it: it isn't exposed by IgniteUI.Blazor, IgbGrid has no theme parameter, and the grids bundle doesn't listen for igc-change-theme or the web components' theme context.
The same limitation applies to the grid theme-switching sample in #1240, which also only swaps the grid stylesheet.
Steps to reproduce
- Run the Blazor samples browser and the docs locally.
- Open a docs grid topic whose sample has the theme picker enabled.
- Switch the theme, e.g. Bootstrap → Material.
- Open filtering or editing in the grid: the input groups keep Bootstrap's structure under Material's CSS.
A grid created after a switch picks up the new theme correctly, since the token reads --ig-theme at creation.
Possible fixes
- Upstream (preferred): make the Angular Elements
ThemeToken follow runtime theme changes, e.g. re-read --ig-theme when the global igc-change-theme event fires (what configureTheme() dispatches). sample-theme.js would then dispatch that event after the stylesheets are swapped. This would fix runtime theme switching for grids in every Blazor app, not just the samples browser.
- Workaround in the samples browser: for pages that contain Angular Elements components, reload the sample when the theme changes, passing the selection across the reload (e.g.
sessionStorage keyed by location.pathname) and applying it in <head> before Blazor starts, so the grids read the right --ig-theme when they are created. Costs a Blazor restart per switch and loses the sample's state (sorting, filtering, scroll position), on grid pages only.
Description
When a sample is embedded in the docs and the theme is switched with the docs theming widget, the full grids (
IgbGrid,IgbTreeGrid,IgbHierarchicalGrid,IgbPivotGridand the other components built on Angular Elements) only partly follow the new theme.The grid stylesheet (
_content/IgniteUI.Blazor/themes/grid/<mode>/<theme>.css) is swapped bysample-theme.js, so colors and CSS-variable-driven sizing change. The grid's internal theme does not: the parts that render per theme (for example the input groups in filtering and editing) keep the theme the grid was created with. The grid ends up mixing the new theme's CSS with the old theme's structure.The web components (
IgbInput,IgbButton, …) and GridLite are handled by #1308; the full grids are not covered by it (or by #1307).Cause
The Angular Elements grids read their theme from a single root
ThemeToken, created once when the first grid is built. It reads--ig-themefromdocument.bodyat that moment and is never updated afterwards:Theme-dependent grid internals subscribe to it (
themeToken.onChange(...)), so calling itsset()would update them, but nothing public reaches it: it isn't exposed by IgniteUI.Blazor,IgbGridhas no theme parameter, and the grids bundle doesn't listen forigc-change-themeor the web components' theme context.The same limitation applies to the grid theme-switching sample in #1240, which also only swaps the grid stylesheet.
Steps to reproduce
A grid created after a switch picks up the new theme correctly, since the token reads
--ig-themeat creation.Possible fixes
ThemeTokenfollow runtime theme changes, e.g. re-read--ig-themewhen the globaligc-change-themeevent fires (whatconfigureTheme()dispatches).sample-theme.jswould then dispatch that event after the stylesheets are swapped. This would fix runtime theme switching for grids in every Blazor app, not just the samples browser.sessionStoragekeyed bylocation.pathname) and applying it in<head>before Blazor starts, so the grids read the right--ig-themewhen they are created. Costs a Blazor restart per switch and loses the sample's state (sorting, filtering, scroll position), on grid pages only.