How can I add dark mode support using Bootstrap 5.3 theme utilities?

Asked on Jun 01, 2025

Answer

Bootstrap 5.3 introduces theme utilities that make it easy to implement dark mode. You can use CSS variables to switch themes dynamically.

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

        <script>
            const toggleThemeButton = document.getElementById('toggleTheme');
            toggleThemeButton.addEventListener('click', () => {
                document.body.classList.toggle('theme-dark');
            });
        </script>

        <style>
            :root {
                --bs-body-bg: #fff;
                --bs-body-color: #212529;
            }

            .theme-dark {
                --bs-body-bg: #212529;
                --bs-body-color: #fff;
            }

            body {
                background-color: var(--bs-body-bg);
                color: var(--bs-body-color);
            }
        </style>
        <!-- END COPY / PASTE -->

Additional Comment:

This example uses a button to toggle between light and dark themes.
CSS variables are used to define color schemes for both themes.
The class 'theme-dark' is toggled on the body to switch themes.
Adjust the CSS variables to customize the colors for your specific needs.

✅ Answered with Bootstrap 5 best practices.