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

initial commit

Browse source
This commit is contained in:
shaack 2023-06-08 17:09:24 +02:00
parent 7827c48249
commit 9120f208fd
6 changed files with 76 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.gitattributes vendored Normal file
View file

@ -0,0 +1,3 @@
# https://github.com/github/linguist#overrides
src/bootstrap-auto-dark-mode.js linguist-vendored=false
index.html linguist-documentation

1
.gitignore vendored Normal file
View file

@ -0,0 +1 @@
.idea

12
README.md
View file

@ -1,2 +1,12 @@
# bootstrap-auto-dark-mode # 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
<script src="./src/bootstrap-auto-dark-mode.js"></script>
```

27
index.html Normal file
View file

@ -0,0 +1,27 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<title>bootstrap-auto-dark-mode</title>
<script src="./src/bootstrap-auto-dark-mode.js"></script>
</head>
<body class="p-4">
<h1>bootstrap-auto-dark-mode</h1>
<p>This script automatically switches the Bootstrap theme between light and dark mode, depending on the system settings.</p>
<p>Use it by just including <code>bootstrap-auto-dark-mode.js</code> in your header.</p>
<code>
&lt;script src="./src/bootstrap-auto-dark-mode.js">&lt;/script>
</code>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
crossorigin="anonymous"></script>
</body>
</html>

19
package.json Normal file
View file

@ -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"
}

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

@ -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()
})()