Custom CSS Light & Dark Mode

Radzen.Blazor Components
1

I’m trying to create custom css for read only textboxes and ensure they display well for light as well for dark modes. So I’m trying to set up a background color for light mode and another for dark mode.

I know that the RazenLayout changes depending on dark or light modes ie. for Fluent Theme, for light sets a css style of rz-fluent and for dark mode sets rz-fluent-dark.

This could work, however, the issue is that the textbox are in a Dialog and the code generated for a dialog sits outside of the layout.

Is there a workaround for the above for a Dialog?

2

Hi @kirank,

You could use the :has() pseudo-class to check if the <body> has a child (in our case rz-layout) with a matching *-dark css class and then cascade in:

<style>
  /* dark: any Radzen dark theme active anywhere in the document */
  body:has(.rz-layout[class*="-dark"]) .rz-dialog .rz-textbox {
    background-color: #000000;
  }

  /* light: dialog when the layout is a non-dark theme */
  body:has(.rz-layout:not([class*="-dark"])) .rz-dialog .rz-textbox {
    background-color: #ffffff;
  }
</style>
3

Thank you. That works.