A guide on changing the background color to complement the light/dark theme in Bootstrap 5.3

Question

A guide on changing the background color to complement the light/dark theme in Bootstrap 5.3

In the latest version of Bootstrap, 5.3, users have the ability to select a theme for their websites. The built-in options include a Dark theme and a Light theme.

For instance, by setting

<html data-bs-theme="dark">

, you can specify that the navbar should have a light color. Conversely, if you set

<html data-bs-theme="light">

, you may want the navbar to display dark background colors.

Is there a specific Bootstrap class that can be utilized to automatically switch the colors based on the selected theme?

Experimenting with the body-* classes did not yield the desired results. I am looking for a way to toggle between the opposite of the current text-body or bg-body colors.

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

How can I invert the background color based on the chosen light/dark theme in Bootstrap 5.3?

css twitter-bootstrap bootstrap-5

Answer 1

Answer №1

Mr. J's method will globally reverse the styles of .bg-body and .text-body. I wonder about its practicality since it might be easier to just switch to the opposite theme.

Utilizing Nested Color Modes (JS)

salif's recommendation, known as Bootstrap's nested color modes, seems like a smart choice:

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

By toggling both data-bs-theme attributes in your JS color mode switcher:

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84e6ebebf0f7f0f6e5f4c4b1aab7aab4a9e5e8f4ece5b5">[email protected]</a>/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>

Using Inverted Classes (CSS only)

If you prefer a CSS-only approach, create -inverted classes to interchange foreground and background styles:

.bg-body-inverted (inverted theme background) corresponds to --bs-body-color (theme foreground)
.text-body-inverted (inverted theme foreground) corresponds to --bs-body-bg (theme background)

These -inverted variations will invert foreground and background regardless of the 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dab8b5b5aea9aea8bbaa9aeff4e9f4eaf7bbb6aab2bbeb">[email protected]</a>/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>

Answer 2

Mr. J's method will globally reverse the styles of .bg-body and .text-body. I wonder about its practicality since it might be easier to just switch to the opposite theme.

Utilizing Nested Color Modes (JS)

salif's recommendation, known as Bootstrap's nested color modes, seems like a smart choice:

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

By toggling both data-bs-theme attributes in your JS color mode switcher:

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84e6ebebf0f7f0f6e5f4c4b1aab7aab4a9e5e8f4ece5b5">[email protected]</a>/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>

Using Inverted Classes (CSS only)

If you prefer a CSS-only approach, create -inverted classes to interchange foreground and background styles:

.bg-body-inverted (inverted theme background) corresponds to --bs-body-color (theme foreground)
.text-body-inverted (inverted theme foreground) corresponds to --bs-body-bg (theme background)

These -inverted variations will invert foreground and background regardless of the 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dab8b5b5aea9aea8bbaa9aeff4e9f4eaf7bbb6aab2bbeb">[email protected]</a>/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>

Answer 3

Answer №2

To accomplish this, you can utilize css variables in your code.

Start by specifying your primary theme colors in the :root selector

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --text-color: #343a40;
  --background-color: #f8f9fa;
}

Next, assign colors for the .bg-primary class based on the selected theme:

[data-theme=light] {
  --bg-primary: var(--secondary-color);
  --text-primary: var(--text-color);
}

And for the .bg-primary class under the "dark" theme:

[data-theme=dark] {
  --bg-primary: var(--primary-color);
  --text-primary: var(--background-color);
}

By switching between themes, the background and text colors for the nav should adjust accordingly.

Bootstrap 5.3 provides its own theme color variables:

https://i.sstatic.net/GK7W4.png

Feel free to utilize these predefined variables instead of creating your own.

I hope this explanation is helpful to you.

Answer 4

To accomplish this, you can utilize css variables in your code.

Start by specifying your primary theme colors in the :root selector

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --text-color: #343a40;
  --background-color: #f8f9fa;
}

Next, assign colors for the .bg-primary class based on the selected theme:

[data-theme=light] {
  --bg-primary: var(--secondary-color);
  --text-primary: var(--text-color);
}

And for the .bg-primary class under the "dark" theme:

[data-theme=dark] {
  --bg-primary: var(--primary-color);
  --text-primary: var(--background-color);
}

By switching between themes, the background and text colors for the nav should adjust accordingly.

Bootstrap 5.3 provides its own theme color variables:

https://i.sstatic.net/GK7W4.png

Feel free to utilize these predefined variables instead of creating your own.

I hope this explanation is helpful to you.

A guide on changing the background color to complement the light/dark theme in Bootstrap 5.3

Answer №1

Utilizing Nested Color Modes (JS)

Using Inverted Classes (CSS only)

Answer №2

Similar questions

Issue with jQuery Quicksand's CSS rendering in Internet Explorer and Firefox browsers, but not affecting Chrome

Styling CSS variables uniquely

Adding a button to the right of a text-field input in Vuetify app

Seamless animated loading gif as a looping background visual

On smaller screens in portrait mode, CSS automatically incorporates margin adjustments

Show the form when the button is clicked

Attempting to achieve the simultaneous display of an image overlay and image zoom when hovering over the mouse

The margin of the parent container is influencing the margin of the child element

How to centrally align tabs in Material-UI AppBar using ReactJS

Froala text area is unexpectedly visible when I attempt to cover it with a partially see-through mask

Problem with datepicker interface not aligning properly with Bootstrap grid

Struggling to connect CSS to HTML on Github Pages

Utilizing checkboxes to toggle the visibility of a div element with varying headings

The functionality of hiding and displaying div elements is malfunctioning

simultaneous image hover effect for all images

Chart.js encountered an uncaught TypeError when attempting to resolve the module specifier for "@kurkle/color"

What is the best way to assign a unique ID to every element in this situation?

Order of stacked divs with absolute positioning

NavigateToTop/BackToTheBeginning

Collapsing table row in Bootstrap upon button click within the same row