DataGrid Header and Bootstrap 5 Dark Mode

[Alexander-JM-0224]

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

[Alexander-JM-0224]

For now i have fixed it with this.
.table-fixed-header > .table > thead:not(.table-thead-theme) > tr > th {
background: $th-bg-color-dark !important;
}

But i still do not think this is something that is supposed to be happening, this will ultimately give problems with further styling.

[stsrki]

Agree. We should try using the BS5 styles as default colors for fixed headers, instead of using strongly-typed white color.

I will create a new ticket for this.

[Alexander-JM-0224]

Unfortunately this workaround is not super solid enough does interfere with other styling in our project. We look forward to a more permanent solution in the future.