bootstrap-5bootstrap-carousel

How to use carousel light on a data-bs-theme="dark" webpage

I am using a bootstrap carousel on a page with data-bs-theme="dark" in the html tag - i.e. I am using a dark theme. Because of this, the carousel automatically changes to a dark theme. I want the indicators, the captions, and the controls to be white/light, but can't seem to change this ...

I tried in my css:

            .carousel-control-next-icon,
            .carousel-control-prev-icon {
            filter: invert(1);
            }

I've tried in the carousel parent element - carousel-light I've tried adding data-bs-theme="light" in the carousel tag. I just can't seem to get this carousel to invert colors.

Solution

  • This is the default variable from Bootstrap _variables.scss

    $carousel-dark-control-icon-filter:  invert(1) grayscale(100) !default;

    which you may change it to your desired color in a dark-mode when use data-bs-theme="dark"

    For example,

    $carousel-dark-control-icon-filter:  $white;