Automatic application of the Boootstrap dark and light color schemes in a responsive manner

bootstrap-autotheme.js

document.addEventListener('DOMContentLoaded', (event) => {
        if (window.matchMedia('(prefers-color-scheme: light)').matches) {
            document.documentElement.setAttribute("data-bs-theme", "light");
        } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
            document.documentElement.setAttribute("data-bs-theme", "dark");
        }
});
window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', event => {
        if (event.matches) {
            document.documentElement.setAttribute("data-bs-theme", "light");
        }
});
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
        if (event.matches) {
            document.documentElement.setAttribute("data-bs-theme", "dark");
        }
});