shaack/bootstrap-auto-dark-mode
1
0
Fork 0
mirror of https://github.com/shaack/bootstrap-auto-dark-mode.git synced 2025-12-06 07:42:03 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

auto dark mode is now only enabled, if you set the data-bs-theme to auto

Browse source
This commit is contained in:
shaack 2023-06-18 10:16:13 +02:00
parent c7ccd49930
commit 72be3f1117
2 changed files with 10 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -9,7 +9,7 @@ It switches the Bootstrap theme automatically between light and dark mode, depen
Use it by just including `bootstrap-auto-dark-mode.js` in your header and setting `data-bs-theme` to `auto`.
```html
<html data-bs-theme="auto">
<html lang="en" data-bs-theme="auto">
<head>
<!-- you code -->
<script src="./src/bootstrap-auto-dark-mode.js"></script>

15
src/bootstrap-auto-dark-mode.js
View file

@ -5,11 +5,14 @@
*/
;(function () {
function updateTheme() {
document.querySelector("html").setAttribute("data-bs-theme",
window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light")
}
const htmlElement = document.querySelector("html")
if(htmlElement.getAttribute("data-bs-theme") === 'auto') {
function updateTheme() {
document.querySelector("html").setAttribute("data-bs-theme",
window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light")
}
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme)
updateTheme()
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateTheme)
updateTheme()
}
})()