Bootstrap 5.3 provides support for both light and dark mode styles, making it easy to switch between them depending on the user's preference or the time of day.
To use Bootstrap 5.3's built-in light and dark mode styles, you'll need to include the Bootstrap CSS file in your project, either by downloading it from the Bootstrap website or by linking to it from a Content Delivery Network (CDN). Once you have the Bootstrap CSS file included in your project, you can use the built-in CSS classes to apply light or dark mode styles to your elements.
To switch between light and dark mode, Bootstrap uses a .mode-{color} class, where color can be either "light" or "dark".
<body class="mode-light"> <body class="mode-dark">
You can also use JavaScript to switch between the two modes depending on user preference or system preferences:
const darkMode = localStorage.getItem('dark-mode') === 'true' || false;
document.body.classList.toggle('mode-dark', darkMode);This will check if the user has previously set their preferred mode to dark in local storage, and if so, set the mode to dark.
Another way is by using Bootstrap's built-in .bg-{color} classes to change the background color, and .text-{color} classes to change the text color of your elements. These classes are context-aware, which means that they will automatically change to the appropriate color depending on the mode.
<div class="bg-primary text-white"> This text will be white on a primary background color in light mode, and on a inverted color on dark mode </div>
In summary, Bootstrap 5.3 provides built-in support for light and dark mode styles, which you can use by including the Bootstrap CSS file in your project and applying the appropriate CSS classes to your elements. You can also use JavaScript to switch between the two modes based on user preference or system settings. It's worth noting that the implementation details might change in future versions of bootstrap, therefore, it's a good idea to check the official documentation before implementing any of these functionalities.