Bootstrap Dark Mode Switch
Bootstrap 5 Dark Mode Switch
Responsive Dark Mode theme switch built with Bootstrap 5 - toggle button that switches between dark and light themes.
Switch example
To allow visitors or users to toggle color modes, you’ll need to create a toggle element to control the
data-mdb-theme
attribute on the root element, <html>
. We’ve built a toggler in our
documentation that initially defers to a user’s current system color mode, but provides an option to override that
and pick a specific color mode.
Here’s a simplified version of code we used in own documentation navbar. You can see how it’s implemented using HTML and CSS from our own components. It is suggested to include the JavaScript at the top of your page to reduce potential screen flickering during reloading of your site.
If you want to see a working example of this switcher, preview it in the upper right corner.
Place the code from the snippet below in JS file that you will link on every page at the end of a
<body>
tag. This code will check your system default settings and set theme based on that.
The last part is added in the head of an head
of a <html>
page. It prevents
flickering of the colors by setting the saved theme before the whole page is loaded.
Examples of light and dark mode components
You can change the mode to dark only for the specific component. For example, to change the color mode of a
card, add data-mdb-theme="light"
or
data-mdb-theme="dark"
to the div with .card
class. Now, no matter the global color mode,
these cards will display with the specified theme value.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.