AG-Grid does not apply dark theme styling in Angular application using Siemens iX design system #2201
Description
Prerequisites
- I have read the Contributing Guidelines.
- I have not leaked any internal/restricted information like screenshots, videos, code snippets, links etc.
What happened?
Description:
AG-Grid has been integrated into our Angular application following Siemens iX design system guidelines. While the grid renders correctly in the light theme, switching to the dark theme does not update the grid's appearance accordingly. The rest of the application reflects the dark theme, but AG-Grid remains styled for the light theme.
Steps to Reproduce:
Launch the Angular application with Siemens iX design system.
Navigate to a view containing AG-Grid.
Switch the application theme from light to dark.
Observe the AG-Grid styling.
Expected Behavior:
AG-Grid should automatically adapt to the dark theme and apply appropriate styling consistent with the rest of the application.
Actual Behavior:
AG-Grid retains light theme styling even after the application theme is switched to dark.
Impact:
Breaks visual consistency across the application.
May cause readability issues in dark mode.
Reduces user experience and accessibility in dark-themed environments.
Environment:
Framework: Angular
Design System: Siemens iX
Component: AG-Grid
Browser: Chrome 141.0.7390.65
OS: Windows 11
What type of frontend framework are you seeing the problem on?
Angular (Standalone)
On which version of the frontend framework are you experiencing the issue?
@angular/[email protected]
Which version of iX do you use?
v3.2.0
Code to produce this issue.
<ag-grid-angular
[style]="style()"
class="ag-theme-alpine-dark ag-theme-ix"
[gridOptions]="gridOptions()"
(gridReady)="onGridReady($event)">
</ag-grid-angular>