From 8d13426fb8be60f39faa7a8b35f25095ce554238 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Tue, 6 Aug 2024 10:43:16 +0200 Subject: [PATCH] Fix light mode carousel in dark mode Co-authored-by: Louis-Maxime Piton --- scss/_carousel.scss | 40 +- scss/_variables-dark.scss | 9 + scss/_variables.scss | 7 +- site/content/docs/5.3/components/carousel.md | 463 ++++--------------- 4 files changed, 127 insertions(+), 392 deletions(-) diff --git a/scss/_carousel.scss b/scss/_carousel.scss index 3a13522001..5ebf6b15dc 100644 --- a/scss/_carousel.scss +++ b/scss/_carousel.scss @@ -99,6 +99,7 @@ color: $carousel-control-color; text-align: center; background: none; + filter: var(--#{$prefix}carousel-control-icon-filter); border: 0; opacity: $carousel-control-opacity; @include transition($carousel-control-transition); @@ -168,7 +169,7 @@ margin-left: $carousel-indicator-spacer; text-indent: -999px; cursor: pointer; - background-color: $carousel-indicator-active-bg; + background-color: var(--#{$prefix}carousel-indicator-active-bg); background-clip: padding-box; border: 0; // Use transparent borders to increase the hit area by 10px on top and bottom. @@ -195,42 +196,31 @@ left: (100% - $carousel-caption-width) * .5; padding-top: $carousel-caption-padding-y; padding-bottom: $carousel-caption-padding-y; - color: $carousel-caption-color; + color: var(--#{$prefix}carousel-caption-color); text-align: center; } // Dark mode carousel @mixin carousel-dark() { - .carousel-control-prev-icon, - .carousel-control-next-icon { - filter: $carousel-dark-control-icon-filter; - } - - .carousel-indicators [data-bs-target] { - background-color: $carousel-dark-indicator-active-bg; - } - - .carousel-caption { - color: $carousel-dark-caption-color; - } + --#{$prefix}carousel-indicator-active-bg: #{$carousel-indicator-active-bg-dark}; + --#{$prefix}carousel-caption-color: #{$carousel-caption-color-dark}; + --#{$prefix}carousel-control-icon-filter: #{$carousel-control-icon-filter-dark}; } .carousel-dark { @include carousel-dark(); } +:root, +[data-bs-theme="light"] { + --#{$prefix}carousel-indicator-active-bg: #{$carousel-indicator-active-bg}; + --#{$prefix}carousel-caption-color: #{$carousel-caption-color}; + --#{$prefix}carousel-control-icon-filter: #{$carousel-control-icon-filter}; +} + @if $enable-dark-mode { - @include color-mode(dark) { - @if $color-mode-type == "media-query" { - .carousel { - @include carousel-dark(); - } - } @else { - .carousel, - &.carousel { - @include carousel-dark(); - } - } + @include color-mode(dark, true) { + @include carousel-dark(); } } diff --git a/scss/_variables-dark.scss b/scss/_variables-dark.scss index 723747bf45..f9bb99d968 100644 --- a/scss/_variables-dark.scss +++ b/scss/_variables-dark.scss @@ -85,3 +85,12 @@ $accordion-icon-active-color-dark: $primary-text-emphasis-dark !default; $accordion-button-icon-dark: url("data:image/svg+xml,") !default; $accordion-button-active-icon-dark: url("data:image/svg+xml,") !default; // scss-docs-end sass-dark-mode-vars + + +// +// Carousel +// + +$carousel-indicator-active-bg-dark: $carousel-dark-indicator-active-bg !default; +$carousel-caption-color-dark: $carousel-dark-caption-color !default; +$carousel-control-icon-filter-dark: $carousel-dark-control-icon-filter !default; diff --git a/scss/_variables.scss b/scss/_variables.scss index cfe25b528f..0d29a54ee2 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1652,6 +1652,7 @@ $carousel-control-width: 15% !default; $carousel-control-opacity: .5 !default; $carousel-control-hover-opacity: .9 !default; $carousel-control-transition: opacity .15s ease !default; +$carousel-control-icon-filter: null !default; $carousel-indicator-width: 30px !default; $carousel-indicator-height: 3px !default; @@ -1677,9 +1678,9 @@ $carousel-transition: transform $carousel-transition-duration eas // scss-docs-end carousel-variables // scss-docs-start carousel-dark-variables -$carousel-dark-indicator-active-bg: $black !default; -$carousel-dark-caption-color: $black !default; -$carousel-dark-control-icon-filter: invert(1) grayscale(100) !default; +$carousel-dark-indicator-active-bg: $black !default; // Deprecated in v5.3.4 +$carousel-dark-caption-color: $black !default; // Deprecated in v5.3.4 +$carousel-dark-control-icon-filter: invert(1) grayscale(100) !default; // Deprecated in v5.3.4 // scss-docs-end carousel-dark-variables diff --git a/site/content/docs/5.3/components/carousel.md b/site/content/docs/5.3/components/carousel.md index 422f0aaecd..b688f7e843 100644 --- a/site/content/docs/5.3/components/carousel.md +++ b/site/content/docs/5.3/components/carousel.md @@ -6,88 +6,7 @@ group: components toc: true --- -## How it works - -- The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators. - -- For performance reasons, **carousels must be manually initialized** using the [carousel constructor method](#methods). Without initialization, some of the event listeners (specifically, the events needed touch/swipe support) will not be registered until a user has explicitly activated a control or indicator. - - The only exception are [autoplaying carousels](#autoplaying-carousels) with the `data-bs-ride="carousel"` attribute as these are initialized automatically on page load. If you're using autoplaying carousels with the data attribute, **don't explicitly initialize the same carousels with the constructor method.** - -- Nested carousels are not supported. You should also be aware that carousels in general can often cause usability and accessibility challenges. - -{{< callout info >}} -{{< partial "callouts/info-prefersreducedmotion.md" >}} -{{< /callout >}} - -## Basic examples - -Here is a basic example of a carousel with three slides. Note the previous/next controls. We recommend using ` - - -{{< /example >}} - -Carousels don't automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they're not explicitly required. Add and customize as you see fit. - -**You must add the `.active` class to one of the slides**, otherwise the carousel will not be visible. Also be sure to set a unique `id` on the `.carousel` for optional controls, especially if you're using multiple carousels on a single page. Control and indicator elements must have a `data-bs-target` attribute (or `href` for links) that matches the `id` of the `.carousel` element. - -### Indicators - -You can add indicators to the carousel, alongside the previous/next controls. The indicators let users jump directly to a particular slide. - -{{< example >}} - -{{< /example >}} - -### Captions - -You can add captions to your slides with the `.carousel-caption` element within any `.carousel-item`. They can be easily hidden on smaller viewports, as shown below, with optional [display utilities]({{< docsref "/utilities/display" >}}). We hide them initially with `.d-none` and bring them back on medium-sized devices with `.d-md-block`. +## Basic Example {{< example >}} {{< /example >}} -### Crossfade - -Add `.carousel-fade` to your carousel to animate slides with a fade transition instead of a slide. Depending on your carousel content (e.g., text only slides), you may want to add `.bg-body` or some custom CSS to the `.carousel-item`s for proper crossfading. +## Dark Carousel {{< example >}} - -{{< /example >}} - -## Autoplaying carousels - -You can make your carousels autoplay on page load by setting the `ride` option to `carousel`. Autoplaying carousels automatically pause while hovered with the mouse. This behavior can be controlled with the `pause` option. In browsers that support the [Page Visibility API](https://www.w3.org/TR/page-visibility/), the carousel will stop cycling when the webpage is not visible to the user (such as when the browser tab is inactive, or when the browser window is minimized). - -{{< callout info >}} -For accessibility reasons, we recommend avoiding the use of autoplaying carousels. If your page does include an autoplaying carousel, we recommend providing an additional button or control to explicitly pause/stop the carousel. - -See [WCAG 2.1 Success Criterion 2.2.2 Pause, Stop, Hide](https://www.w3.org/TR/WCAG21/#pause-stop-hide). -{{< /callout >}} - -{{< example >}} - -{{< /example >}} - -When the `ride` option is set to `true`, rather than `carousel`, the carousel won't automatically start to cycle on page load. Instead, it will only start after the first user interaction. - -{{< example >}} - -{{< /example >}} - -### Individual `.carousel-item` interval - -Add `data-bs-interval=""` to a `.carousel-item` to change the amount of time to delay between automatically cycling to the next item. - -{{< example >}} - -{{< /example >}} - -### Autoplaying carousels without controls - -Here's a carousel with slides only. Note the presence of the `.d-block` and `.w-100` on carousel images to prevent browser default image alignment. - -{{< example >}} - -{{< /example >}} - -## Disable touch swiping - -Carousels support swiping left/right on touchscreen devices to move between slides. This can be disabled by setting the `touch` option to `false`. - -{{< example >}} - -{{< /example >}} - -## Dark variant - -{{< deprecated-in "5.3.0" >}} - -Add `.carousel-dark` to the `.carousel` for darker controls, indicators, and captions. Controls are inverted compared to their default white fill with the `filter` CSS property. Captions and controls have additional Sass variables that customize the `color` and `background-color`. - -{{< callout-deprecated-dark-variants "carousel" >}} - -{{< example >}} -