I am not sure if this is an error in the ‘Standard’ and ‘Standard Dark’ theme but the property ‘--rz-layout-background-color’ is set to ‘transparent’. All the other free themes are set to ‘var(--rz-body-background-color)’.
This causes the body background color to be black when selecting the ‘Standard’ theme for me using a dropdown. I am not sure how or why it works on the Radzen site.
As you can see the background around this component:
And now the corrected property:
Hi @CodeFussion,
This is intentional. The Standard theme uses a transparent --rz-layout-background-color because the <body> itself has a background image within the theme.
If you change --rz-layout-background-color to var(--rz-body-background-color), the layout will cover that background and the Standard theme will no longer have its intended appearance.
You can see how the Standard theme is supposed to look here:
If the background is black in your application, I would check whether you have any global CSS overriding the <body> background when switching themes.
I think this is a theme issue rather than a problem with your component. In the Standard and Standard Dark themes, --rz-layout-background-color is set to transparent, while the other themes use var(--rz-body-background-color).
When switching themes through the dropdown, the layout therefore loses the expected background and exposes the body background underneath. Setting the property to var(--rz-body-background-color) fixes the issue for me. It would be worth checking whether the Standard themes are missing the same variable used by the other free themes.
You are correct. Fixed it on my end. I had this set in the index.html file which was causing the background to be dark:
<div id="app" style="background-color: #001c26; height: 100vh;">
<div style="position: absolute; top: 35vh; text-align: center; width: 100%;">
<div class="brand-logo-light spin3D-animation" style="height: 250px; width: 250px; margin: 0 auto;"></div>
</div>
</div>
