bootstrap-auto-dark-mode - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

package.json

		{
		"name": "bootstrap-auto-dark-mode",
		"version": "1.0.1",
		"description": "Switches the bootstrap >= 5.3 dark-mode automatically based on system settings.",
		"version": "1.1.0",
		"description": "Adds the missing auto dark mode to Bootstrap >= 5.3, which switches automatically, based on system settings.",
		"main": "index.js",
		@@ -6,0 +6,0 @@ "scripts": {

README.md

		# 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

		Use it by just including `bootstrap-auto-dark-mode.js` in your header and setting `data-bs-theme` to `auto`.

		```html
		<script src="./src/bootstrap-auto-dark-mode.js"></script>
		<html lang="en" data-bs-theme="auto">
		<head>
		<!-- you code -->
		<script src="./src/bootstrap-auto-dark-mode.js"></script>
		</head>
		<!-- your code -->
		…
		```

src/bootstrap-auto-dark-mode.js

		@@ -8,9 +8,12 @@ /**
		;(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()
		})()

index.html

Sorry, the diff of this file is not supported yet

New alerts