Carousel enhancements, including .carousel-dark (#31650)

* Replace existing carousel control icons with chevrons from Bootstrap Icons

* Add .carousel-dark variant

* Test

* Add variable for .carousel-dark filter

* Update _variables.scss

Co-authored-by: XhmikosR <[email protected]>

1 files changed, 17 insertions, 0 deletions

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 84ffd6cea..ef77cbb61 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -193,3 +193,20 @@
   color: $carousel-caption-color;
   text-align: center;
 }
+
+// Dark mode carousel
+
+.carousel-dark {
+  .carousel-control-prev-icon,
+  .carousel-control-next-icon {
+    filter: $carousel-dark-control-icon-filter;
+  }
+
+  .carousel-indicators li {
+    background-color: $carousel-dark-indicator-active-bg;
+  }
+
+  .carousel-caption {
+    color: $carousel-dark-caption-color;
+  }
+}