Color recomandation

Radzen.Blazor Components
1

How to define colors for controls to let them be Lite/Dark sensitive?
Is it something special that we need to know?
Do we need to address both color set Lite and Dark specific to make it work?

2

Hi @Djordje,

You can use the theme editing capabilities in RBS to edit the theme, but in order to define dark/light color palettes you'd have to edit the generated CSS.

  1. Open the Appearance panel, Select a theme e.g. Material and edit a color or pick a predefined palette.
  2. Open the site.css where you'll find the generated palette in the form:
:root {
    --rz-white: #ffffff;
    --rz-black: #000000;
    --rz-base: #8d6e63;
    --rz-base-50: #efebe9;
    --rz-base-100: #d7ccc8;
    --rz-base-200: #bcaaa4;
    --rz-base-300: #a1887f;
    ...
}
  1. Rename the :root selector to :root:has(.rz-material). This will make the palette applicable only when Material theme is used. Radzen adds automatically the .rz-[theme-name] css class to .rz-layout when the respective theme is used. Now your site.css should look like this:
:root:has(.rz-material) {
    --rz-white: #ffffff;
    --rz-black: #000000;
    --rz-base: #8d6e63;
    --rz-base-50: #efebe9;
    --rz-base-100: #d7ccc8;
    --rz-base-200: #bcaaa4;
    --rz-base-300: #a1887f;
    ...
}
  1. Close your site.css and go back to the Appearance section. Select Material Dark and repeat the steps 1-3 this time replacing the newly generated :root with :root:has(.rz-material-dark).

Pretty much that's it. You can define a standalone palette for each one of the themes using the :root:has(.rz-[theme-name]) css selector.