@@ -4,6 +4,67 @@ All notable changes to this project will be documented in this file.
44The format is based on [ Keep a Changelog] ( http://keepachangelog.com/ )
55and this project adheres to [ Semantic Versioning] ( http://semver.org/ ) .
66
7+ ## [ 6.5.0] - 2026-01-20
8+ ### Added
9+ - Added theming scoping container [ #2056 ] ( https://github.com/IgniteUI/igniteui-webcomponents/pull/2056 )
10+ - The ` igc-theme-provider ` component allows you to scope themes to specific parts of your page using Lit's context API. This enables having multiple different themes on the same page.
11+ - Works both in Shadow and Light DOM.
12+ - ** Shadow DOM Usage** : When building custom web components with Shadow DOM, you can apply scoped themes by importing the theme CSS and wrapping your content with ` igc-theme-provider ` :
13+ ``` typescript
14+ import { LitElement , html } from ' lit' ;
15+ import { styles as materialDark } from ' igniteui-webcomponents/themes/dark/material.css.js' ;
16+
17+ class MyComponent extends LitElement {
18+ static styles = [materialDark ];
19+
20+ render() {
21+ return html `
22+ <style>
23+ /* Additional component-specific styles */
24+ </style>
25+ <igc-theme-provider theme="material" variant="dark">
26+ <igc-button>Scoped Material Dark Button</igc-button>
27+ <igc-input label="Scoped Input"></igc-input>
28+ </igc-theme-provider>
29+ ` ;
30+ }
31+ }
32+ ```
33+ - ** Light DOM with @scope ** : For Light DOM usage , you can leverage CSS ` @scope ` to apply themes to specific page sections :
34+ ` ` ` html
35+ <style>
36+ @scope (#fluent-section) {
37+ @import 'node_modules/igniteui-webcomponents/themes/light/fluent.css';
38+ }
39+
40+ @scope (#material-section) {
41+ @import 'node_modules/igniteui-webcomponents/themes/dark/material.css';
42+ }
43+ </style>
44+
45+ <div id="fluent-section">
46+ <igc-theme-provider theme="fluent" variant="light">
47+ <igc-button>Fluent Light Button</igc-button>
48+ <igc-card>
49+ <igc-card-header>Fluent Theme Card</igc-card-header>
50+ </igc-card>
51+ </igc-theme-provider>
52+ </div>
53+
54+ <div id="material-section">
55+ <igc-theme-provider theme="material" variant="dark">
56+ <igc-button>Material Dark Button</igc-button>
57+ <igc-input label="Material Input"></igc-input>
58+ </igc-theme-provider>
59+ </div>
60+ ` ` `
61+
62+ ### Fixed
63+ - #### Tile manager
64+ - Header is hidden only when there is no content and maximize / fullscreen are disabled [#2059 ](https :// github.com/IgniteUI/igniteui-webcomponents/pull/2059)
65+ - #### Theming
66+ - Resolve initial theme based on document computed styles rather than stylesheets [#2061 ](https :// github.com/IgniteUI/igniteui-webcomponents/pull/2061)
67+
768## [6.4 .0 ] - 2025 - 12 - 15
869### Added
970- #### Localization
@@ -1140,6 +1201,7 @@ Initial release of Ignite UI Web Components
11401201- Ripple component
11411202- Switch component
11421203
1204+ [6.5.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/6.4.0...6.5.0
11431205[6.4.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/6.3.6...6.4.0
11441206[6.3.6]: https://github.com/IgniteUI/igniteui-webcomponents/compare/6.3.5...6.3.6
11451207[6.3.5]: https://github.com/IgniteUI/igniteui-webcomponents/compare/6.3.4...6.3.5
0 commit comments