Rz-backgroud-color-success-light not setting text color todark

I am usingradzen version 5.7 with material3 theme generated by RDS. When I set my cell background in the table to be the "light" version of the color, the text does not change to the dark color. You can see here in the picture how the regular one has the white theme text, while the the light version keeps the white text .

billede
This is the HTML for the two cells

How did you set the background? In general setting the background alone won't change the text color - it only applies to the background. You probably need to set the text color as well (via the color CSS attribute).

Ah that makes sense.

I set it in the RowRender function for the data grid because I thought that would automatically switch the text color to match the theme for light/dark.

I have another issue now though which is that, if I use this RowRender code on a datagrid, the tr element does not end up having the rz-data-row class. If I comment out this function code however, then the class is present on the element.

When I put a breakpoint in the return, I can't see the rz-data-row class being added to any of the table rows, but when I inspect the html in the browser the class is present as long as I do not run the Attributers.Add call.

Any suggestion on why this is happening?

It seems that there is no class that I can set that will use the background color I need and the text color to complement it and I need to pick the color pair manually to something that fits both light and dark themes.

But actually you can see here that the setting of thet color does not take effect.

Color is set via the rz-data-cell class in the theme. You can use CellRender instead.

You can easily add the rz-data-row class yourself to the table row if needed.

By the way you can always use the browser dev tools to see where CSS values are set.

Also I suggest checking this demo which shows how to conditionally style data grid rows.

1 Like

Thanks, for a backend developer like myself, i tend to forget :+1: but I like how your product makes UI so easy for a non UI dev

Regardig the demo I looked at it, however I was hoping for a more clean way to set the color as the data grid code tends to get very complex. As far as I can see howevere the only way to set the text color is by doing it trough the column cell template? I can set the background color in the RowRender and the CellRender, but any color I set in either of the render functions ends up overwritten by the rz-data-cell from the theme.

Could you eplain what you mean that I an use CellRender instead? If the color is set via the rz-data-cell the only way I see to set the color is to do it i. The template render fragment of the column.

I tested the following and it seems to work fine. Add the class via CellRender:

void CellRender(DataGridCellRenderEventArgs<OrderDetail> args)
{
    if (args.Column.Property == "Quantity")
    {
       args.Attributes.Add("class", args.Data.Quantity > 20 ? "rz-background-color-success" : "rz-background-color-warning");
    }
}

Then add this style

<style>
  td.rz-background-color-warning .rz-cell-data {
     color: black;
  }
</style>

Here is the end result:


However I do think we should stop setting the color via .rz-cell-data as it becomes hard to override it via CellRender or RowRender. Pinging @yordanov for future consideration.

1 Like

Thank you for clarity, I would like to be able like you sayd to not have to overwrite the theme settings as it makes me worry that will break things in the future if there is a change to it :+1: