Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<!-- Global dark mode --> <html data-bs-theme="dark"> <!-- Scoped dark section --> <section data-bs-theme="dark" class="p-5"> <div class="card"> <div class="card-body"> <h5 class="card-title">Dark Card</h5> <p class="card-text">Automatically dark-themed.</p> </div> </div> </section> <!-- Toggle with JavaScript --> <button onclick="document.documentElement.setAttribute('data-bs-theme', document.documentElement.getAttribute('data-bs-theme')=='dark'?'light':'dark')"> Toggle </button>
Result
Open