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`. Use it by just including `bootstrap-auto-dark-mode.js` in your header and setting `data-bs-theme` to `auto`.
```html ```html
<html data-bs-theme="auto"> <html lang="en" data-bs-theme="auto">
<head> <head>
<!-- you code --> <!-- you code -->
<script src="./src/bootstrap-auto-dark-mode.js"></script> <script src="./src/bootstrap-auto-dark-mode.js"></script>

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

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