^{Originally posted by hackel September 2, 2025}
I'm trying to implement a design with a dark background for an Offcanvas header, and need to change the color of the close button. As far as I can tell adding data-bs-theme="dark" is the correct way to do this, but I can't figure out a way to add it other than recreating the entire header section, which seems wrong. I thought it was worth a discussion and maybe worth considering a new prop for the Offcanvas component (and other related components like Modal).

I had no luck trying to change the color by applying a custom class with header-close-class, and header-close-variant seems to have no effect whatsoever. I looked at useColorMode, but I don't see any way to get a template ref to the inner header element. It seems like adding a header-dark prop that just adds data-bs-theme="dark" to the offcanvas-header element might make the most sense. Thoughts? Maybe I'm missing something. Thanks.