Force light theme on specific component

[benbaessler]

I'd like to always apply the light theme to a specific Dialog component in my project, even if the selected theme is dark mode. Is this somehow possible?

[dan5py]

Hi @benbaessler you can add a custom light class like this:

Update the globals.css file:

@layer base {
  :root, .light {
  /* rest of css file */

And then you can use it in your components:

<div className="light">
  Forced light mode
</div>

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[bhatvikrant]

Hi @benbaessler you can add a custom light class like this:

Update the globals.css file:

@layer base {
  :root, .light {
  /* rest of css file */

And then you can use it in your components:

<div className="light">
  Forced light mode
</div>

This did not work for me

[FrancescoSaverioZuppichini]

same here!

[softmarshmallow]

Nice clean solution?