✨ Use attribute to change theme on click

BetaHuhn · BetaHuhn · commit f305a0338b7a · 2021-04-07T17:54:39.000+02:00
diff --git a/dist/drkmd-js.min.js b/dist/drkmd-js.min.js
diff --git a/example/index.html b/example/index.html
@@ -29,13 +29,18 @@
 <body>
     <h1>Darkmode example</h1>
     <p>This is an example</p>
+
+    <!-- <p data-drkmd-toggle>Toggle theme</p>
+
+    <p data-drkmd-to-light>To light</p>
+    <p data-drkmd-to-dark>To dark</p> -->
 </body>
 
 <!-- Basic usage -->
-<script src="../dist/drkmd-js.min.js" data-drkmd></script>
+<script src="../dist/drkmd-js.min.js" data-drkmd-attach></script>
 
 <!-- Specify options -->
-<!--<script src="../dist/drkmd-js.min.js" data-drkmd='{ "defaultTheme": "dark", "cookie": true }'></script>-->
+<!--<script src="../dist/drkmd-js.min.js" data-drkmd-opts='{ "defaultTheme": "dark", "cookie": true }'></script>-->
 
 <!-- Programmatic usage -->
 <!-- <script src="../dist/drkmd-js.min.js"></script>
diff --git a/src/drkmd.js b/src/drkmd.js
@@ -7,7 +7,7 @@ export default class Darkmode {
 			bottom: '20px',
 			right: '20px',
 			left: 'unset',
-			attachButton: true,
+			attach: false,
 			buttonLight: '#fff',
 			buttonDark: '#000',
 			events: true,
diff --git a/src/index.js b/src/index.js
@@ -2,20 +2,55 @@ import Darkmode, { IS_BROWSER } from './drkmd'
 export default Darkmode
 
 const detect = () => {
-	const elem = document.querySelector('[data-drkmd]')
+	const optsElem = document.querySelector('[data-drkmd-opts]')
+	const attachBtnElem = document.querySelector('[data-drkmd-attach]')
 
-	if (!elem) {
-		window.darkmode = Darkmode
+	const toggleElems = document.querySelectorAll('[data-drkmd-toggle]')
+	const toLightElems = document.querySelectorAll('[data-drkmd-to-light]')
+	const toDarkElems = document.querySelectorAll('[data-drkmd-to-dark]')
+
+	// If no attributes are found, assume programmatic usage and attach Darkmode class to window
+	if (!optsElem && !attachBtnElem && toggleElems.length < 1 && toLightElems.length < 1 && toDarkElems.length < 1) {
+		window.Darkmode = Darkmode
 
 		return
 	}
 
-	const attribute = elem.getAttribute('data-drkmd') || '{}'
-	const options = JSON.parse(attribute)
+	// Parse options specified in data-drkmd-opts attribute
+	const attributeValue = optsElem && optsElem.getAttribute('data-drkmd-opts') || '{}'
+	const options = JSON.parse(attributeValue)
 
 	window.darkmode = new Darkmode(options)
 
-	if (window.darkmode.options.attachButton) {
+	// Attach event listeners to data-drkmd-toggle elements
+	if (toggleElems.length > 0) {
+		for (let i = 0; i < toggleElems.length; i++) {
+			toggleElems[i].addEventListener('click', () => {
+				window.darkmode.toggle()
+			})
+		}
+	}
+
+	// Attach event listeners to data-drkmd-to-light elements
+	if (toLightElems.length > 0) {
+		for (let i = 0; i < toLightElems.length; i++) {
+			toLightElems[i].addEventListener('click', () => {
+				window.darkmode.toLight()
+			})
+		}
+	}
+
+	// Attach event listeners to data-drkmd-to-dark elements
+	if (toDarkElems.length > 0) {
+		for (let i = 0; i < toDarkElems.length; i++) {
+			toDarkElems[i].addEventListener('click', () => {
+				window.darkmode.toDark()
+			})
+		}
+	}
+
+	// Attach the default toggle button to the page (data-drkmd-attach or option)
+	if (window.darkmode.options.attach || attachBtnElem) {
 		window.darkmode.attach()
 	}
 }
