Setting bs-theme of an element cannot override global

[GeoKotze]

Prerequisites

• [X] I am using the correct version of React-Bootstrap for my version of Bootstrap
• [X] I have searched for duplicate or closed issues
• [X] I have read the contributing guidelines

Describe the bug

While setting a global theme on the html tag works as expected, attempts to implement an exception by setting a data-bs-theme tag on an element has no effect. I have attempted to set it on many elements to no avail.

I can see that the child elements get the "light" theme and that it is clearly declared on the parent element but they also inherit bs-theme="dark" and it seems to not allow the parent theme to override.

react/html below:

 <Modal
      show={picsShow}
      size="xl"
      onHide={() => setPicsShow(false)}
      className="transparent"
    >
      <ModalHeader closeButton />
      <Modal.Body
        style={{
          maxHeight: "80vh",
        }}
        data-bs-theme="light"
      >
        <Carousel interval={null} indicators={false} fade>
          {pics.map((pic) => {
            return (
              <Carousel.Item
                key={pic.key}
                className="d-flex justify-content-center"
                style={{
                  maxHeight: "80vh",
                  display: "flex",
                  alignItems: "center",
                }}
              >
                <Image
                  src={`./pics/${pic.path}`}
                  alt={lang === "en" ? pic.name : pic.nameEl}
                  style={{ maxHeight: "80vh", alignSelf: "center" }}
                />
                <Carousel.Caption>
                  <h3
![live](https://github.com/react-bootstrap/react-bootstrap/assets/75127088/20c8e7a4-3dc9-42be-bfe2-7e158c0fa642)
>
                    {lang === "en" ? pic.name : pic.nameEl}
                  </h3>
                </Carousel.Caption>
              </Carousel.Item>
            );
          })}
        </Carousel>
      </Modal.Body>
    </Modal>
  );
};

Attached you will find a screenshot showing that the element does have the "light" theme but the properties of the "dark" theme are not overridden

Expected behavior

Well, i expected the element that got the light theme tag to implement it along with the child elements

To Reproduce

add data-bs-theme="dark" to the html tag add data-bs-theme="light" to an element hopefully it does work for you

Reproducible Example

https://codesandbox.io/s/interesting-ride-s38jps?file=/src/App.js

Screenshots

What operating system(s) are you seeing the problem on?

Linux

What browser(s) are you seeing the problem on?

Chrome, Firefox

What version of React-Bootstrap are you using?

2.9.0

What version of Bootstrap are you using?

5.3.2

Additional context

No response

[GeoKotze]

Until this is fixed, the workaround i found is to add a css rule to the classes bootstrap give to the element i want. It's very hacky but it works

.carousel-control-prev-icon {
    filter: none !important;
}

.carousel-control-next-icon {
    filter: none !important;
}

.carousel-caption > span {
    color: #fff !important;
    background-color: rgba(0, 0, 0, 0.5);
}