Fluent DataGrid in dark mode, cannot read the text when row is highlighted

[coderdnewbie]

I cannot read the text when the row is highlighted and in dark mode. In light mode, it looks fine. See screenshot.

[vnbaaij]

This is just an example. You would need to work with te design systme colors if you want this to work for both darlk and light mode. See for example below where I changed the background and cell color to

.highlighted-row {
    background-color: var(--accent-fill-rest);
}

.highlighted-row > fluent-data-grid-cell {
    color: var(--neutral-fill-inverse-rest);
}

and for the rowStyle I changed it the background to var(--accent-fill-active)

You can see that in this case the contrast in Light mode is not super. You'll need to play a bit with colors and the style declarations in CSS and .razor to get an optimum result. It's an implementation detail and not a component issue.

[AJ1000]

I think you misunderstand. On the fluent blazor website you can see the yellow issue, in dark mode, that is reported above. What I expected to be used is the same highlight that happens in the fluentnavbar, a sort of grey color. That is what I thought would be the same for the fluentdatagrid as this would conform to the standards.

What do you think, does what I think make sense?

[vnbaaij]

It makes sense, yes but in this case we choose to not limit you to a specific set color. You are however free to specify that specific color in a class you create yourself (same as how we created the .highlight-row class in the demo site.

[AJ1000]

Ok thanks.

[coderdnewbie]

AJ1000, This is what I did to get the effect you wanted

.highlighted-row {
    background-color: var(--neutral-fill-stealth-hover) !important;
}

.highlighted-row > fluent-data-grid-cell {
    color: var(--neutral-fill-inverse-stealth-hover) !important;
}

[AJ1000]

Neutral-filled worked, it works with the themes as expected. Thanks.