Skip to content

Commit 0ea6ca9

Browse files
authored
docs: Updated CHANGELOG for new release (#2064)
1 parent bf7138d commit 0ea6ca9

File tree

1 file changed

+62
-0
lines changed

1 file changed

+62
-0
lines changed

CHANGELOG.md

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,67 @@ All notable changes to this project will be documented in this file.
44
The format is based on [Keep a Changelog](http://keepachangelog.com/)
55
and 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

Comments
 (0)