Theme Customization

Am trying to customize the colours of the step component selected tab without success. Using the dark Material theme as an example it appears to ignore the Steps>Selected Number background or am I missing something?

But the result appears to always use a different colour.

Indeed there is an issue with this particular setting. We will fix it in Radzen with the next release. You can manually fix it by editing the app.json file of your application after setting the the background color.

  1. Open the app\meta.json file with a text editor.
  2. Under "themeSettings" add a new key called "$steps-number-selected-background" with value the desired background color e.g. "$steps-number-selected-background": "#417505"
  3. In Radzen go to the theme customization again and make some changes then save. This should generate the new custom css file.

Thanks @korchev,
That fixes that.
Do you know how to change the associated selected text Account in the screen dump? Seems to be a css class.ui-steps-title

I did also notice that the customize theme >components>Tabs has multiple entries for Selection Background. Not sure if by design?

To change the title color add a similar key (as it is not exposed yet):

"$steps-title-selected-color": "red"

I can't reproduce the tabs issue though. I only see one Selection background:

Thanks @korchev,
For the Selection Background it might just be the latest premium themes as I have several additional options and a vertical scrollbar when viewing the options and need to scroll to see the duplicate.

I see what you mean. Will address that with the next release as well.