Description

This work has been done in collaboration with @louismaximepiton, please don't remove the "Co-authored-by" from the commit message if merged

This PR tackles specifically #40493. This work is based on #39295 spirit.
The idea is to rely on custom properties so that there's never a specificity issue when nesting color modes (light mode in dark mode, and dark mode in light mode).

In order for it to be non-breaking, _variables-dark.scss uses the newly deprecated $carousel-dark-* Sass variables.

Please note that in the future, we'll be able to replace :root, [data-bs-theme="light"] { with @include color-mode(light, true) as suggested in #39295.

This part generates the following CSS:

.carousel-dark {
  --bs-carousel-indicator-active-bg: #000;
  --bs-carousel-caption-color: #000;
  --bs-carousel-control-icon-filter: invert(1) grayscale(100);
}

:root,
[data-bs-theme=light] {
  --bs-carousel-indicator-active-bg: #fff;
  --bs-carousel-caption-color: #fff;
  --bs-carousel-control-icon-filter: ;
}

[data-bs-theme=dark] {
  --bs-carousel-indicator-active-bg: #000;
  --bs-carousel-caption-color: #000;
  --bs-carousel-control-icon-filter: invert(1) grayscale(100);
}

After this PR

After this PR, we might do exactly the same thing for the problematic rendering of the accordions, close buttons, etc. and use the same technique.

@mdo and @twbs/css-review what do you think about this PR? Do you agree that it can be used, it doesn't bring regressions, and can be replicated for other issues (accordions, etc.)?

Type of changes

• Bug fix (non-breaking change which fixes an issue)

Checklist

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

Live previews

• https://deploy-preview-40695--twbs-bootstrap.netlify.app/docs/5.3/components/carousel/

Related issues

Closes #40493