Does not apply Body color in dark mode. When, adding the data-bs-theme="dark" attribute to the <div> element

harnishdesign commented 11 months ago

Prerequisites

[X] I have searched for duplicate or closed issues
[X] I have validated any HTML to avoid common problems
[X] I have read the contributing guidelines

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.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
  </head>
  <body>

    <div class="container py-4 bg-body-tertiary" data-bs-theme="dark">
      <h1>Title</h1>
      <p>This is Body Color. This should be change text color in dark mode, but is still apply default body color.</p>
    </div>

    <div class="container py-4 bg-body-tertiary">
      <h1>Title</h1>
      <p>This is Body Color.</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
  </body>
</html>

But, When, adding the data-bs-theme="dark" attribute to the <html> element. This does apply Body Color in dark mode.

<!doctype html>
<html lang="en" data-bs-theme="dark">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
  </head>
  <body>

    <div class="container py-4 bg-body-tertiary">
      <h1>Title</h1>
      <p>This is Body Color.</p>
    </div>

    <div class="container py-4 bg-body-tertiary">
      <h1>Title</h1>
      <p>This is Body Color.</p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
  </body>
</html>

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

rabuckley commented 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.

makcyd commented 5 months ago

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;
}

twbs / bootstrap