DataGrid Header and Bootstrap 5 Dark Mode

[stsrki]

Discussed in #5711

^{Originally posted by Alexander-JM-0224 August 22, 2024}
Hello,

I am currently working on the UI of the web application of my employer, and i am supposed to implement a switchable Dark Theme.

Since we use Bootstrap 5 (5.3.3) i have used the JS script in the Bootstrap docs to make switching our Bootstrap theme possible and this works wich is very nice.
There is no other styling in our application (Blazor WASM .NET8) for the DataGrids, but the background colors do not all switch correctly and the inspector seems to indicate there is background-color coming from the Blazorise CSS.
Important note, i have already tried to give the DataGrids their own CSS class just for the background color. Even with !important it does nothing for me.
When i switch the color off in the inspector everything is perfect.

Problem DataGrid Header

Inspector

Result when Inspector turns background-color off

Same for a colum

And the inspector

This is how they declare the DataGrid i do not think the problem starts here but ill give it anyways.

Tested in Chrome and Firefox with Windows 11

What could be the cause of this issue? Are we doing something wrong? Do you need more information from me? Let me know!

Thanks in advance!
Alexander

[David-Moreira]

Have you tried defining the background color by using the Row Styling settings? I think we've added support for the Fixed Header to consider that background color.

[Alexander-JM-0224]

Have you tried defining the background color by using the Row Styling settings? I think we've added support for the Fixed Header to consider that background color.

If we use RowStyling this only changes the background color of the DataGrid Rows, not te header. And it gets overruled by our theme settings so the RowStyling background color is only visible if i turn off our "Dark Mode BG" in the inspector.

This picture shows the result we get when we make the background-color #fc8803 VIA RowStyling and turn our own background color off in the (chrome)inspector.

[Alexander-JM-0224]