delegated theme changing to sidebar component

src/js/app.js

@@ -20,7 +20,6 @@ import Search from '@/js/search.js'
 
 function startApp() {
 	mountApp()
-	setCurrentUserTheme()
 
 	Downloads.init()
 	QualityModal.init()
@@ -43,23 +42,6 @@ function initClient() {
 document.addEventListener('DOMContentLoaded', startApp)
 window.addEventListener('pywebviewready', initClient)
 
-/* ===== General functions ===== */
-
-/**
- * Sets the current theme according to
- * the localStorage saved theme.
- */
-function setCurrentUserTheme() {
-	let selectedTheme = localStorage.getItem('selectedTheme')
-
-	if (selectedTheme) {
-		let activeClass = 'theme_toggler--active'
-
-		document.querySelector(`.${activeClass}`).classList.remove(activeClass)
-		document.querySelector(`.theme_toggler[data-theme-variant="${selectedTheme}"]`).classList.add(activeClass)
-	}
-}
-
 /* ===== Socketio listeners ===== */
 
 // Debug messages for socketio

src/js/components/TheSidebar.vue

@@ -31,9 +31,21 @@
 		<span id="theme_selector" class="main_tablinks" role="link" aria-label="theme selector">
 			<i class="material-icons side_icon side_icon--theme">palette</i>
 			<div id="theme_togglers">
-				<div class="theme_toggler" data-theme-variant="purple"></div>
-				<div class="theme_toggler" data-theme-variant="dark"></div>
-				<div class="theme_toggler theme_toggler--active" data-theme-variant="light"></div>
+				<div
+					class="theme_toggler theme_toggler--purple"
+					:class="{ 'theme_toggler--active': activeTheme === 'purple' }"
+					@click="changeTheme('purple')"
+				/>
+				<div
+					class="theme_toggler theme_toggler--dark"
+					:class="{ 'theme_toggler--active': activeTheme === 'dark' }"
+					@click="changeTheme('dark')"
+				/>
+				<div
+					class="theme_toggler theme_toggler--light"
+					:class="{ 'theme_toggler--active': activeTheme === 'light' }"
+					@click="changeTheme('light')"
+				/>
 			</div>
 		</span>
 		<div id="network-status" :class="{ online: appOnline, offline: !appOnline }">
@@ -56,10 +68,12 @@ export default {
 	name: 'the-sidebar',
 	data() {
 		return {
-			appOnline: null
+			appOnline: null,
+			activeTheme: 'light'
 		}
 	},
 	mounted() {
+		/* === Online status handling === */
 		this.appOnline = navigator.onLine
 
 		window.addEventListener('online', () => {
@@ -69,6 +83,31 @@ export default {
 		window.addEventListener('offline', () => {
 			this.appOnline = false
 		})
+
+		/* === Current theme handling === */
+		this.activeTheme = localStorage.getItem('selectedTheme') || 'light'
+	},
+	methods: {
+		changeTheme(newTheme) {
+			if (newTheme === this.activeTheme) return
+
+			this.activeTheme = newTheme
+			document.documentElement.setAttribute('data-theme', newTheme)
+			localStorage.setItem('selectedTheme', newTheme)
+
+			// Animating everything to have a smoother theme switch
+			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)
+			})
+		}
 	}
 }
 </script>

src/js/tabs.js

@@ -76,20 +76,11 @@ function handleSidebarClick(event) {
 	const { target } = event
 
 	const wantToChangeTab = target.matches('.main_tablinks') || target.parentElement.matches('.main_tablinks')
-	const wantToChangeTheme = target.matches('.theme_toggler')
 
-	if (!(wantToChangeTab || wantToChangeTheme)) return
+	if (!wantToChangeTab) return
 
-	let sidebarEl
-	let targetID
-
-	if (wantToChangeTab) {
-		sidebarEl = target.matches('.main_tablinks') ? target : target.parentElement
-		targetID = sidebarEl.id
-	} else {
-		sidebarEl = target
-		targetID = 'theme_toggler'
-	}
+	let sidebarEl = target.matches('.main_tablinks') ? target : target.parentElement
+	let targetID = sidebarEl.id
 
 	switch (targetID) {
 		case 'main_search_tablink':
@@ -113,31 +104,6 @@ function handleSidebarClick(event) {
 		case 'main_about_tablink':
 			changeTab(sidebarEl, 'main', 'about_tab')
 			break
-		case 'theme_toggler':
-			document.querySelector('.theme_toggler--active').classList.remove('theme_toggler--active')
-			sidebarEl.classList.add('theme_toggler--active')
-
-			const {
-				dataset: { themeVariant }
-			} = sidebarEl
-
-			document.documentElement.setAttribute('data-theme', themeVariant)
-
-			localStorage.setItem('selectedTheme', themeVariant)
-
-			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)
-			})
-
-			break
 
 		default:
 			break

src/styles/scss/_sidebar.scss

@@ -123,15 +123,15 @@ $sidebar-delay: 75ms;
 			border-width: 3px;
 		}
 
-		&[data-theme-variant='light'] {
+		&--light {
 			background: white;
 		}
 
-		&[data-theme-variant='dark'] {
+		&--dark {
 			background: hsl(0, 0%, 8%);
 		}
 
-		&[data-theme-variant='purple'] {
+		&--purple {
 			background: hsl(261, 85%, 37%);
 		}
 	}