finish fixing color switcher

layouts/partials/color-switcher.html

@@ -1,5 +1,5 @@
 <div class="color-switcher">
-<div class="js-toggle-wrapper">
+	<div class="js-toggle-wrapper">
 		<div class="js-toggle" style="display: none">
 			<div class="js-toggle-track">
 				<div class="js-toggle-track-check">
@@ -16,10 +16,10 @@
 			<div class="js-toggle-thumb"></div>
 			<input class="js-toggle-screenreader-only" type="checkbox" aria-label="Switch between Dark and Light mode">
 		</div>
-</div>
+	</div>
 </div>
 <style>
-/*
+	/*
 * Dark Mode Toggle
 * Copyright (c) 2015 instructure-react
 * Forked from Dan Abramov's personal blog
@@ -27,12 +27,12 @@
 * MIT License
 **/
 
-.js-toggle-wrapper {
+	.js-toggle-wrapper {
 		display: table;
 		margin: 0 auto;
-}
+	}
 
-.js-toggle {
+	.js-toggle {
 		touch-action: pan-x;
 		display: inline-block;
 		position: relative;
@@ -44,9 +44,9 @@
 		user-select: none;
 		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 		-webkit-tap-highlight-color: transparent;
-}
+	}
 
-.js-toggle-screenreader-only {
+	.js-toggle-screenreader-only {
 		border: 0;
 		clip: rect(0 0 0 0);
 		height: 1px;
@@ -55,18 +55,18 @@
 		padding: 0;
 		position: absolute;
 		width: 1px;
-}
+	}
 
-.js-toggle-track {
+	.js-toggle-track {
 		width: 50px;
 		height: 24px;
 		padding: 0;
 		border-radius: 30px;
 		background-color: #808080;
 		transition: all 0.2s ease;
-}
+	}
 
-.js-toggle-track-check {
+	.js-toggle-track-check {
 		position: absolute;
 		width: 17px;
 		height: 17px;
@@ -78,14 +78,14 @@
 		line-height: 0;
 		opacity: 0;
 		transition: opacity 0.25s ease;
-}
+	}
 
-.js-toggle--checked .js-toggle-track-check {
+	.js-toggle--checked .js-toggle-track-check {
 		opacity: 1;
 		transition: opacity 0.25s ease;
-}
+	}
 
-.js-toggle-track-x {
+	.js-toggle-track-x {
 		position: absolute;
 		width: 17px;
 		height: 17px;
@@ -97,13 +97,13 @@
 		line-height: 0;
 		opacity: 1;
 		transition: opacity 0.25s ease;
-}
+	}
 
-.js-toggle--checked .js-toggle-track-x {
+	.js-toggle--checked .js-toggle-track-x {
 		opacity: 0;
-}
+	}
 
-.js-toggle-thumb {
+	.js-toggle-thumb {
 		position: absolute;
 		top: 1px;
 		left: 1px;
@@ -114,75 +114,74 @@
 		box-sizing: border-box;
 		transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
 		transform: translateX(0);
-}
+	}
 
-.js-toggle--checked .js-toggle-thumb {
+	.js-toggle--checked .js-toggle-thumb {
 		transform: translateX(26px);
 		border-color: #19ab27;
-}
+	}
 
-.js-toggle--focus {
+	.js-toggle--focus {
 		filter: drop-shadow(0px 0px 3px var(--primary-accent));
 		outline: 1px solid var(--ui-text);
 		outline-offset: 6px;
-}
+	}
 
-.js-toggle:active .js-toggle-thumb {
+	.js-toggle:active .js-toggle-thumb {
 		box-shadow: 0px 0px 5px 5px var(--primary-accent);
-}
+	}
 </style>
 <script>
-var body = document.body;
+	var body = document.body;
-var switcher = document.getElementsByClassName('js-toggle');
+	var switchers = document.getElementsByClassName('js-toggle');
-var input = document.getElementsByClassName('js-toggle-screenreader-only');
 
-console.log(switcher);
+	for (switcher of switchers) {
+		switcher.removeAttribute("style");
+		var input = switcher.querySelector('.js-toggle-screenreader-only')
 
-for (s of switcher) {
+		input.addEventListener('focus', (event) => {
-	s.removeAttribute("style");
-};
-
-input.addEventListener('focus', (event) => {
 			switcher.classList.add('js-toggle--focus');
-});
+		});
 
-input.addEventListener('focusout', (event) => {
+		input.addEventListener('focusout', (event) => {
 			switcher.classList.remove('js-toggle--focus');
-});
+		});
 
-//Click on dark mode icon. Add dark mode classes and wrappers. Store user preference through sessions
+		//Click on dark mode icon. Add dark mode classes and wrappers. Store user preference through sessions
-switcher.addEventListener("click", function() {
+		switcher.addEventListener("click", function () {
+			for (switcher of switchers) {
 				this.classList.toggle('js-toggle--checked');
+			}
 			//this.classList.add('js-toggle--focus');
-//If dark mode is selected
+			//If dark mode is selected
-if (this.classList.contains('js-toggle--checked')) {
+			if (this.classList.contains('js-toggle--checked')) {
 				body.classList.remove('light-mode');
 				body.classList.add('dark-mode');
 				//Save user preference in storage
 				localStorage.setItem('colorMode', 'dark');
-} else {
+			} else {
 				body.classList.remove('dark-mode');
 				body.classList.add('light-mode');
-	setTimeout(function() {
+				setTimeout(function () {
 					localStorage.setItem('colorMode', 'light');
 				}, 100);
-}
+			}
-})
+		})
+	};
 
-if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+	if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
 		localStorage.setItem('colorMode', 'dark');
-}
+	}
 
-//Check Storage. Keep user preference on page reload
+	//Check Storage. Keep user preference on page reload
-if (localStorage.getItem('colorMode') == 'dark') {
+	if (localStorage.getItem('colorMode') == 'dark') {
-//body.classList.add('dark-mode');
+		for (switcher of switchers) {
 			switcher.classList.add('js-toggle--checked');
+		}
 		body.classList.add('dark-mode');
-}
+	};
-if (localStorage.getItem('colorMode') == 'light') {
+	if (localStorage.getItem('colorMode') == 'light') {
-//body.classList.add('dark-mode');
+		body.classList.add('light-mode');
-
+	};
-body.classList.add('light-mode');
-}
 
 </script>