[PROTO]: handle data-bs-theme differently

[julien-deramond]

---

⚠️ DRAFT - PROTOTYPE

Description

This PR suggests to change the way we handle data-bs-theme by automatically setting color and background-color values with the following rule:

:root,
[data-bs-theme] {
  color: var(--#{$prefix}body-color);
  background-color: var(--#{$prefix}body-bg);
}

It allows users to set data-bs-theme on any element and have the correct colors applied to it. For example:

<div data-bs-theme="dark">
  <h1>Title</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

Based on that statement, it would mean that we could maybe remove some color: var(--bs-{component}-color) and background-color: var(--bs-{component}-bg) rules from our components.

• Test this theory more in depth

In order to apply this rule within components, color-mode mixin is rewritten to either apply the @content to :root, [data-bs-theme="light"] or [data-bs-theme="{theme}"].

This PR also shows how to fix an issue in our components; for instance where a light accordion is declared within a dark div, its icons have not the right color because we only had the following rule:

@if $enable-dark-mode {
  @include color-mode(dark) {
    .accordion-button::after {
      --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
      --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
    }
  }
}

This issue can be seen in this CodePen

Because of the CSS cascade order, it seems not possible to specify the CSS var with a class because the priority between nested data themes can mess up everything. The idea is to declare those specific CSS variables at the root level:

@include color-mode(light, true) {
  --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
  --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
}

@if $enable-dark-mode {
  @include color-mode(dark, true) {
    --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
    --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
  }
}

This code could have been written in _root.scss since it's a global rule but if we do that for the accordions, when a custom CSS build will be made, the user will have extra useless CSS variables.

In order to check everything, I've create a temporary (or not?) example page: https://deploy-preview-39295--twbs-bootstrap.netlify.app/docs/5.3/examples/dark-mode/

Type of changes

• Refactoring (non-breaking change)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• (N/A) I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

Live previews

• https://deploy-preview-39295--twbs-bootstrap.netlify.app/docs/5.3/examples/
• https://deploy-preview-39295--twbs-bootstrap.netlify.app/docs/5.3/examples/dark-mode/

Related issues

• Closes Does not apply Body color in dark mode. When, adding the data-bs-theme="dark" attribute to the <div> element #39138

• Potential for contrast issues with '.btn-close' class #39765 might be closed depending on the final content of this PR

• [Docs] Colour modes for individual elements #39915 might be closed depending on the final content of this PR and the associated explanation

• Chrome/Edge default color-scheme scrollbars #40414 might be closed by this PR

• TODO