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
@github-project-automation github-project-automation bot moved this to To do in v5.3.2 Sep 3, 2023
@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
@julien-deramond julien-deramond removed this from v5.3.2 Sep 13, 2023
@github-project-automation github-project-automation bot moved this to To do in v5.3.3 Sep 13, 2023
@twbs twbs deleted a comment Nov 15, 2023
@julien-deramond julien-deramond moved this from To do to To analyze in v5.3.3 Nov 27, 2023
@julien-deramond julien-deramond removed this from v5.3.3 Feb 21, 2024
@github-project-automation github-project-automation bot moved this to To do in v5.3.4 Feb 21, 2024
@julien-deramond julien-deramond moved this from To do to To analyze in v5.3.4 Feb 21, 2024
@louismaximepiton louismaximepiton linked a pull request Feb 28, 2024 that will close this issue
Draft
8 tasks
@louismaximepiton louismaximepiton moved this to Todo in v5.4.0 Feb 28, 2024
@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