added expertimental theme toggler in sidebar

public/css/modules/sidebar.css

@@ -16,6 +16,17 @@
 	width: 200px;
 }
 
+#sidebar .main_tablinks:not(#theme_selector) {
+	display: flex;
+	align-items: center;
+	margin-top: 5px;
+	cursor: pointer;
+}
+
+#sidebar .main_tablinks:not(#theme_selector):hover {
+	background-color: #3e3e3e;
+}
+
 #sidebar .main_tablinks_text {
 	display: none;
 	display: inline-block;
@@ -31,17 +42,6 @@
 	visibility: visible;
 }
 
-#sidebar .main_tablinks:not(#theme_selector) {
-	display: flex;
-	align-items: center;
-	margin-top: 5px;
-	cursor: pointer;
-}
-
-#sidebar .main_tablinks:not(#theme_selector):hover {
-	background-color: #3e3e3e;
-}
-
 #sidebar .side_icon {
 	font-size: 30px;
 	padding: 9px;
@@ -53,27 +53,45 @@
 
 /* Theme selector */
 #theme_selector {
+	margin-top: 20px;
 	display: flex;
 	height: 50px;
 }
 
 #theme_togglers {
-	width: 100%;
 	display: flex;
+	opacity: 0;
+	visibility: hidden;
+	width: 100%;
+	justify-content: space-evenly;
+	align-items: center;
+	transition: all 50ms ease-in-out 200ms;
+}
+
+#sidebar:hover #theme_togglers {
+	position: relative;
+	opacity: 1;
+	visibility: visible;
 }
 
 #theme_togglers .theme_toggler {
-	width: 40px;
-	height: 40px;
+	width: 30px;
+	height: 30px;
 	border-radius: 1000px;
 	border: 1px solid var(--accent-color);
+	cursor: pointer;
+	transition: border 200ms ease-in-out;
 }
 
-#theme_togglers .theme_toggler.light {
+#theme_togglers .theme_toggler.active {
+	border-width: 3px;
+}
+
+#theme_togglers .theme_toggler#light {
 	background: white;
 }
 
-#theme_togglers .theme_toggler.dark {
+#theme_togglers .theme_toggler#dark {
 	background: #141414;
 }
 

public/index.html

@@ -56,13 +56,13 @@
 				<i class="material-icons side_icon">info</i>
 				<span class="main_tablinks_text">Info</span>
 			</span>
-			<!-- <span id="theme_selector" class="main_tablinks" role="link" aria-label="theme selector">
+			<span id="theme_selector" class="main_tablinks" role="link" aria-label="theme selector">
 				<i class="material-icons side_icon theme_selector_icon">brightness_3</i>
 				<div id="theme_togglers">
-					<div class="theme_toggler dark"></div>
-					<div class="theme_toggler light"></div>
+					<div id="dark" class="theme_toggler"></div>
+					<div id="light" class="theme_toggler active"></div>
 				</div>
-			</span> -->
+			</span>
 		</aside>
 		<main id="main_content">
 			<div id="middle_section">
@@ -564,10 +564,10 @@ <h2 class="page_heading">Settings</h2>
 							</div>
 
 							<div class="settings_group">
-								<label class="with_checkbox">
+								<!-- <label class="with_checkbox">
 									<input type="checkbox" v-model="changeDarkMode">
 									<span class="checkbox_text">Dark Mode</span>
-								</label>
+								</label> -->
 								<label class="with_checkbox">
 									<input type="checkbox" v-model="changeSlimDownloads">
 									<span class="checkbox_text">Slim download tab</span>

src/js/app.js

@@ -86,6 +86,11 @@ function startApp() {
 	Search.linkListeners()
 	TrackPreview.init()
 
+	if ('true' === localStorage.getItem('darkMode')) {
+		document.querySelector('.theme_toggler.active').classList.remove('active')
+		document.querySelector('.theme_toggler#dark').classList.add('active')
+	}
+
 	document.getElementById('logged_in_info').classList.add('hide')
 
 	if (localStorage.getItem('arl')) {
@@ -95,10 +100,13 @@ function startApp() {
 		$('#login_input_arl').val(arl)
 		document.getElementById('home_not_logged_in').classList.add('hide')
 	}
+
 	if ('true' === localStorage.getItem('slimDownloads')) {
 		document.getElementById('download_list').classList.add('slim')
 	}
+
 	let spotifyUser = localStorage.getItem('spotifyUser')
+
 	if (spotifyUser != '') {
 		socket.emit('update_userSpotifyPlaylists', spotifyUser)
 	}

src/js/modules/tabs.js

@@ -80,12 +80,21 @@ function linkListeners() {
  * @since		0.1.0
  */
 function handleSidebarClick(event) {
-	if (!(event.target.matches('.main_tablinks') || event.target.parentElement.matches('.main_tablinks'))) {
+	if (
+		!(
+			event.target.matches('.main_tablinks') ||
+			event.target.parentElement.matches('.main_tablinks') ||
+			event.target.parentElement.parentElement.matches('.main_tablinks')
+		)
+	)
 		return
-	}
 
-	let sidebarEl = event.target.matches('.main_tablinks') ? event.target : event.target.parentElement
-	let targetID = sidebarEl.getAttribute('id')
+	let sidebarEl = event.target.matches('.main_tablinks')
+		? event.target
+		: event.target.parentElement.matches('.main_tablinks')
+		? event.target.parentElement
+		: event.target.parentElement.parentElement
+	let targetID = sidebarEl.id
 
 	switch (targetID) {
 		case 'main_search_tablink':
@@ -109,6 +118,30 @@ function handleSidebarClick(event) {
 		case 'main_about_tablink':
 			changeTab(sidebarEl, 'main', 'about_tab')
 			break
+		case 'theme_selector':
+			if (!event.target.matches('.theme_toggler')) return
+
+			event.target.parentElement.querySelector('.theme_toggler.active').classList.remove('active')
+			event.target.classList.add('active')
+
+			let wantDarkMode = event.target.id === 'dark'
+
+			document.querySelectorAll('*').forEach(el => {
+				el.style.transition = 'all 200ms ease-in-out'
+			})
+
+			document.documentElement.addEventListener('transitionend', function transitionHandler() {
+				document.querySelectorAll('*').forEach(el => {
+					el.style.transition = ''
+				})
+
+				document.documentElement.removeEventListener('transitionend', transitionHandler)
+			})
+
+			document.documentElement.setAttribute('data-theme', wantDarkMode ? 'dark' : 'default')
+			localStorage.setItem('darkMode', wantDarkMode)
+
+			break
 
 		default:
 			break