Color modes
Bootstrap shows its components in a light or a dark color mode. data-bs-theme="light" or data-bs-theme="dark" on a tag sets the mode for that tag and everything inside it.
Same code for both modes
The Bootstrap code of a component is the same in both modes. A skin with a dark mode sets the mode for the whole page, and the components follow it. With a skin that has no dark mode, the same code always shows light. Fixed colors such as bg-light or text-dark stay the same in both modes, while bg-body and text-body follow the mode.
One part in the other mode
The code changes only when one part of a page should have the other mode. Put that part inside a div with data-bs-theme="dark" for a dark part on a light page, or with data-bs-theme="light" for a light part on a dark page. bg-body and text-body give the part the background and text color of its mode.
- Code
<div data-bs-theme="dark" class="bg-body text-body p-3">
<div class="alert alert-primary" role="alert">A simple primary alert.</div>
</div>
- Result
Chameleon
The Chameleon skin has no dark mode. On a wiki with Chameleon, data-bs-theme="dark" also needs extra CSS with Bootstrap's dark colors; without it, the part stays light. This wiki has that CSS on MediaWiki:Common.css, marked "Bootstrap dark mode". An administrator can copy it to your wiki.
Examples
Each of these pages shows a component in light mode and dark mode:
- Accordion example 7
- Alert example 2
- Badge example 5
- Breadcrumb example 2
- Button example 5
- Button group example 2
- Card deck example 5
- Card example 2
- Card group example 7
- Carousel example 4
- Collapse example 3
- Dropdown example 2
- Jumbotron example 3
- List group example 3
- Modal example 3
- Navs and tabs example 3
- Navs and tabs example 4
- Offcanvas example 2
- Pagination example 2
- Popover example 4
- Progress example 2
- Table example 2
- Tooltip example 3
See also
- On this wiki
- External website
