Open harnishdesign opened 11 months ago
Heads up! Applying color modes to elements that aren’t the or
elements requires classes like .text-body and .bg-body. This is because many HTML elements have no set color or background to style until you add them yourself. We’ve included them here for you just in case.
This is mentioned in the 5.3 blog post although I couldn't find it in the docs.
For those who also use bootstrap with react (or with react-bootstrap) there is a hack to propagate settings to <html>
and <body>
as follows:
Set data-attribute to the top-most component in your app, e.g.:
const App: React.FC = () => {
const { theme } = useTheme()
return (
<div data-bs-theme={theme}>
... the rest of providers & components
</div>
)
}
Add the similar code to your css / scss:
// Hack to set html background to proper color
html:has([data-bs-theme="dark"]),
body:has([data-bs-theme="dark"]) {
background-color: $body-bg-dark;
}
Prerequisites
Describe the issue
Does not apply Body Color in dark mode. When, I adding the
data-bs-theme="dark"
attribute to the<div>
element. This should be change text color in dark mode, but is still apply default (light) body color.But, When, adding the
data-bs-theme="dark"
attribute to the<html>
element. This does apply Body Color in dark mode.Reduced test cases
Does not apply Body Color in dark mode. When, I adding the
data-bs-theme="dark"
attribute to the<div>
element.But, When, adding the
data-bs-theme="dark"
attribute to the<html>
element. This does apply Body Color in dark mode.What operating system(s) are you seeing the problem on?
Windows
What browser(s) are you seeing the problem on?
Firefox
What version of Bootstrap are you using?
v5.3.0