Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
3 tasks done
Tracked by #2223
harnishdesign opened this issue Sep 2, 2023 · 2 comments · May be fixed by #39295
Open
3 tasks done
Tracked by #2223

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

harnishdesign opened this issue Sep 2, 2023 · 2 comments · May be fixed by #39295
Labels
color mode css v5

Comments

@harnishdesign
Copy link

harnishdesign commented Sep 2, 2023 •
edited by julien-deramond
Loading

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
@rabuckley
Copy link
Contributor

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.

@julien-deramond julien-deramond mentioned this issue Sep 11, 2023
Merged
@twbs twbs deleted a comment Nov 15, 2023
@louismaximepiton louismaximepiton linked a pull request Feb 28, 2024 that will close this issue
Draft
8 tasks
@makcyd
Copy link

makcyd commented Mar 14, 2024 •
edited
Loading

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:

  1. 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>
  ) 
}
  1. 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;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
color mode css v5
Projects
v5.4.0
Status: Todo
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[PROTO]: handle data-bs-theme differently twbs/bootstrap
4 participants
@harnishdesign @makcyd @rabuckley @julien-deramond