From 72be3f11179b764909b64eed6b0c414ebb0c9b5e Mon Sep 17 00:00:00 2001 From: shaack Date: Sun, 18 Jun 2023 10:16:13 +0200 Subject: [PATCH] auto dark mode is now only enabled, if you set the data-bs-theme to `auto` --- README.md | 2 +- src/bootstrap-auto-dark-mode.js | 15 +++++++++------ 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index d201623..f34c9bd 100644 --- a/README.md +++ b/README.md @@ -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 - + diff --git a/src/bootstrap-auto-dark-mode.js b/src/bootstrap-auto-dark-mode.js index b445e32..3d5a98e 100644 --- a/src/bootstrap-auto-dark-mode.js +++ b/src/bootstrap-auto-dark-mode.js @@ -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() + } })()