refactor: Scrollbar styling refactor for webkit and firefox

frontend/src/App.vue

@@ -258,17 +258,17 @@ export default {
 		},
 		enableNightmode: () => {
 			document
-				.getElementsByTagName("body")[0]
+				.getElementsByTagName("html")[0]
 				.classList.add("night-mode");
 		},
 		disableNightmode: () => {
 			document
-				.getElementsByTagName("body")[0]
+				.getElementsByTagName("html")[0]
 				.classList.remove("night-mode");
 		},
 		enableChristmasMode: () => {
 			document
-				.getElementsByTagName("body")[0]
+				.getElementsByTagName("html")[0]
 				.classList.add("christmas-mode");
 		},
 		...mapActions("modalVisibility", ["closeCurrentModal"]),
@@ -320,6 +320,10 @@ export default {
 }
 
 .night-mode {
+	body {
+		background-color: var(--black) !important;
+	}
+
 	div {
 		color: var(--light-grey-2);
 	}
@@ -506,10 +510,6 @@ code {
 	color: var(--dark-red) !important;
 }
 
-body.night-mode {
-	background-color: var(--black) !important;
-}
-
 #toasts-container {
 	z-index: 10000 !important;
 
@@ -1852,4 +1852,36 @@ h4.section-title {
 		transform: translateX(16px);
 	}
 }
+
+html {
+	&,
+	* {
+		scrollbar-color: var(--primary-color) transparent;
+		scrollbar-width: thin;
+	}
+
+	&.night-mode {
+		&,
+		* {
+			scrollbar-color: var(--light-grey) transparent !important;
+		}
+
+		&::-webkit-scrollbar-thumb,
+		::-webkit-scrollbar-thumb {
+			background-color: var(--light-grey);
+		}
+	}
+}
+
+::-webkit-scrollbar {
+	width: 10px;
+}
+
+::-webkit-scrollbar-track {
+	background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+	background-color: var(--primary-color);
+}
 </style>

frontend/src/pages/Station/Sidebar/index.vue

@@ -157,21 +157,4 @@ export default {
 		margin-bottom: 10px;
 	}
 }
-
-/deep/ ::-webkit-scrollbar {
-	width: 10px;
-}
-
-/deep/ ::-webkit-scrollbar-track {
-	background-color: var(--white);
-	border: 1px solid var(--light-grey-3);
-}
-
-/deep/ ::-webkit-scrollbar-thumb {
-	background-color: var(--dark-grey);
-
-	&:hover {
-		filter: brightness(95%);
-	}
-}
 </style>

frontend/src/pages/Station/index.vue

@@ -1234,7 +1234,9 @@ export default {
 		this.socket.on("event:station.theme.updated", res => {
 			const { theme } = res.data;
 			this.station.theme = theme;
-			document.body.style.cssText = `--primary-color: var(--${theme})`;
+			document.getElementsByTagName(
+				"html"
+			)[0].style.cssText = `--primary-color: var(--${theme})`;
 		});
 
 		this.socket.on("event:station.name.updated", async res => {
@@ -1300,7 +1302,7 @@ export default {
 		}
 	},
 	beforeUnmount() {
-		document.body.style.cssText = "";
+		document.getElementsByTagName("html")[0].style.cssText = "";
 
 		if (this.mediasession) {
 			ms.removeListeners(0);
@@ -2078,7 +2080,9 @@ export default {
 							theme
 						});
 
-						document.body.style.cssText = `--primary-color: var(--${res.data.theme})`;
+						document.getElementsByTagName(
+							"html"
+						)[0].style.cssText = `--primary-color: var(--${res.data.theme})`;
 
 						this.setCurrentSong({
 							currentSong: res.data.currentSong,