How do I set a background image in RadzenSidebar?

Radzen.Blazor Components
1

I am building an app using Radzen Blazor Studio and want to set a background image on the RadzenSidebar I have on my main layout, how do I do this?!

What I actually want is to set the image according to whether the current theme is light or dark, but theme customisation seems to be completely absent as is any mechanism to tell whether the current theme is dark or light mode.

All I want for now is a background image, I'll have to figure out the rest.

2

Hi @jfmt,

You can set the background image with CSS.

<style>
  .my-sidebar {
      background-image: url("https://blazor.radzen.com/images/gallery/2.jpg");
   }
</style>
<RadzenSidebar class="my-sidebar">...</RadzenSidebar>

Here is how to use a different image per theme (in this case material3 and material3-dark)

<style>
   .rz-material3 .my-sidebar {
      background-image: url("https://blazor.radzen.com/images/gallery/2.jpg");
   }

  .rz-material3-dark .my-sidebar {
      background-image: url("https://blazor.radzen.com/images/gallery/3.jpg");
   }
</style>

RadzenLayout applies a css class depending on the current theme e.g. rz-material3, rz-material3-dark, rz-fluent, rz-fluent-dark. We use that to specify different background image url.

light-dark

3

Is this possible with RadzenImage objects? I have two images which can be displayed as the application logo/title, one for dark mode one for light mode.