added multiple theme selector, compltely removed dark mode checkbox in settings

src/js/app.js

@@ -18,7 +18,7 @@ socket.on('logging_in', function () {
 	toast('Logging in', 'loading', false, 'login-toast')
 })
 
-socket.on('init_autologin', function() {
+socket.on('init_autologin', function () {
 	let arl = localStorage.getItem('arl')
 	if (arl) socket.emit('login', arl)
 })
@@ -87,15 +87,10 @@ socket.on('logged_out', function () {
 function startApp() {
 	Downloads.init()
 	QualityModal.init()
-	Tabs.linkListeners()
+	Tabs.init()
 	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')) {

src/js/modules/components/settings-tab.js

@@ -11,20 +11,9 @@ const SettingsTab = new Vue({
 		defaultSettings: {},
 		lastUser: '',
 		spotifyUser: '',
-		darkMode: false,
 		slimDownloads: false
 	}),
 	computed: {
-		changeDarkMode: {
-			get() {
-				return this.darkMode
-			},
-			set(wantDarkMode) {
-				this.darkMode = wantDarkMode
-				document.documentElement.setAttribute('data-theme', wantDarkMode ? 'dark' : 'default')
-				localStorage.setItem('darkMode', wantDarkMode)
-			}
-		},
 		changeSlimDownloads: {
 			get() {
 				return this.slimDownloads
@@ -60,7 +49,6 @@ const SettingsTab = new Vue({
 			}
 
 			socket.emit('saveSettings', this.lastSettings, this.lastCredentials, changed ? this.lastUser : false)
-			console.log(this.darkMode)
 		},
 		loadSettings(settings, spotifyCredentials, defaults = null) {
 			if (defaults) {
@@ -104,7 +92,6 @@ const SettingsTab = new Vue({
 			this.spotifyUser = spotyUser
 		}
 
-		this.changeDarkMode = 'true' === localStorage.getItem('darkMode')
 		this.changeSlimDownloads = 'true' === localStorage.getItem('slimDownloads')
 	}
 }).$mount('#settings_tab')

src/js/modules/tabs.js

@@ -80,21 +80,21 @@ function linkListeners() {
  * @since		0.1.0
  */
 function handleSidebarClick(event) {
-	if (
-		!(
-			event.target.matches('.main_tablinks') ||
-			event.target.parentElement.matches('.main_tablinks') ||
-			event.target.parentElement.parentElement.matches('.main_tablinks')
-		)
-	)
-		return
+	const wantToChangeTab = event.target.matches('.main_tablinks') || event.target.parentElement.matches('.main_tablinks')
+	const wantToChangeTheme = event.target.matches('.theme_toggler')
 
-	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
+	if (!(wantToChangeTab || wantToChangeTheme)) return
+
+	let sidebarEl
+	let targetID
+
+	if (wantToChangeTab) {
+		sidebarEl = event.target.matches('.main_tablinks') ? event.target : event.target.parentElement
+		targetID = sidebarEl.id
+	} else {
+		sidebarEl = event.target
+		targetID = 'theme_toggler'
+	}
 
 	switch (targetID) {
 		case 'main_search_tablink':
@@ -118,13 +118,14 @@ function handleSidebarClick(event) {
 		case 'main_about_tablink':
 			changeTab(sidebarEl, 'main', 'about_tab')
 			break
-		case 'theme_selector':
-			if (!event.target.matches('.theme_toggler')) return
+		case 'theme_toggler':
+			document.querySelector('.theme_toggler--active').classList.remove('theme_toggler--active')
+			sidebarEl.classList.add('theme_toggler--active')
 
-			event.target.parentElement.querySelector('.theme_toggler.active').classList.remove('active')
-			event.target.classList.add('active')
+			let themeColor = sidebarEl.dataset.themeVariant
+			document.documentElement.setAttribute('data-theme', themeColor)
 
-			let wantDarkMode = event.target.id === 'dark'
+			localStorage.setItem('selectedTheme', themeColor)
 
 			document.querySelectorAll('*').forEach(el => {
 				el.style.transition = 'all 200ms ease-in-out'
@@ -138,9 +139,6 @@ function handleSidebarClick(event) {
 				document.documentElement.removeEventListener('transitionend', transitionHandler)
 			})
 
-			document.documentElement.setAttribute('data-theme', wantDarkMode ? 'dark' : 'default')
-			localStorage.setItem('darkMode', wantDarkMode)
-
 			break
 
 		default:
@@ -270,8 +268,21 @@ function backTab() {
 	TrackPreview.stopStackedTabsPreview()
 }
 
+function init() {
+	let selectedTheme = localStorage.getItem('selectedTheme')
+
+	if (selectedTheme) {
+		document.querySelector('.theme_toggler--active').classList.remove('theme_toggler--active')
+		document
+			.querySelector(`.theme_toggler[data-theme-variant="${selectedTheme}"]`)
+			.classList.add('theme_toggler--active')
+	}
+
+	linkListeners()
+}
+
 export default {
-	linkListeners,
+	init,
 	artistView,
 	albumView,
 	playlistView,