Auto color and bg-color with data-bs-theme

[julien-deramond]

Description

This PR tries a new approach with an automatic set of color: and background-color: linked to [data-bs-theme] attribute.

So when your create a <div data-bs-theme="dark"> the content will be automatically rendered with a dark background and a white text in Boosted.

Based on this modification, this PR also sets the Sass and/or CSS variables of components handling color and/or bg color to null by default, or inherit, and also sometimes sets the background to transparent.

More info

We decided to make big components (components with multiple layers) to inherit the color because it seemed more logical. Some components escape this logic such as spinners. It's because it's not really the color that is redefined but the use of currentColor.
All this is due to a technical issue we have when the theme is set directly on the component.

If the component sets color at the top level, it overrides the color coming from the data-bs-theme so if it's set to null or inherit, it will inherit the color above and avoid data-bs-theme color. On multiple-layer components it's easier to handle since we only need to avoid declaring color at the top level of this component.

Weird behavior for titles. For example h1 -> Redefines color but .h1 -> inherits when the data theme is placed on them directly.

For basic elements, form elements and input labels, we decided to keep the behavior as-is. Most likely the theme won't be applied to "basic" elements themselves. And the users could override this behavior if they are using this edge case.

Note

• We got rid of text-body classes in dark mode page for basic elements introduced by Dark mode: basic elements #2355 to really test the impact of this PR in this context.

We chose not to modify color-mode() mixin, here's why...

Not covered in this PR

Based on this modification, it would be possible to do the following in components:

@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)};
  }
}

instead of the current in Bootstrap which doesn't work when a light accordion is declared within a dark container:

@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)};
    }
  }
}

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	98f8b23
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/65670da2cea27000082d6111
😎 Deploy Preview	https://deploy-preview-2313--boosted.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.