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

Asked on Jun 01, 2025

1 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.

← Back to All Questions