use "data-bs-theme" within content sections, like dropdown, possible?

[endcoreAK]

Hey there,

maybe I just didn't find it, but is there a way to "switch" a single section within the opposite to the current color mode, i.e. by setting data-bs-theme on a section, like it works in the dropdown?

I have created an example (https://jsfiddle.net/xb6wpmk3/) where I would like to use a completely white page, but the CTA should appear in "dark mode". If I now change the entire page to dark mode, the CTA should appear in light mode.

Does anyone have an idea? I was actually very sure that I got this to work in an earlier alpha.

Kind regards
André

[julien-deramond]

Hey @endcoreAK
In your jsfiddle example, the second div can be enhanced by using .bg-body + .text-body (or .text-emphasis for a pure white) like this:

<div class="block bg-body text-body-emphasis" data-bs-theme="dark">
  <div class="container">
    <h2>data-bs-theme="dark"</h2>
    <p>Lorem ipsum dolor sit amet, <a href="#">consetetur</a> sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore.</p>
    <a href="#" class="btn btn-primary">Lorem Ipsum</a>
  </div>
</div>

Hope it can help

[endcoreAK]

Hey @julien-deramond this is a good workaround, thanks. After I had a closer look at the structure, I saw that it was technically not possible that I had this representation before. Gonna use this and will add .block[data-bs-theme="dark"] for my global changes; maybe someday this is possible right in BS :D