1

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.

BDL
  • 21,052
  • 22
  • 49
  • 55
The Digital Guru
  • 27
  • 5

1 Answers1

0

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;
yansusanto
  • 355
  • 1
  • 6
  • 13