Need advice for selecting neutral color that works for both dark and light themes

Radzen.Blazor Components
1

I want to use kind of 'disabled' color for my text, using material theme base-600 seemed to be a good pick, however when switching to material-dark using appearance toggle text has too little contrast over background.

Ideally, I would like to use a 'neutral' palette, that would be equivalent to base colors but reversed if theme is set to dark, however, I could not find anything like this on demo pages.

I looked into ThemeService, but it has no property for light/dark, just a theme name.

There are two solutions that come to my mind:

  1. Use string.Contains on theme name and apply different base colors based on result, seems simple but I am afraid that timings of color changes might not be consistent with each of the text elements.

  2. Be creative with CSS rules, RadzenLayout has this nice property that it includes theme name in class list, I could create my own css class that applies text color using radzen style variables. One downside is, I need separate rule for each theme.

Is there a more elegant way to accomplish this?

2

Hi @FLAMESpl,

If you are after a 'disabled' color, maybe you should consider using the functional text color css variables.

Another option is to use the CSS class that each theme sets to RadzenLayout and cascade your preferred color for each one of the themes you use. For example:

.rz-default {
    --rz-text-color: red;
}

.rz-dark {
    --rz-text-color: pink;
}
1 Like
3

I didn't think about looking for colors in typography section, this is exactly what I need.Thank you!