How do I use the new color modes API in Bootstrap 5.3?

Asked on Sep 21, 2025

1 Answer

Bootstrap 5.3 introduced a new color modes API that allows you to easily switch between light and dark modes. Here's a basic example of how to implement it.

<!-- BEGIN COPY / PASTE -->
        <div class="container py-5">
            <h1 class="text-primary">Hello, World!</h1>
            <button id="toggleMode" class="btn btn-secondary">Toggle Color Mode</button>
        </div>

        <script>
            const toggleModeButton = document.getElementById('toggleMode');
            toggleModeButton.addEventListener('click', () => {
                document.documentElement.classList.toggle('dark-mode');
            });
        </script>
        <!-- END COPY / PASTE -->

Additional Comment:

The example uses a button to toggle between light and dark modes.
The `dark-mode` class is toggled on the `` element to switch modes.
Ensure your CSS is set up to handle the `dark-mode` class for the desired styling changes.
This example assumes you have defined styles for `.dark-mode` in your CSS.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions