Make "Hero" and "Card" components with better rendering colors on "light" themes

[anthony-robin]

Hi,

I'm building a website with a dark and light theme using the "Hero" and "Card" components.

I notice that the background image on both of these components works well in dark mode but remain too dark on light mode.
Is there a way to inverse the colors in light mode with a whiter overlay on background image and a darker content for a better fit with global "light" page design ?

For example, here is the rendering of the card component on light mode from the daisy documentation:

Thank you :)

[ozdemirburak]

If you do not want the default view for the light theme, you can always control them with some custom CSS using the data-theme selector.

Here is an example: https://play.tailwindcss.com/GaKqTyp7gb?file=css

:root:not([data-theme="dark"]) .card.image-full > figure img {
  filter: brightness(50%);
}

:root:not([data-theme="dark"]) .card.image-full > .card-body {
  color: var(--color-base-content);
}

Alternatively, do not use the the image-full and use something like bg-base-100/60.

Here is an example: https://play.tailwindcss.com/mjoqG2xAYD

<div class="card w-96 shadow-sm relative overflow-hidden">
  <!-- Background image -->
  <figure class="absolute inset-0">
    <img src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp" alt="Shoes" class="w-full h-full object-cover" />
  </figure>
  <!-- Custom part begins -->
  <div class="absolute inset-0 bg-base-100/60"></div>
  <!-- Custom part ends -->
  <div class="card-body relative z-10 text-base-content">
    <h2 class="card-title">Card Title</h2>
    <p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
    <div class="card-actions justify-end">
      <button class="btn btn-primary">Buy Now</button>
    </div>
  </div>
</div>

[anthony-robin]

Thank you for your great explanation and examples !
I've been able to adjust the colors to fit my website light theme with success. For the Hero component, I overrided it using:

@utility hero-overlay {
    @apply bg-base-100/50;
}

@utility hero-content {
    @apply text-base-content;
}