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.
<!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
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