Change image based on select theme (light/dark)

Radzen.Blazor Components
1

Hi,

I'm using Radzen 5.0 and using the Software theme. When I toggle the theme via the RadzenAppearanceToggle the colors changes as expected.

However, we have an image that uses colors that have a bad contrast with the dark theme. We therefor want to load a different image when the dark theme is active. I can't find a method on how to detect that the dark theme is active and change the image when this is the case.

Does anyone have an idea on how to implement this?

Greetings,

Vincent

2

Hi @Vincent,

You could use ThemeService to load a different image based on the theme in use:

@inject ThemeService ThemeService

...

<img src="@(ThemeService.Theme == "software" ? "image.png" : "image-dark.png")" />

Here is also how this is used in the online demos to toggle RTL mode:

3

Thank you. I didn't know about the ThemeService yet (it is not mentioned on the components demo page?). I'll look into it.