There is a default Background Class for all themes.

[jjdevzinho]

Hello, first I would like to congratulate you on DaisyUI :)

I have a doubt, what is the background class we have to use for multiple themes?

Is there a default class?

In my testing when using bg-base-* or neutral classes, some components get bad and others don't.

I don't know what the default background for each theme would be.

Thanks for listening.

[saadeghi]

You can use any color but bg-base-100 would be the best choice. If you're nesting themes you will also need to set the text color otherwise it will inherit from the parent.

So this would be the safest option for nesting themes inside each other:

<div class="bg-base-100 text-base-content" data-theme=dark>
  <div class="bg-base-100 text-base-content" data-theme=light>
    <div class="bg-base-100 text-base-content" data-theme=night>
    </div>
  </div>
</div>

[jjdevzinho]

Hi, thank you very much for the reply.

I'm using the base-300 class in the body and in the child elements I'm using the base-100 class, almost all the themes were good in this pattern, I think only the themes: Forest and Night that had little contrast with the components.

Using the base-100 class in the body, and base-200 in the components, I found that more themes had little contrast :/

I think I will create a bg-body and body-content class for all themes, as there is no default or rule in this part :)

Thank you very much.

<div class="bg-base-300 text-base-content">
  <div class="bg-base-100">
    ...
  </div>
</body>