Bootstrap 5 Automatic Dark Mode Example

Download Back To CSSScript.Com

This script uses Window.matchMedia method and the CSS prefers-color-scheme query to detect if a user has light or dark mode set as their default. If dark mode is preferred, it automatically adds the data-bs-theme="dark" attribute to the tag to enable Bootstrap's dark theme.

Use it by just including bootstrap-auto-dark-mode.js in your header.

<script src="./src/bootstrap-auto-dark-mode.js"></script>