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:15:15 +02:00
parent e3892b149c
commit c7ccd49930
3 changed files with 36 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
README.md
View file

@ -1,12 +1,19 @@
# bootstrap-auto-dark-mode # bootstrap-auto-dark-mode
Include this script to set the bootstrap >= 5.3 dark-mode automatically based on system settings. This script adds the missing auto-dark mode to the new theme feature of Bootstrap 5.3.
The mode will switch automatically, also when the user changes the system settings while the page is shown. It switches the Bootstrap theme automatically between light and dark mode, depending on the system settings, if you set the `data-bs-theme` attribute of your <html> to `auto`.
## Usage ## Usage
```html Use it by just including `bootstrap-auto-dark-mode.js` in your header and setting `data-bs-theme` to `auto`.
<script src="./src/bootstrap-auto-dark-mode.js"></script>
```
```html
<html data-bs-theme="auto">
<head>
<!-- you code -->
<script src="./src/bootstrap-auto-dark-mode.js"></script>
</head>
<!-- your code -->
…
```

27
index.html
View file

@ -1,5 +1,5 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en" data-bs-theme="auto">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
@ -12,14 +12,33 @@
<h1>bootstrap-auto-dark-mode</h1> <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>This script adds an auto-dark mode to the new theme feature of Bootstrap 5.3.</p>
<p>Use it by just including <code>bootstrap-auto-dark-mode.js</code> in your header.</p> <p>It switches the Bootstrap theme automatically between light and dark mode, depending on the system settings, if
you set the <code>data-bs-theme</code> attribute of your <code>&lt;html></code> to <code>auto</code>.</p>
<p>Use it by just including <code>bootstrap-auto-dark-mode.js</code> in your header and setting <code>data-bs-theme</code> to <code></code>auto</code>.</p>
<code> <code>
&lt;script src="./src/bootstrap-auto-dark-mode.js">&lt;/script> <pre>
&lt;html data-bs-theme="<b class="text-success">auto</b>">
&lt;head>
[…]
<b class="text-success">&lt;script src="./src/bootstrap-auto-dark-mode.js">&lt;/script></b>
&lt;/head>
[…]
</pre>
</code> </code>
<h2>Switch manually</h2>
<button class="btn btn-primary" onclick="document.documentElement.setAttribute('data-bs-theme', 'light')">Light
mode
</button>
<button class="btn btn-primary" onclick="document.documentElement.setAttribute('data-bs-theme', 'dark')">Dark
mode
</button>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
crossorigin="anonymous"></script> crossorigin="anonymous"></script>

2
package.json
View file

@ -1,7 +1,7 @@
{ {
"name": "bootstrap-auto-dark-mode", "name": "bootstrap-auto-dark-mode",
"version": "1.0.1", "version": "1.0.1",
"description": "Switches the bootstrap >= 5.3 dark-mode automatically based on system settings.", "description": "Adds the missing auto dark mode to Bootstrap >= 5.3, which switches automatically, based on system settings.",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1" "test": "echo \"Error: no test specified\" && exit 1"