Question 45990 in CSS Question posted in
Some basic documentation can be found here.

How to invert background color based on the light/dark theme in Bootstrap 5.3? – CSS

In Bootstrap 5.3, we are able to specify a theme to use for the site. Out of the box there are two supported theme Dark and Light.

If I set my <html data-bs-theme="dark">, I want to set the site navbar to a light color. At the same time, when setting <html data-bs-theme="light"> I want the navbar to have dark background colors.

If there a specific class in Bootstrap that can be used to invert the colors based on the current theme?

I tried using the body-* classes to accomplish, but that does not do what I want. I want to select the opposite of the current text-body or bg-body.

<nav class="navbar text-body bg-body">
       
</nav>

How to invert background color based on the light/dark theme in Bootstrap 5.3?

Tags:

2

Answers


  1. 0

    You can achieve this using css variables.

    First you define your main theme colours in :root

    :root {
  --bg-body-dark: #202124;
  --bg-body-light: #fff;
  --text-body-light: #191919;
  --text-body-dark: #f8f9fa;
}

    Then you assign a colour to use for the .bg-body class with the "light" theme:

    [data-bs-theme=light] {
  --bg-body: --bg-body-light;
  --text-body: --text-body-light;
}

    And which colour to use for .bg-body with the "dark" theme:

    [data-bs-theme=dark] {
  --bg-body: --bg-body-dark;
  --text-body: --text-body-dark;
}

    Now when you toggle between themes, the nav background and text colour should update accordingly.

    Bootstrap 5.3 defines it’s own theme colour variables:

    bootstrap 5.3 theme variables

    Feel free to use these instead of the ones I declared above.

    I hope this helps.

    Login or Signup to reply.
  2. 0

    Mr. J’s approach will invert .bg-body and .text-body globally. I’m not sure how useful that is because you could (should) just use the opposite theme in that case.

    Nested color modes (JS)

    I would use salif’s suggestion, which Bootstrap calls nested color modes:

    <body data-bs-theme="dark">
  <nav id="nav" data-bs-theme="light" class="navbar text-body bg-body">

    Then in your JS color mode toggler, flip both data-bs-theme attributes:

    window.onload = function() {
  document.getElementById('themer').addEventListener('click', () => {
    const current = document.documentElement.getAttribute('data-bs-theme')
    const inverted = current == 'dark' ? 'light' : 'dark'
    document.documentElement.setAttribute('data-bs-theme', inverted)
    document.getElementById('nav').setAttribute('data-bs-theme', current)
  })
}
    <html data-bs-theme="dark">

<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <nav data-bs-theme="light" id="nav" class="navbar text-body bg-body">
    <div class="container-fluid">
      <span class="navbar-brand mb-0 h1">Inverted navbar</span>
      <a id="themer" href="#" class="btn btn-primary m-3" role="button" data-bs-toggle="button">Toggle theme</a>
    </div>
  </nav>
</body>

</html>

    Inverted classes (CSS only)

    If you want to do it with just CSS, define -inverted classes to swap foreground and background:

    • .bg-body-inverted (inverted theme background) gets mapped to --bs-body-color (theme foreground)
    • .text-body-inverted (inverted theme foreground) gets mapped to --bs-body-bg (theme background)

    These -inverted versions will invert fg/bg regardless of color mode:

    .bg-body-inverted {
  background-color: var(--bs-body-color) !important;
}

.text-body-inverted {
  color: var(--bs-body-bg) !important;
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<body data-bs-theme="dark">
  <nav class="navbar text-body-inverted bg-body-inverted">
    <div class="container-fluid">
      <span class="navbar-brand text-body-inverted mb-0 h1">Inverted navbar</span>
    </div>
  </nav>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search