diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..b73629d --- /dev/null +++ b/.gitattributes @@ -0,0 +1,3 @@ +# https://github.com/github/linguist#overrides +src/bootstrap-auto-dark-mode.js linguist-vendored=false +index.html linguist-documentation diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..485dee6 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.idea diff --git a/README.md b/README.md index 5bb379d..b08ee5e 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,12 @@ # bootstrap-auto-dark-mode -include this script to set the bootstrap > 5.3 dark-mode automatically based on browser or operating system + +Include this script to set the bootstrap > 5.3 dark-mode automatically based on system settings. + +The mode will switch automatically, also when the user changes the system settings while the page is shown. + +## Usage + +```html + +``` + diff --git a/index.html b/index.html new file mode 100644 index 0000000..18c9f2e --- /dev/null +++ b/index.html @@ -0,0 +1,27 @@ + + + + + + + bootstrap-auto-dark-mode + + + + +

bootstrap-auto-dark-mode

+ +

This script automatically switches the Bootstrap theme between light and dark mode, depending on the system settings.

+ +

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

+ + + <script src="./src/bootstrap-auto-dark-mode.js"></script> + + + + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..80e5af8 --- /dev/null +++ b/package.json @@ -0,0 +1,19 @@ +{ + "name": "bootstrap-auto-dark-mode", + "version": "1.0.0", + "description": "Switches the bootstrap >= 5.3 dark-mode automatically based on system settings.", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [ + "bootstrap", + "dark-mode" + ], + "repository": { + "type": "git", + "url": "git+https://github.com/shaack/bootstrap-auto-dark-mode" + }, + "author": "shaack.com", + "license": "MIT" +} diff --git a/src/bootstrap-auto-dark-mode.js b/src/bootstrap-auto-dark-mode.js new file mode 100644 index 0000000..b445e32 --- /dev/null +++ b/src/bootstrap-auto-dark-mode.js @@ -0,0 +1,15 @@ +/** + * Author and copyright: Stefan Haack (https://shaack.com) + * Repository: https://github.com/shaack/bootstrap-auto-dark-mode + * License: MIT, see file 'LICENSE' + */ + +;(function () { + 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() +})()