Moved from scss to css variables

frontend/src/App.vue

@@ -182,18 +182,48 @@ export default {
 <style lang="scss">
 @import "./styles/global.scss";
 
+:root {
+	--primary-color: var(--blue);
+	--blue: rgb(2, 166, 242);
+	--light-blue: rgb(163, 224, 255);
+	--dark-blue: rgb(0, 102, 244);
+	--teal: rgb(0, 209, 178);
+	--purple: rgb(143, 40, 140);
+	--light-purple: rgb(170, 141, 216);
+	--yellow: rgb(241, 196, 15);
+	--light-pink: rgb(228, 155, 166);
+	--dark-pink: rgb(234, 72, 97);
+	--light-orange: rgb(255, 94, 0);
+	--dark-orange: rgb(250, 50, 0);
+	--green: rgb(68, 189, 50);
+	--red: rgb(231, 77, 60);
+	--white: rgb(255, 255, 255);
+	--black: rgb(0, 0, 0);
+	--light-grey: rgb(245, 245, 245);
+	--light-grey-2: rgb(221, 221, 221); //was night-mode-text
+	--light-grey-3: rgb(195, 193, 195); //was light-grey-2
+	--grey: rgb(107, 107, 107);
+	--grey-2: rgb(113, 113, 113);
+	--grey-3: rgb(126, 126, 126);
+	--dark-grey: rgb(77, 77, 77);
+	--dark-grey-2: rgb(51, 51, 51);
+	--dark-grey-3: rgb(34, 34, 34); //was night-mode-bg-secondary
+	--dark-grey-4: rgb(26, 26, 26); // was dark-grey-3
+	--youtube: rgb(189, 46, 46);
+}
+
 .night-mode {
 	div {
-		// background-color: #000;
-		color: $night-mode-text;
+		// background-color: var(--black);
+		color: var(--light-grey-2);
 	}
 
 	#toasts-container .toast {
-		color: #333;
-		background-color: $light-grey-2 !important;
+		color: var(--dark-grey-2);
+		background-color: var(--light-grey-3) !important;
 
 		&:last-of-type {
-			background-color: $light-grey !important;
+			background-color: var(--light-grey) !important;
 		}
 	}
 
@@ -203,21 +233,21 @@ export default {
 	h4,
 	h5,
 	h6 {
-		color: #fff !important;
+		color: var(--white) !important;
 	}
 
 	p:not(.help),
 	label {
-		color: $night-mode-text !important;
+		color: var(--light-grey-2) !important;
 	}
 
 	.content {
-		background-color: $night-mode-bg-secondary !important;
+		background-color: var(--dark-grey-3) !important;
 	}
 }
 
 body.night-mode {
-	background-color: #000 !important;
+	background-color: var(--black) !important;
 }
 
 #toasts-container {
@@ -225,10 +255,10 @@ body.night-mode {
 
 	.toast {
 		font-weight: 600;
-		background-color: $dark-grey !important;
+		background-color: var(--dark-grey) !important;
 
 		&:last-of-type {
-			background-color: $dark-grey-2 !important;
+			background-color: var(--dark-grey-2) !important;
 		}
 	}
 }
@@ -239,8 +269,8 @@ html {
 }
 
 body {
-	background-color: $light-grey;
-	color: $dark-grey;
+	background-color: var(--light-grey);
+	color: var(--dark-grey);
 	height: 100%;
 	font-family: "Inter", Helvetica, Arial, sans-serif;
 }
@@ -283,7 +313,7 @@ textarea {
 }
 
 a {
-	color: $primary-color;
+	color: var(--primary-color);
 	text-decoration: none;
 }
 
@@ -301,8 +331,8 @@ a {
 
 .alert {
 	padding: 20px;
-	color: $white;
-	background-color: $red;
+	color: var(--white);
+	background-color: var(--red);
 	position: fixed;
 	top: 50px;
 	right: 50px;
@@ -321,9 +351,9 @@ a {
 		text-align: center;
 		padding: 7.5px 6px;
 		border-radius: 2px;
-		background-color: $dark-grey;
+		background-color: var(--dark-grey);
 		font-size: 0.9em;
-		color: $white;
+		color: var(--white);
 		content: attr(data-tooltip);
 		opacity: 0;
 		transition: all 0.2s ease-in-out 0.1s;
@@ -390,7 +420,7 @@ a {
 
 .select {
 	&:after {
-		border-color: $musare-blue;
+		border-color: var(--primary-color);
 		border-width: 1.5px;
 		margin-top: -3px;
 	}
@@ -402,7 +432,7 @@ a {
 
 .button:focus,
 .button:active {
-	border-color: #dbdbdb !important;
+	border-color: var(--light-grey-2) !important;
 }
 
 .input:focus,
@@ -411,7 +441,7 @@ a {
 .textarea:active,
 .select select:focus,
 .select select:active {
-	border-color: $primary-color !important;
+	border-color: var(--primary-color) !important;
 }
 
 button.delete:focus {
@@ -423,49 +453,29 @@ button.delete:focus {
 }
 
 .button {
-	&.is-success {
-		background-color: $green !important;
+	&:hover,
+	&:focus {
+		filter: brightness(95%);
+	}
 
-		&:hover,
-		&:focus {
-			background-color: darken($green, 5%) !important;
-		}
+	&.is-success {
+		background-color: var(--green) !important;
 	}
 
 	&.is-primary {
-		background-color: $primary-color !important;
-
-		&:hover,
-		&:focus {
-			background-color: darken($primary-color, 5%) !important;
-		}
+		background-color: var(--primary-color) !important;
 	}
 
 	&.is-danger {
-		background-color: $red !important;
-
-		&:hover,
-		&:focus {
-			background-color: darken($red, 5%) !important;
-		}
+		background-color: var(--red) !important;
 	}
 
 	&.is-info {
-		background-color: $musare-blue !important;
-
-		&:hover,
-		&:focus {
-			background-color: darken($musare-blue, 5%) !important;
-		}
+		background-color: var(--primary-color) !important;
 	}
 
 	&.is-warning {
-		background-color: $yellow !important;
-
-		&:hover,
-		&:focus {
-			background-color: darken($yellow, 5%) !important;
-		}
+		background-color: var(--yellow) !important;
 	}
 }
 
@@ -511,7 +521,7 @@ button.delete:focus {
 		height: 36px;
 		border-radius: 3px 0 0 3px;
 		border-right: 0;
-		border-color: $light-grey-2;
+		border-color: var(--light-grey-3);
 	}
 
 	.button {
@@ -574,7 +584,7 @@ h4.section-title {
 	align-items: center;
 	justify-content: space-between;
 	padding: 7.5px;
-	border: 1px solid $light-grey-2;
+	border: 1px solid var(--light-grey-3);
 	border-radius: 3px;
 
 	.item-thumbnail {
@@ -614,7 +624,7 @@ h4.section-title {
 
 		i {
 			cursor: pointer;
-			color: #4a4a4a;
+			color: var(--dark-grey);
 
 			&:hover,
 			&:focus {
@@ -627,25 +637,25 @@ h4.section-title {
 		}
 
 		.play-icon {
-			color: $green;
+			color: var(--green);
 		}
 
 		.edit-icon,
 		.view-icon {
-			color: $primary-color;
+			color: var(--primary-color);
 		}
 
 		.hide-icon {
-			color: #bdbdbd;
+			color: var(--light-grey-3);
 		}
 
 		.stop-icon,
 		.delete-icon {
-			color: $red;
+			color: var(--red);
 		}
 
 		.report-icon {
-			color: $yellow;
+			color: var(--yellow);
 		}
 	}
 }

frontend/src/components/Modal.vue

@@ -48,22 +48,22 @@ export default {
 .night-mode {
 	.modal-card-head,
 	.modal-card-foot {
-		background-color: $night-mode-bg-secondary;
-		border-color: #333;
+		background-color: var(--dark-grey-3);
+		border-color: var(--dark-grey-2);
 	}
 
 	.modal-card-body {
-		background-color: #111 !important;
+		background-color: var(--dark-grey-4) !important;
 	}
 
 	.modal-card-title {
-		color: #fff;
+		color: var(--white);
 	}
 
 	p,
 	label,
 	td {
-		color: $night-mode-text !important;
+		color: var(--light-grey-2) !important;
 	}
 
 	h1,
@@ -72,7 +72,7 @@ export default {
 	h4,
 	h5,
 	h6 {
-		color: #fff !important;
+		color: var(--white) !important;
 	}
 }
 

frontend/src/components/Sidebar.vue

@@ -25,23 +25,23 @@ export default {
 
 .night-mode {
 	.sidebar {
-		background-color: $night-mode-bg-secondary;
+		background-color: var(--dark-grey-3);
 
 		.sidebar-title {
-			color: #fff;
+			color: var(--white);
 		}
 
 		* {
-			color: $night-mode-text;
+			color: var(--light-grey-2);
 		}
 	}
 }
 
 .sidebar-title {
-	background-color: rgb(3, 169, 244);
+	background-color: var(--primary-color);
 	text-align: center;
 	padding: 10px;
-	color: $white;
+	color: var(--white);
 	font-weight: 600;
 	font-size: 20px;
 }

frontend/src/components/layout/MainFooter.vue

@@ -49,7 +49,7 @@ export default {
 	footer.footer,
 	footer.footer .container,
 	footer.footer .container .footer-content {
-		background-color: $night-mode-bg-secondary;
+		background-color: var(--dark-grey-3);
 	}
 }
 
@@ -62,7 +62,7 @@ export default {
 	border-radius: 33% 33% 0% 0% / 7% 7% 0% 0%;
 	box-shadow: 0 4px 8px 0 rgba(3, 169, 244, 0.4),
 		0 6px 20px 0 rgba(3, 169, 244, 0.2);
-	background-color: $white;
+	background-color: var(--white);
 	width: 100%;
 	height: 160px;
 	font-size: 16px;
@@ -96,12 +96,12 @@ export default {
 	#footer-links {
 		order: 2;
 		:not(:last-child) {
-			border-right: solid 1px $primary-color;
+			border-right: solid 1px var(--primary-color);
 		}
 
 		a {
 			padding: 0 7px;
-			color: $primary-color;
+			color: var(--primary-color);
 
 			&:first-of-type {
 				padding: 0 7px 0 0;
@@ -112,7 +112,7 @@ export default {
 			}
 
 			&:hover {
-				color: $primary-color;
+				color: var(--primary-color);
 				text-decoration: underline;
 			}
 		}

frontend/src/components/layout/MainHeader.vue

@@ -114,17 +114,17 @@ export default {
 
 .night-mode {
 	.nav {
-		background-color: $night-mode-bg-secondary !important;
+		background-color: var(--dark-grey-3) !important;
 	}
 
 	.nav-item {
-		color: $night-mode-text !important;
+		color: var(--light-grey-2) !important;
 	}
 }
 
 .nav {
 	flex-shrink: 0;
-	background-color: $primary-color;
+	background-color: var(--primary-color);
 	height: 64px;
 	border-radius: 0% 0% 33% 33% / 0% 0% 7% 7%;
 
@@ -138,17 +138,17 @@ export default {
 
 	.nav-menu.is-active {
 		.nav-item {
-			color: $dark-grey-2;
+			color: var(--dark-grey-2);
 
 			&:hover {
-				color: $dark-grey-2;
+				color: var(--dark-grey-2);
 			}
 		}
 	}
 
 	a.nav-item.is-tab:hover {
 		border-bottom: none;
-		border-top: solid 1px $white;
+		border-top: solid 1px var(--white);
 		padding-top: 9px;
 	}
 
@@ -157,11 +157,11 @@ export default {
 
 		&:hover,
 		&:active {
-			background-color: darken($musare-blue, 10%);
+			filter: brightness(95%);
 		}
 
 		span {
-			background-color: $white;
+			background-color: var(--white);
 		}
 	}
 
@@ -173,16 +173,16 @@ export default {
 
 		img {
 			max-height: 38px;
-			color: $musare-blue;
+			color: var(--primary-color);
 		}
 	}
 
 	.nav-item {
 		font-size: 17px;
-		color: $white;
+		color: var(--white);
 
 		&:hover {
-			color: $white;
+			color: var(--white);
 		}
 	}
 }

frontend/src/components/modals/CreatePlaylist.vue

@@ -108,7 +108,7 @@ export default {
 }
 
 .menu-list a:hover {
-	color: $black !important;
+	color: var(--black) !important;
 }
 
 li a {

frontend/src/components/modals/EditPlaylist/components/PlaylistSongItem.vue

@@ -50,7 +50,7 @@ export default {
 
 .night-mode {
 	.playlist-song-item {
-		background-color: $night-mode-bg-secondary !important;
+		background-color: var(--dark-grey-3) !important;
 		border: 0 !important;
 	}
 }

frontend/src/components/modals/EditPlaylist/index.vue

@@ -686,13 +686,13 @@ export default {
 
 .night-mode {
 	.section {
-		background-color: $night-mode-bg-secondary !important;
+		background-color: var(--dark-grey-3) !important;
 	}
 
 	.label,
 	p,
 	strong {
-		color: $night-mode-text;
+		color: var(--light-grey-2);
 	}
 }
 
@@ -783,7 +783,7 @@ export default {
 		}
 
 		#playlist-info-section {
-			border: 1px solid $light-grey-2;
+			border: 1px solid var(--light-grey-3);
 			border-radius: 3px;
 			padding: 15px !important;
 
@@ -810,7 +810,7 @@ export default {
 			#song-query-results {
 				padding: 10px;
 				margin-top: 10px;
-				border: 1px solid $light-grey-2;
+				border: 1px solid var(--light-grey-3);
 				border-radius: 3px;
 				max-width: 565px;
 

frontend/src/components/modals/EditSong.vue

@@ -1432,18 +1432,18 @@ export default {
 	.api-section,
 	.api-result,
 	.player-footer {
-		background-color: $night-mode-bg-secondary !important;
+		background-color: var(--dark-grey-3) !important;
 	}
 
 	.api-result .tracks .track:hover,
 	.selected-discogs-info {
-		background-color: #333 !important;
+		background-color: var(--dark-grey-2) !important;
 	}
 
 	.label,
 	p,
 	strong {
-		color: $night-mode-text;
+		color: var(--light-grey-2);
 	}
 }
 
@@ -1466,7 +1466,7 @@ export default {
 			flex-direction: column;
 
 			.player-footer {
-				background-color: #f4f4f4;
+				background-color: var(--light-grey);
 				border: 1px rgba(163, 224, 255, 0.75) solid;
 				border-radius: 0px 0px 5px 5px;
 				display: flex;
@@ -1488,15 +1488,15 @@ export default {
 					}
 
 					.player-play-pause {
-						color: $musare-blue;
+						color: var(--primary-color);
 					}
 
 					.player-stop {
-						color: $red;
+						color: var(--red);
 					}
 
 					.player-fast-forward {
-						color: $green;
+						color: var(--green);
 					}
 				}
 
@@ -1522,7 +1522,7 @@ export default {
 					#volumeSlider {
 						width: 126px;
 						margin-right: 10px;
-						background-color: #f4f4f4;
+						background-color: var(--light-grey);
 					}
 				}
 			}
@@ -1537,7 +1537,7 @@ export default {
 
 	.edit-section {
 		width: 735px;
-		background-color: #f4f4f4;
+		background-color: var(--light-grey);
 		border: 1px rgba(163, 224, 255, 0.75) solid;
 		margin-top: 16px;
 		flex: 1;
@@ -1545,23 +1545,23 @@ export default {
 		border-radius: 5px;
 
 		.album-get-button {
-			background-color: $purple;
-			color: white;
+			background-color: var(--purple);
+			color: var(--white);
 			width: 32px;
 			text-align: center;
 			border-width: 0;
 		}
 
 		.duration-fill-button {
-			background-color: $red;
-			color: $white;
+			background-color: var(--red);
+			color: var(--white);
 			width: 32px;
 			text-align: center;
 			border-width: 0;
 		}
 
 		.add-button {
-			background-color: $musare-blue !important;
+			background-color: var(--primary-color) !important;
 			width: 32px;
 
 			i {
@@ -1575,7 +1575,7 @@ export default {
 			&:focus,
 			&:hover {
 				filter: contrast(0.75);
-				border: 1px solid black !important;
+				border: 1px solid var(--black) !important;
 			}
 		}
 
@@ -1623,7 +1623,7 @@ export default {
 					font-size: 15px;
 					align-self: center;
 					margin-left: 5px;
-					color: $musare-blue;
+					color: var(--primary-color);
 					cursor: pointer;
 					-webkit-user-select: none;
 					-moz-user-select: none;
@@ -1638,7 +1638,7 @@ export default {
 		}
 
 		.list-item-circle {
-			background-color: $musare-blue;
+			background-color: var(--primary-color);
 			width: 16px;
 			height: 16px;
 			border-radius: 8px;
@@ -1653,7 +1653,7 @@ export default {
 			user-select: none;
 
 			i {
-				color: $musare-blue;
+				color: var(--primary-color);
 				font-size: 14px;
 				margin-left: 1px;
 			}
@@ -1662,7 +1662,7 @@ export default {
 		.list-item-circle:hover,
 		.list-item-circle:focus {
 			i {
-				color: white;
+				color: var(--white);
 			}
 		}
 
@@ -1681,7 +1681,7 @@ export default {
 
 		.autosuggest-container {
 			position: absolute;
-			background: white;
+			background: var(--white);
 			width: calc(100% + 1px);
 			top: 57px;
 			z-index: 200;
@@ -1692,7 +1692,7 @@ export default {
 			.autosuggest-item {
 				padding: 8px;
 				display: block;
-				border: 1px solid #dbdbdb;
+				border: 1px solid var(--light-grey-2);
 				margin-top: -1px;
 				line-height: 16px;
 				cursor: pointer;
@@ -1704,7 +1704,7 @@ export default {
 
 			.autosuggest-item:hover,
 			.autosuggest-item:focus {
-				background-color: #eee;
+				background-color: var(--light-grey);
 			}
 
 			.autosuggest-item:first-child {
@@ -1724,7 +1724,7 @@ export default {
 
 	.api-section {
 		width: 376px;
-		background-color: #f4f4f4;
+		background-color: var(--light-grey);
 		border: 1px rgba(163, 224, 255, 0.75) solid;
 		border-radius: 5px;
 		padding: 16px;
@@ -1801,8 +1801,8 @@ export default {
 		}
 
 		.selected-discogs-info {
-			background-color: white;
-			border: 1px solid $purple;
+			background-color: var(--white);
+			border: 1px solid var(--purple);
 			border-radius: 5px;
 			margin-bottom: 16px;
 
@@ -1817,14 +1817,14 @@ export default {
 		}
 
 		.api-result {
-			background-color: white;
-			border: 0.5px solid $musare-blue;
+			background-color: var(--white);
+			border: 0.5px solid var(--primary-color);
 			border-radius: 5px;
 			margin-bottom: 16px;
 		}
 
 		button {
-			background-color: $musare-blue !important;
+			background-color: var(--primary-color) !important;
 
 			&:focus,
 			&:hover {
@@ -1845,7 +1845,7 @@ export default {
 			}
 
 			.track {
-				border: 0.5px solid black;
+				border: 0.5px solid var(--black);
 				margin-top: -1px;
 				line-height: 16px;
 				display: flex;
@@ -1868,7 +1868,7 @@ export default {
 
 			.track:hover,
 			.track:focus {
-				background-color: #f4f4f4;
+				background-color: var(--light-grey);
 			}
 		}
 
@@ -1896,7 +1896,7 @@ input[type="range"]::-webkit-slider-runnable-track {
 	height: 3px;
 	cursor: pointer;
 	box-shadow: none;
-	background: #7e7e7e;
+	background: var(--grey-3);
 	border-radius: none;
 	border: none;
 }
@@ -1906,20 +1906,20 @@ input[type="range"]::-webkit-slider-thumb {
 	height: 20px;
 	width: 20px;
 	border-radius: 100px;
-	background: #03a9f4;
+	background: var(--primary-color);
 	cursor: pointer;
 	-webkit-appearance: none;
 	margin-top: -8.5px;
 }
 input[type="range"]:focus::-webkit-slider-runnable-track {
-	background: #7e7e7e;
+	background: var(--grey-3);
 }
 input[type="range"]::-moz-range-track {
 	width: 100%;
 	height: 3px;
 	cursor: pointer;
 	box-shadow: none;
-	background: #7e7e7e;
+	background: var(--grey-3);
 	border-radius: none;
 	border: none;
 }
@@ -1929,7 +1929,7 @@ input[type="range"]::-moz-range-thumb {
 	height: 20px;
 	width: 20px;
 	border-radius: 100px;
-	background: #03a9f4;
+	background: var(--primary-color);
 	cursor: pointer;
 }
 input[type="range"]::-ms-track {
@@ -1941,13 +1941,13 @@ input[type="range"]::-ms-track {
 	color: transparent;
 }
 input[type="range"]::-ms-fill-lower {
-	background: #717171;
+	background: var(--grey-2);
 	border: none;
 	border-radius: none;
 	box-shadow: none;
 }
 input[type="range"]::-ms-fill-upper {
-	background: #7e7e7e;
+	background: var(--grey-3);
 	border: none;
 	border-radius: none;
 	box-shadow: none;
@@ -1958,14 +1958,14 @@ input[type="range"]::-ms-thumb {
 	height: 20px;
 	width: 20px;
 	border-radius: 100px;
-	background: #03a9f4;
+	background: var(--primary-color);
 	cursor: pointer;
 	height: 3px;
 }
 input[type="range"]:focus::-ms-fill-lower {
-	background: #7e7e7e;
+	background: var(--grey-3);
 }
 input[type="range"]:focus::-ms-fill-upper {
-	background: #7e7e7e;
+	background: var(--grey-3);
 }
 </style>

frontend/src/components/modals/EditStation.vue

@@ -910,18 +910,18 @@ export default {
 	.modal-card-head,
 	.modal-card-body,
 	.modal-card-foot {
-		background-color: $night-mode-bg-secondary;
+		background-color: var(--dark-grey-3);
 	}
 
 	.section {
-		background-color: $night-mode-bg-secondary !important;
+		background-color: var(--dark-grey-3) !important;
 		border: 0 !important;
 	}
 
 	.label,
 	p,
 	strong {
-		color: $night-mode-text;
+		color: var(--light-grey-2);
 	}
 }
 
@@ -936,8 +936,8 @@ export default {
 }
 
 .section {
-	border: 1px solid #a3e0ff;
-	background-color: #f4f4f4;
+	border: 1px solid var(--light-blue);
+	background-color: var(--light-grey);
 	border-radius: 5px;
 	padding: 16px;
 }
@@ -958,11 +958,11 @@ export default {
 			width: 32px;
 
 			&.blue {
-				background-color: $musare-blue !important;
+				background-color: var(--primary-color) !important;
 			}
 
 			&.red {
-				background-color: $red !important;
+				background-color: var(--red) !important;
 			}
 
 			i {
@@ -992,18 +992,18 @@ export default {
 		user-select: none;
 
 		&.blue {
-			background-color: $musare-blue;
+			background-color: var(--primary-color);
 
 			i {
-				color: $musare-blue;
+				color: var(--primary-color);
 			}
 		}
 
 		&.red {
-			background-color: $red;
+			background-color: var(--red);
 
 			i {
-				color: $red;
+				color: var(--red);
 			}
 		}
 
@@ -1016,7 +1016,7 @@ export default {
 	.list-item-circle:hover,
 	.list-item-circle:focus {
 		i {
-			color: white;
+			color: var(--white);
 		}
 	}
 
@@ -1035,7 +1035,7 @@ export default {
 
 	.autosuggest-container {
 		position: absolute;
-		background: white;
+		background: var(--white);
 		width: calc(100% + 1px);
 		top: 57px;
 		z-index: 200;
@@ -1046,7 +1046,7 @@ export default {
 		.autosuggest-item {
 			padding: 8px;
 			display: block;
-			border: 1px solid #dbdbdb;
+			border: 1px solid var(--light-grey-2);
 			margin-top: -1px;
 			line-height: 16px;
 			cursor: pointer;
@@ -1058,7 +1058,7 @@ export default {
 
 		.autosuggest-item:hover,
 		.autosuggest-item:focus {
-			background-color: #eee;
+			background-color: var(--light-grey);
 		}
 
 		.autosuggest-item:first-child {
@@ -1089,7 +1089,7 @@ export default {
 			border: 0;
 			border-radius: 3px;
 			font-size: 18px;
-			color: white;
+			color: var(--white);
 			box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
 			display: block;
 			text-align: center;
@@ -1105,31 +1105,31 @@ export default {
 			text-transform: capitalize;
 
 			&.red {
-				background-color: $red;
+				background-color: var(--red);
 			}
 
 			&.green {
-				background-color: $green;
+				background-color: var(--green);
 			}
 
 			&.blue {
-				background-color: $musare-blue;
+				background-color: var(--primary-color);
 			}
 
 			&.orange {
-				background-color: $light-orange;
+				background-color: var(--light-orange);
 			}
 
 			&.yellow {
-				background-color: $yellow;
+				background-color: var(--yellow);
 			}
 
 			&.purple {
-				background-color: $purple;
+				background-color: var(--purple);
 			}
 
 			&.teal {
-				background-color: $teal;
+				background-color: var(--teal);
 			}
 
 			i {

frontend/src/components/modals/Login.vue

@@ -128,25 +128,25 @@ export default {
 	.modal-card-head,
 	.modal-card-body,
 	.modal-card-foot {
-		background-color: $night-mode-bg-secondary;
+		background-color: var(--dark-grey-3);
 	}
 
 	.label,
 	p:not(.help) {
-		color: $night-mode-text;
+		color: var(--light-grey-2);
 	}
 }
 
 .button.is-github {
-	background-color: $dark-grey-2;
-	color: $white !important;
+	background-color: var(--dark-grey-2);
+	color: var(--white) !important;
 }
 
 .is-github:focus {
-	background-color: $dark-grey-3;
+	background-color: var(--dark-grey-4);
 }
 .is-primary:focus {
-	background-color: $primary-color !important;
+	background-color: var(--primary-color) !important;
 }
 
 .invert {
@@ -154,6 +154,6 @@ export default {
 }
 
 a {
-	color: $primary-color;
+	color: var(--primary-color);
 }
 </style>

frontend/src/components/modals/Register.vue

@@ -147,7 +147,7 @@ export default {
 	},
 	watch: {
 		// eslint-disable-next-line
-		"username.value": function(value) {
+		"username.value": function (value) {
 			if (!validation.isLength(value, 2, 32)) {
 				this.username.message =
 					"Username must have between 2 and 32 characters.";
@@ -162,7 +162,7 @@ export default {
 			}
 		},
 		// eslint-disable-next-line
-		"email.value": function(value) {
+		"email.value": function (value) {
 			if (!validation.isLength(value, 3, 254)) {
 				this.email.message =
 					"Email must have between 3 and 254 characters.";
@@ -179,7 +179,7 @@ export default {
 			}
 		},
 		// eslint-disable-next-line
-		"password.value": function(value) {
+		"password.value": function (value) {
 			if (!validation.isLength(value, 6, 200)) {
 				this.password.message =
 					"Password must have between 6 and 200 characters.";
@@ -266,25 +266,22 @@ export default {
 	.modal-card-head,
 	.modal-card-body,
 	.modal-card-foot {
-		background-color: $night-mode-bg-secondary;
+		background-color: var(--dark-grey-3);
 	}
 
 	.label,
 	p:not(.help) {
-		color: $night-mode-text;
+		color: var(--light-grey-2);
 	}
 }
 
 .button.is-github {
-	background-color: $dark-grey-2;
-	color: $white !important;
+	background-color: var(--dark-grey-2);
+	color: var(--white) !important;
 }
 
 .is-github:focus {
-	background-color: $dark-grey-3;
-}
-.is-primary:focus {
-	background-color: #028bca !important;
+	background-color: var(--dark-grey-4);
 }
 
 .invert {
@@ -296,7 +293,7 @@ export default {
 }
 
 a {
-	color: $primary-color;
+	color: var(--primary-color);
 }
 </style>
 

frontend/src/components/modals/WhatIsNew.vue

@@ -133,12 +133,12 @@ export default {
 	.modal-card,
 	.modal-card-head,
 	.modal-card-body {
-		background-color: $night-mode-bg-secondary;
+		background-color: var(--dark-grey-3);
 	}
 
 	strong,
 	p {
-		color: $night-mode-text;
+		color: var(--light-grey-2);
 	}
 }
 
@@ -160,7 +160,7 @@ export default {
 
 	&:before,
 	&:after {
-		background-color: #bbb;
+		background-color: var(--light-grey-3);
 	}
 }
 
@@ -170,7 +170,7 @@ export default {
 		padding: 12px;
 		text-transform: uppercase;
 		font-weight: bold;
-		color: $white;
+		color: var(--white);
 	}
 
 	.sect-head-features {

frontend/src/components/ui/FloatingBox.vue

@@ -133,18 +133,18 @@ export default {
 @import "../../styles/global.scss";
 
 .box {
-	background-color: white;
+	background-color: var(--white);
 	position: fixed;
 	z-index: 10000000;
 	resize: both;
 	overflow: auto;
-	border: 1px solid #d3d3d3;
+	border: 1px solid var(--light-grey-2);
 	min-height: 50px !important;
 	min-width: 50px !important;
 
 	.box-header {
 		z-index: 100000001;
-		background-color: $musare-blue;
+		background-color: var(--primary-color);
 		padding: 10px;
 		display: block;
 		height: 10px;

frontend/src/components/ui/PlaylistItem.vue

@@ -51,11 +51,11 @@ export default {
 
 .night-mode {
 	.playlist-item {
-		background-color: $dark-grey-2 !important;
+		background-color: var(--dark-grey-2) !important;
 		border: 0 !important;
 
 		p {
-			color: $night-mode-text !important;
+			color: var(--light-grey-2) !important;
 		}
 	}
 }
@@ -65,7 +65,7 @@ export default {
 	height: 72px;
 
 	.item-title {
-		color: $dark-grey-2;
+		color: var(--dark-grey-2);
 		font-size: 20px;
 		line-height: 23px;
 		margin-bottom: 0;
@@ -73,7 +73,7 @@ export default {
 		align-items: center;
 
 		.private-playlist-icon {
-			color: $dark-pink;
+			color: var(--dark-pink);
 			font-size: 18px;
 			margin-left: 5px;
 		}

frontend/src/components/ui/ProfilePicture.vue

@@ -52,7 +52,7 @@ export default {
 	width: 100px;
 	height: 100px;
 	border-radius: 100%;
-	border: 0.5px solid $light-grey-2;
+	border: 0.5px solid var(--light-grey-3);
 
 	&.using-initials {
 		display: flex;
@@ -65,24 +65,24 @@ export default {
 		user-select: none;
 		-webkit-user-select: none;
 		&.blue {
-			background-color: $musare-blue;
-			color: white;
+			background-color: var(--primary-color);
+			color: var(--white);
 		}
 		&.orange {
-			background-color: $light-orange;
-			color: white;
+			background-color: var(--light-orange);
+			color: var(--white);
 		}
 		&.green {
-			background-color: $green;
-			color: white;
+			background-color: var(--green);
+			color: var(--white);
 		}
 		&.purple {
-			background-color: $purple;
-			color: white;
+			background-color: var(--purple);
+			color: var(--white);
 		}
 		&.teal {
-			background-color: $teal;
-			color: white;
+			background-color: var(--teal);
+			color: var(--white);
 		}
 	}
 }

frontend/src/components/ui/SearchQueryItem.vue

@@ -52,7 +52,7 @@ export default {
 
 <style lang="scss">
 .search-query-item .universal-item-actions i {
-	color: #fff !important;
+	color: var(--white) !important;
 }
 
 .search-query-actions-enter-active {
@@ -79,7 +79,7 @@ export default {
 
 .night-mode {
 	.search-query-item {
-		background-color: $night-mode-bg-secondary !important;
+		background-color: var(--dark-grey-3) !important;
 		border: 0 !important;
 	}
 }

frontend/src/pages/About.vue

@@ -84,11 +84,11 @@ export default {
 
 .night-mode {
 	.card {
-		background-color: $night-mode-bg-secondary;
+		background-color: var(--dark-grey-3);
 	}
 
 	p {
-		color: $night-mode-text;
+		color: var(--light-grey-2);
 	}
 }
 

frontend/src/pages/Admin/EditNews.vue

@@ -266,7 +266,7 @@ input[type="range"]::-webkit-slider-runnable-track {
 	height: 5.2px;
 	cursor: pointer;
 	box-shadow: 0;
-	background: $light-grey-2;
+	background: var(--light-grey-3);
 	border-radius: 0;
 	border: 0;
 }
@@ -277,7 +277,7 @@ input[type="range"]::-webkit-slider-thumb {
 	height: 19px;
 	width: 19px;
 	border-radius: 15px;
-	background: $primary-color;
+	background: var(--primary-color);
 	cursor: pointer;
 	-webkit-appearance: none;
 	margin-top: -6.5px;
@@ -288,7 +288,7 @@ input[type="range"]::-moz-range-track {
 	height: 5.2px;
 	cursor: pointer;
 	box-shadow: 0;
-	background: $light-grey-2;
+	background: var(--light-grey-3);
 	border-radius: 0;
 	border: 0;
 }
@@ -299,7 +299,7 @@ input[type="range"]::-moz-range-thumb {
 	height: 19px;
 	width: 19px;
 	border-radius: 15px;
-	background: $primary-color;
+	background: var(--primary-color);
 	cursor: pointer;
 	-webkit-appearance: none;
 	margin-top: -6.5px;
@@ -310,19 +310,19 @@ input[type="range"]::-ms-track {
 	height: 5.2px;
 	cursor: pointer;
 	box-shadow: 0;
-	background: $light-grey-2;
+	background: var(--light-grey-3);
 	border-radius: 1.3px;
 }
 
 input[type="range"]::-ms-fill-lower {
-	background: $light-grey-2;
+	background: var(--light-grey-3);
 	border: 0;
 	border-radius: 0;
 	box-shadow: 0;
 }
 
 input[type="range"]::-ms-fill-upper {
-	background: $light-grey-2;
+	background: var(--light-grey-3);
 	border: 0;
 	border-radius: 0;
 	box-shadow: 0;
@@ -334,7 +334,7 @@ input[type="range"]::-ms-thumb {
 	height: 15px;
 	width: 15px;
 	border-radius: 15px;
-	background: $primary-color;
+	background: var(--primary-color);
 	cursor: pointer;
 	-webkit-appearance: none;
 	margin-top: 1.5px;
@@ -389,7 +389,7 @@ h5 {
 }
 
 .save-changes {
-	color: $white;
+	color: var(--white);
 }
 
 .tag:not(:last-child) {

frontend/src/pages/Admin/EditUser.vue

@@ -235,7 +235,7 @@ export default {
 @import "../../styles/global.scss";
 
 .save-changes {
-	color: $white;
+	color: var(--white);
 }
 
 .tag:not(:last-child) {
@@ -243,6 +243,6 @@ export default {
 }
 
 .select:after {
-	border-color: $primary-color;
+	border-color: var(--primary-color);
 }
 </style>

frontend/src/pages/Admin/ViewReport.vue

@@ -163,12 +163,12 @@ export default {
 .night-mode {
 	.message,
 	.table {
-		color: $night-mode-text;
-		background-color: $night-mode-bg-secondary;
+		color: var(--light-grey-2);
+		background-color: var(--dark-grey-3);
 	}
 
 	.table tr:hover {
-		background-color: darken($night-mode-bg-secondary, 5%);
+		filter: brightness(95%);
 	}
 }
 

frontend/src/pages/Admin/index.vue

@@ -194,7 +194,7 @@ export default {
 
 .night-mode {
 	.tabs {
-		background-color: #333;
+		background-color: var(--dark-grey-2);
 		border: 0;
 
 		ul {
@@ -210,46 +210,46 @@ export default {
 .tabs {
 	padding-top: 10px;
 	margin-top: -10px;
-	background-color: $white;
+	background-color: var(--white);
 	.queueSongs {
-		color: $teal;
-		border-color: $teal;
+		color: var(--teal);
+		border-color: var(--teal);
 	}
 	.songs {
-		color: $primary-color;
-		border-color: $primary-color;
+		color: var(--primary-color);
+		border-color: var(--primary-color);
 	}
 	.stations {
-		color: $purple;
-		border-color: $purple;
+		color: var(--purple);
+		border-color: var(--purple);
 	}
 	.playlists {
-		color: $light-purple;
-		border-color: $light-purple;
+		color: var(--light-purple);
+		border-color: var(--light-purple);
 	}
 	.reports {
-		color: $yellow;
-		border-color: $yellow;
+		color: var(--yellow);
+		border-color: var(--yellow);
 	}
 	.news {
-		color: $light-pink;
-		border-color: $light-pink;
+		color: var(--light-pink);
+		border-color: var(--light-pink);
 	}
 	.users {
-		color: $dark-pink;
-		border-color: $dark-pink;
+		color: var(--dark-pink);
+		border-color: var(--dark-pink);
 	}
 	.statistics {
-		color: $light-orange;
-		border-color: $light-orange;
+		color: var(--light-orange);
+		border-color: var(--light-orange);
 	}
 	.newstatistics {
-		color: $light-orange;
-		border-color: $light-orange;
+		color: var(--light-orange);
+		border-color: var(--light-orange);
 	}
 	.punishments {
-		color: $dark-orange;
-		border-color: $dark-orange;
+		color: var(--dark-orange);
+		border-color: var(--dark-orange);
 	}
 	.tab {
 		transition: all 0.2s ease-in-out;

frontend/src/pages/Admin/tabs/NewStatistics.vue

@@ -246,34 +246,34 @@ export default {
 
 .night-mode {
 	.table {
-		color: $night-mode-text;
-		background-color: $night-mode-bg-secondary;
+		color: var(--light-grey-2);
+		background-color: var(--dark-grey-3);
 
 		thead tr {
-			background: $night-mode-bg-secondary;
+			background: var(--dark-grey-3);
 			td {
-				color: #fff;
+				color: var(--white);
 			}
 		}
 
 		tbody tr:hover {
-			background-color: #111 !important;
+			background-color: var(--dark-grey-4) !important;
 		}
 
 		tbody tr:nth-child(even) {
-			background-color: #444;
+			background-color: var(--dark-grey-2);
 		}
 
 		strong {
-			color: $night-mode-text;
+			color: var(--light-grey-2);
 		}
 	}
 
 	.card {
-		background-color: $night-mode-bg-secondary;
+		background-color: var(--dark-grey-3);
 
 		p {
-			color: $night-mode-text;
+			color: var(--light-grey-2);
 		}
 	}
 }
@@ -293,6 +293,6 @@ td {
 }
 
 .is-primary:focus {
-	background-color: $primary-color !important;
+	background-color: var(--primary-color) !important;
 }
 </style>

frontend/src/pages/Admin/tabs/News.vue

@@ -358,31 +358,31 @@ export default {
 
 .night-mode {
 	.table {
-		color: $night-mode-text;
-		background-color: $night-mode-bg-secondary;
+		color: var(--light-grey-2);
+		background-color: var(--dark-grey-3);
 
 		thead tr {
-			background: $night-mode-bg-secondary;
+			background: var(--dark-grey-3);
 			td {
-				color: #fff;
+				color: var(--white);
 			}
 		}
 
 		tbody tr:hover {
-			background-color: #111 !important;
+			background-color: var(--dark-grey-4) !important;
 		}
 
 		tbody tr:nth-child(even) {
-			background-color: #444;
+			background-color: var(--dark-grey-2);
 		}
 
 		strong {
-			color: $night-mode-text;
+			color: var(--light-grey-2);
 		}
 	}
 
 	.card {
-		background: $night-mode-bg-secondary;
+		background: var(--dark-grey-3);
 
 		.card-header {
 			box-shadow: 0 1px 2px rgba(10, 10, 10, 0.8);
@@ -390,7 +390,7 @@ export default {
 
 		p,
 		.label {
-			color: $night-mode-text;
+			color: var(--light-grey-2);
 		}
 	}
 }
@@ -404,10 +404,10 @@ td {
 }
 
 .is-info:focus {
-	background-color: $primary-color;
+	background-color: var(--primary-color);
 }
 
 .card-footer-item {
-	color: $primary-color;
+	color: var(--primary-color);
 }
 </style>

frontend/src/pages/Admin/tabs/Playlists.vue

@@ -134,26 +134,26 @@ export default {
 
 .night-mode {
 	.table {
-		color: $night-mode-text;
-		background-color: $night-mode-bg-secondary;
+		color: var(--light-grey-2);
+		background-color: var(--dark-grey-3);
 
 		thead tr {
-			background: $night-mode-bg-secondary;
+			background: var(--dark-grey-3);
 			td {
-				color: #fff;
+				color: var(--white);
 			}
 		}
 
 		tbody tr:hover {
-			background-color: #111 !important;
+			background-color: var(--dark-grey-4) !important;
 		}
 
 		tbody tr:nth-child(even) {
-			background-color: #444;
+			background-color: var(--dark-grey-2);
 		}
 
 		strong {
-			color: $night-mode-text;
+			color: var(--light-grey-2);
 		}
 	}
 }
@@ -167,6 +167,6 @@ td {
 }
 
 .is-primary:focus {
-	background-color: $primary-color !important;
+	background-color: var(--primary-color) !important;
 }
 </style>

frontend/src/pages/Admin/tabs/Punishments.vue

@@ -164,31 +164,31 @@ export default {
 
 .night-mode {
 	.table {
-		color: $night-mode-text;
-		background-color: $night-mode-bg-secondary;
+		color: var(--light-grey-2);
+		background-color: var(--dark-grey-3);
 
 		thead tr {
-			background: $night-mode-bg-secondary;
+			background: var(--dark-grey-3);
 			td {
-				color: #fff;
+				color: var(--white);
 			}
 		}
 
 		tbody tr:hover {
-			background-color: #111 !important;
+			background-color: var(--dark-grey-4) !important;
 		}
 
 		tbody tr:nth-child(even) {
-			background-color: #444;
+			background-color: var(--dark-grey-2);
 		}
 
 		strong {
-			color: $night-mode-text;
+			color: var(--light-grey-2);
 		}
 	}
 
 	.card {
-		background: $night-mode-bg-secondary;
+		background: var(--dark-grey-3);
 
 		.card-header {
 			box-shadow: 0 1px 2px rgba(10, 10, 10, 0.8);
@@ -196,7 +196,7 @@ export default {
 
 		p,
 		.label {
-			color: $night-mode-text;
+			color: var(--light-grey-2);
 		}
 	}
 }

frontend/src/pages/Admin/tabs/QueueSongs.vue

@@ -329,26 +329,26 @@ export default {
 
 .night-mode {
 	.table {
-		color: $night-mode-text;
-		background-color: $night-mode-bg-secondary;
+		color: var(--light-grey-2);
+		background-color: var(--dark-grey-3);
 
 		thead tr {
-			background: $night-mode-bg-secondary;
+			background: var(--dark-grey-3);
 			td {
-				color: #fff;
+				color: var(--white);
 			}
 		}
 
 		tbody tr:hover {
-			background-color: #111 !important;
+			background-color: var(--dark-grey-4) !important;
 		}
 
 		tbody tr:nth-child(even) {
-			background-color: #444;
+			background-color: var(--dark-grey-2);
 		}
 
 		strong {
-			color: $night-mode-text;
+			color: var(--light-grey-2);
 		}
 	}
 }
@@ -373,7 +373,7 @@ td {
 #keyboardShortcutsHelper {
 	.box-body {
 		b {
-			color: #000;
+			color: var(--black);
 		}
 
 		.biggest {
@@ -391,6 +391,6 @@ td {
 }
 
 .is-primary:focus {
-	background-color: $primary-color !important;
+	background-color: var(--primary-color) !important;
 }
 </style>

frontend/src/pages/Admin/tabs/Reports.vue

@@ -158,26 +158,26 @@ export default {
 
 .night-mode {
 	.table {
-		color: $night-mode-text;
-		background-color: $night-mode-bg-secondary;
+		color: var(--light-grey-2);
+		background-color: var(--dark-grey-3);
 
 		thead tr {
-			background: $night-mode-bg-secondary;
+			background: var(--dark-grey-3);
 			td {
-				color: #fff;
+				color: var(--white);
 			}
 		}
 
 		tbody tr:hover {
-			background-color: #111 !important;
+			background-color: var(--dark-grey-4) !important;
 		}
 
 		tbody tr:nth-child(even) {
-			background-color: #444;
+			background-color: var(--dark-grey-2);
 		}
 
 		strong {
-			color: $night-mode-text;
+			color: var(--light-grey-2);
 		}
 	}
 }

frontend/src/pages/Admin/tabs/Songs.vue

@@ -430,26 +430,26 @@ export default {
 
 .night-mode {
 	.table {
-		color: $night-mode-text;
-		background-color: $night-mode-bg-secondary;
+		color: var(--light-grey-2);
+		background-color: var(--dark-grey-3);
 
 		thead tr {
-			background: $night-mode-bg-secondary;
+			background: var(--dark-grey-3);
 			td {
-				color: #fff;
+				color: var(--white);
 			}
 		}
 
 		tbody tr:hover {
-			background-color: #111 !important;
+			background-color: var(--dark-grey-4) !important;
 		}
 
 		tbody tr:nth-child(even) {
-			background-color: #444;
+			background-color: var(--dark-grey-2);
 		}
 
 		strong {
-			color: $night-mode-text;
+			color: var(--light-grey-2);
 		}
 	}
 }
@@ -472,10 +472,10 @@ body {
 		font-size: 20px;
 	}
 	.thumbLike {
-		color: $green !important;
+		color: var(--green) !important;
 	}
 	.thumbDislike {
-		color: $red !important;
+		color: var(--red) !important;
 	}
 }
 
@@ -492,7 +492,7 @@ td {
 #keyboardShortcutsHelper {
 	.box-body {
 		b {
-			color: #000;
+			color: var(--black);
 		}
 
 		.biggest {
@@ -510,6 +510,6 @@ td {
 }
 
 .is-primary:focus {
-	background-color: $primary-color !important;
+	background-color: var(--primary-color) !important;
 }
 </style>

frontend/src/pages/Admin/tabs/Stations.vue

@@ -360,31 +360,31 @@ export default {
 
 .night-mode {
 	.table {
-		color: $night-mode-text;
-		background-color: $night-mode-bg-secondary;
+		color: var(--light-grey-2);
+		background-color: var(--dark-grey-3);
 
 		thead tr {
-			background: $night-mode-bg-secondary;
+			background: var(--dark-grey-3);
 			td {
-				color: #fff;
+				color: var(--white);
 			}
 		}
 
 		tbody tr:hover {
-			background-color: #111 !important;
+			background-color: var(--dark-grey-4) !important;
 		}
 
 		tbody tr:nth-child(even) {
-			background-color: #444;
+			background-color: var(--dark-grey-2);
 		}
 
 		strong {
-			color: $night-mode-text;
+			color: var(--light-grey-2);
 		}
 	}
 
 	.card {
-		background: $night-mode-bg-secondary;
+		background: var(--dark-grey-3);
 
 		.card-header {
 			box-shadow: 0 1px 2px rgba(10, 10, 10, 0.8);
@@ -392,7 +392,7 @@ export default {
 
 		p,
 		.label {
-			color: $night-mode-text;
+			color: var(--light-grey-2);
 		}
 	}
 }
@@ -411,7 +411,7 @@ td {
 }
 
 .is-info:focus {
-	background-color: $primary-color;
+	background-color: var(--primary-color);
 }
 
 .genre-wrapper {
@@ -420,6 +420,6 @@ td {
 }
 
 .card-footer-item {
-	color: $primary-color;
+	color: var(--primary-color);
 }
 </style>

frontend/src/pages/Admin/tabs/Statistics.vue

@@ -330,34 +330,34 @@ export default {
 
 .night-mode {
 	.table {
-		color: $night-mode-text;
-		background-color: $night-mode-bg-secondary;
+		color: var(--light-grey-2);
+		background-color: var(--dark-grey-3);
 
 		thead tr {
-			background: $night-mode-bg-secondary;
+			background: var(--dark-grey-3);
 			td {
-				color: #fff;
+				color: var(--white);
 			}
 		}
 
 		tbody tr:hover {
-			background-color: #111 !important;
+			background-color: var(--dark-grey-4) !important;
 		}
 
 		tbody tr:nth-child(even) {
-			background-color: #444;
+			background-color: var(--dark-grey-2);
 		}
 
 		strong {
-			color: $night-mode-text;
+			color: var(--light-grey-2);
 		}
 	}
 
 	.card {
-		background-color: $night-mode-bg-secondary;
+		background-color: var(--dark-grey-3);
 
 		p {
-			color: $night-mode-text;
+			color: var(--light-grey-2);
 		}
 	}
 }
@@ -377,6 +377,6 @@ td {
 }
 
 .is-primary:focus {
-	background-color: $primary-color !important;
+	background-color: var(--primary-color) !important;
 }
 </style>

frontend/src/pages/Admin/tabs/Users.vue

@@ -124,26 +124,26 @@ export default {
 
 .night-mode {
 	.table {
-		color: $night-mode-text;
-		background-color: $night-mode-bg-secondary;
+		color: var(--light-grey-2);
+		background-color: var(--dark-grey-3);
 
 		thead tr {
-			background: $night-mode-bg-secondary;
+			background: var(--dark-grey-3);
 			td {
-				color: #fff;
+				color: var(--white);
 			}
 		}
 
 		tbody tr:hover {
-			background-color: #111 !important;
+			background-color: var(--dark-grey-4) !important;
 		}
 
 		tbody tr:nth-child(even) {
-			background-color: #444;
+			background-color: var(--dark-grey-2);
 		}
 
 		strong {
-			color: $night-mode-text;
+			color: var(--light-grey-2);
 		}
 	}
 }
@@ -167,6 +167,6 @@ td {
 }
 
 .is-primary:focus {
-	background-color: $primary-color !important;
+	background-color: var(--primary-color) !important;
 }
 </style>

frontend/src/pages/Home/index.vue

@@ -717,20 +717,20 @@ html {
 	.card,
 	.card-content,
 	.card-content div {
-		background-color: $night-mode-bg-secondary;
+		background-color: var(--dark-grey-3);
 	}
 
 	.card-content .icons i,
 	.group-title i {
-		color: $night-mode-text;
+		color: var(--light-grey-2);
 	}
 
 	.card-image .image {
-		background-color: #333;
+		background-color: var(--dark-grey-2);
 	}
 
 	.card-content .under-content .hostedBy {
-		color: $night-mode-text;
+		color: var(--light-grey-2);
 	}
 }
 
@@ -800,7 +800,7 @@ html {
 			img.logo {
 				max-height: 90px;
 				font-size: 40px;
-				color: white;
+				color: var(--white);
 				font-family: Pacifico, cursive;
 			}
 			.buttons {
@@ -822,12 +822,12 @@ html {
 					height: inherit;
 				}
 				.login {
-					background: white;
-					color: $musare-blue;
+					background: var(--white);
+					color: var(--primary-color);
 				}
 				.register {
-					background: $purple;
-					color: white;
+					background: var(--purple);
+					color: var(--white);
 				}
 			}
 		}
@@ -889,20 +889,20 @@ html {
 			margin-left: 5px;
 		}
 		.unlistedIcon {
-			color: $light-orange;
+			color: var(--light-orange);
 		}
 		.privateIcon {
-			color: $dark-pink;
+			color: var(--dark-pink);
 		}
 		.homeIcon {
-			color: $light-purple;
+			color: var(--light-purple);
 		}
 	}
 
 	.hostedBy {
 		font-weight: 400;
 		font-size: 12px;
-		color: $black;
+		color: var(--black);
 		.host,
 		.host a {
 			font-weight: 400;
@@ -968,7 +968,7 @@ html {
 				max-height: 30px;
 				.favorite {
 					position: absolute;
-					color: $yellow;
+					color: var(--yellow);
 					right: 10px;
 					top: 10px;
 					font-size: 28px;
@@ -1045,7 +1045,7 @@ html {
 		width: 100%;
 		height: 30px;
 		line-height: 30px;
-		color: $white;
+		color: var(--white);
 		font-weight: 400;
 		font-size: 12px;
 		padding: 0 5px;
@@ -1100,22 +1100,15 @@ html {
 	transition: all ease-in-out 0.2s;
 }
 
-/*.isPrivate {
-		background-color: #F8BBD0;
-	}
-	.isMine {
-		background-color: #29B6F6;
-	}*/
-
 .community-button {
 	cursor: pointer;
 	transition: 0.25s ease color;
 	font-size: 30px;
-	color: #4a4a4a;
+	color: var(--dark-grey);
 }
 
 .community-button:hover {
-	color: #03a9f4;
+	color: var(--primary-color);
 }
 
 .station-privacy {

frontend/src/pages/News.vue

@@ -135,7 +135,7 @@ export default {
 
 .night-mode {
 	p {
-		color: $night-mode-text;
+		color: var(--light-grey-2);
 	}
 }
 
@@ -149,7 +149,7 @@ export default {
 		padding: 12px;
 		text-transform: uppercase;
 		font-weight: bold;
-		color: $white;
+		color: var(--white);
 	}
 
 	.sect-head-features {

frontend/src/pages/Profile.vue

@@ -651,12 +651,12 @@ export default {
 	.name {
 		font-size: 34px;
 		line-height: 40px;
-		color: $dark-grey-3;
+		color: var(--dark-grey-4);
 	}
 
 	.role {
 		padding: 2px 24px;
-		color: $white;
+		color: var(--white);
 		text-transform: uppercase;
 		font-size: 12px;
 		line-height: 14px;
@@ -665,14 +665,14 @@ export default {
 		margin-left: 12px;
 
 		&.admin {
-			background-color: $red;
+			background-color: var(--red);
 		}
 	}
 
 	.username {
 		font-size: 24px;
 		line-height: 28px;
-		color: $dark-grey;
+		color: var(--dark-grey);
 		margin: 0;
 	}
 
@@ -700,14 +700,14 @@ export default {
 	.date-location-row {
 		i {
 			font-size: 24px;
-			color: $dark-grey-2;
+			color: var(--dark-grey-2);
 			margin-right: 12px;
 		}
 
 		p {
 			font-size: 17px;
 			line-height: 20px;
-			color: $dark-grey-2;
+			color: var(--dark-grey-2);
 			word-break: break-word;
 		}
 	}
@@ -758,7 +758,7 @@ export default {
 			outline: none;
 			border: none;
 			box-shadow: none;
-			color: $musare-blue;
+			color: var(--primary-color);
 			font-size: 22px;
 			line-height: 26px;
 			padding: 7px 0 7px 12px;
@@ -769,8 +769,8 @@ export default {
 			background-color: transparent;
 
 			&.active {
-				color: $white;
-				background-color: $musare-blue;
+				color: var(--white);
+				background-color: var(--primary-color);
 			}
 		}
 	}
@@ -778,7 +778,7 @@ export default {
 	.content {
 		width: 600px;
 		max-width: 100%;
-		background-color: #fff;
+		background-color: var(--white);
 		padding: 30px 50px;
 		border-radius: 3px;
 
@@ -797,7 +797,7 @@ export default {
 
 			&.activity-item {
 				height: 72px;
-				border: 0.5px $light-grey-2 solid;
+				border: 0.5px var(--light-grey-3) solid;
 				border-radius: 3px;
 
 				.thumbnail {
@@ -814,7 +814,7 @@ export default {
 
 					.activity-type-icon {
 						position: absolute;
-						color: $dark-grey;
+						color: var(--dark-grey);
 						font-size: 30px;
 					}
 				}
@@ -855,7 +855,7 @@ export default {
 		.item.activity-item
 		.thumbnail
 		.activity-type-icon {
-		color: $night-mode-text;
+		color: var(--light-grey-2);
 	}
 }
 </style>

frontend/src/pages/ResetPassword.vue

@@ -424,11 +424,11 @@ export default {
 .night-mode {
 	.content-box,
 	.step:not(.selected) {
-		background-color: $night-mode-bg-secondary !important;
+		background-color: var(--dark-grey-3) !important;
 	}
 
 	.label {
-		color: $night-mode-text;
+		color: var(--light-grey-2);
 	}
 
 	.skip-step {
@@ -446,7 +446,7 @@ p {
 	padding: 25px;
 
 	#title {
-		color: #000;
+		color: var(--black);
 		font-size: 42px;
 		text-align: center;
 	}
@@ -467,16 +467,16 @@ p {
 			align-items: center;
 			justify-content: center;
 			border-radius: 100%;
-			border: 1px solid $dark-grey;
+			border: 1px solid var(--dark-grey);
 			min-width: 50px;
 			min-height: 50px;
-			background-color: #fff;
+			background-color: var(--white);
 			font-size: 30px;
 			cursor: pointer;
 
 			&.selected {
-				background-color: $musare-blue;
-				color: #fff !important;
+				background-color: var(--primary-color);
+				color: var(--white) !important;
 				border: 0;
 			}
 		}
@@ -486,15 +486,15 @@ p {
 			justify-content: center;
 			width: 180px;
 			height: 1px;
-			background-color: $dark-grey;
+			background-color: var(--dark-grey);
 		}
 	}
 
 	.content-box {
 		margin-top: 90px;
 		border-radius: 3px;
-		background-color: #fff;
-		border: 1px solid $dark-grey;
+		background-color: var(--white);
+		border: 1px solid var(--dark-grey);
 		max-width: 580px;
 		padding: 40px;
 
@@ -505,17 +505,17 @@ p {
 
 		.content-box-title {
 			font-size: 25px;
-			color: #000;
+			color: var(--black);
 		}
 
 		.content-box-description {
 			font-size: 14px;
-			color: $dark-grey;
+			color: var(--dark-grey);
 		}
 
 		.content-box-optional-helper {
 			margin-top: 15px;
-			color: $musare-blue;
+			color: var(--primary-color);
 			text-decoration: underline;
 			font-size: 16px;
 		}
@@ -555,16 +555,16 @@ p {
 			margin-top: 10px;
 			font-size: 21px;
 			font-weight: 800;
-			color: #000;
+			color: var(--black);
 			text-align: center;
 		}
 
 		.success-icon {
-			color: #24a216;
+			color: var(--green);
 		}
 
 		.error-icon {
-			color: $red;
+			color: var(--red);
 		}
 
 		.success-icon,
@@ -589,7 +589,7 @@ p {
 }
 
 .skip-step {
-	background-color: #7e7e7e;
-	color: $white;
+	background-color: var(--grey-3);
+	color: var(--white);
 }
 </style>

frontend/src/pages/Settings/index.vue

@@ -148,7 +148,7 @@ export default {
 	padding: 24px;
 
 	.content {
-		background-color: #fff;
+		background-color: var(--white);
 		padding: 30px 50px;
 		border-radius: 3px;
 	}
@@ -190,7 +190,7 @@ export default {
 			outline: none;
 			border: none;
 			box-shadow: none;
-			color: $musare-blue;
+			color: var(--primary-color);
 			font-size: 22px;
 			line-height: 26px;
 			padding: 7px 0 7px 12px;
@@ -202,8 +202,8 @@ export default {
 			display: inline-block;
 
 			&.active {
-				color: $white;
-				background-color: $musare-blue;
+				color: var(--white);
+				background-color: var(--primary-color);
 			}
 		}
 	}
@@ -216,8 +216,8 @@ export default {
 			margin-top: 30px;
 
 			&:disabled {
-				background-color: $light-grey !important;
-				color: #000;
+				background-color: var(--light-grey) !important;
+				color: var(--black);
 			}
 		}
 
@@ -227,7 +227,7 @@ export default {
 
 		label {
 			font-size: 14px;
-			color: $dark-grey-2;
+			color: var(--dark-grey-2);
 		}
 
 		textarea {

frontend/src/pages/Settings/mixins/SaveButton.vue

@@ -57,8 +57,8 @@ export default {
 	margin-top: 20px;
 
 	&:disabled {
-		background-color: $light-grey !important;
-		color: #000;
+		background-color: var(--light-grey) !important;
+		color: var(--black);
 	}
 }
 

frontend/src/pages/Settings/tabs/Preferences.vue

@@ -2,9 +2,7 @@
 	<div class="content preferences-tab">
 		<h4 class="section-title">Change preferences</h4>
 
-		<p class="section-description">
-			Tailor these settings to your liking.
-		</p>
+		<p class="section-description">Tailor these settings to your liking.</p>
 
 		<hr class="section-horizontal-rule" />
 
@@ -139,9 +137,9 @@ export default {
 			cursor: pointer;
 			width: 24px;
 			height: 24px;
-			background-color: $white;
+			background-color: var(--white);
 			display: inline-block;
-			border: 1px solid $dark-grey-2;
+			border: 1px solid var(--dark-grey-2);
 			position: relative;
 			border-radius: 3px;
 		}
@@ -158,7 +156,7 @@ export default {
 		left: 2px;
 		top: 2px;
 		border-radius: 3px;
-		background-color: $musare-blue;
+		background-color: var(--primary-color);
 		position: absolute;
 	}
 }

frontend/src/pages/Settings/tabs/Profile.vue

@@ -303,7 +303,7 @@ export default {
 	align-items: flex-start;
 
 	.select:after {
-		border-color: $musare-blue;
+		border-color: var(--primary-color);
 	}
 
 	#avatar-selection-inner-container {

frontend/src/pages/Station/AddSongToQueue.vue

@@ -93,9 +93,7 @@
 				<div v-if="station.type === 'official'">
 					<hr class="section-horizontal-rule" />
 
-					<h4 class="section-title">
-						Import a playlist
-					</h4>
+					<h4 class="section-title">Import a playlist</h4>
 					<p class="section-description">
 						Import a playlist by using a link from YouTube.
 					</p>
@@ -120,9 +118,9 @@
 									"
 								>
 									<option :value="false">Import all</option>
-									<option :value="true"
-										>Import only music</option
-									>
+									<option :value="true">
+										Import only music
+									</option>
 								</select>
 							</span>
 							<a
@@ -341,7 +339,7 @@ export default {
 
 .night-mode {
 	div {
-		color: #4d4d4d;
+		color: var(--dark-grey);
 	}
 }
 
@@ -376,7 +374,7 @@ export default {
 			}
 
 			i {
-				color: #fff;
+				color: var(--white);
 			}
 		}
 
@@ -414,7 +412,7 @@ export default {
 	padding: 10px;
 	max-height: 500px;
 	overflow: auto;
-	border: 1px solid $light-grey-2;
+	border: 1px solid var(--light-grey-3);
 	border-radius: 3px;
 
 	.search-query-item:not(:last-of-type) {

frontend/src/pages/Station/Report.vue

@@ -345,6 +345,6 @@ h6 {
 }
 
 .is-highlight-active {
-	border: 3px $primary-color solid;
+	border: 3px var(--primary-color) solid;
 }
 </style>

frontend/src/pages/Station/components/AddToPlaylistDropdown.vue

@@ -152,22 +152,22 @@ export default {
 
 .night-mode {
 	.nav-dropdown-items {
-		background-color: $dark-grey-2;
+		background-color: var(--dark-grey-2);
 		border: 0 !important;
 
 		.nav-item {
-			background-color: $dark-grey;
+			background-color: var(--dark-grey);
 
 			&:focus {
-				outline-color: $dark-grey;
+				outline-color: var(--dark-grey);
 			}
 
 			p {
-				color: #fff;
+				color: var(--white);
 			}
 
 			.checkbox-control label span {
-				background-color: $dark-grey-2;
+				background-color: var(--dark-grey-2);
 			}
 		}
 	}
@@ -183,13 +183,13 @@ export default {
 #nav-dropdown-triangle {
 	border-style: solid;
 	border-width: 15px 15px 0 15px;
-	border-color: $dark-grey-2 transparent transparent transparent;
+	border-color: var(--dark-grey-2) transparent transparent transparent;
 }
 
 .nav-dropdown-items {
-	border: 1px solid $light-grey-2;
+	border: 1px solid var(--light-grey-3);
 	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
-	background-color: #fff;
+	background-color: var(--white);
 	padding: 5px;
 	border-radius: 5px;
 	position: relative;
@@ -202,7 +202,7 @@ export default {
 		padding: 10px;
 		font-size: 15.5px;
 		height: 36px;
-		background: #eee;
+		background: var(--light-grey);
 		border-radius: 5px;
 		cursor: pointer;
 
@@ -229,9 +229,9 @@ export default {
 					cursor: pointer;
 					width: 24px;
 					height: 24px;
-					background-color: $white;
+					background-color: var(--white);
 					display: inline-block;
-					border: 1px solid $dark-grey-2;
+					border: 1px solid var(--dark-grey-2);
 					position: relative;
 					border-radius: 3px;
 				}
@@ -239,7 +239,7 @@ export default {
 				p {
 					margin-left: 10px;
 					cursor: pointer;
-					color: #000;
+					color: var(--black);
 				}
 			}
 
@@ -256,7 +256,7 @@ export default {
 		}
 
 		&:focus {
-			outline-color: $light-grey-2;
+			outline-color: var(--light-grey-3);
 		}
 
 		&:not(:last-of-type) {
@@ -292,7 +292,7 @@ export default {
 	left: 0;
 	right: 0;
 	bottom: 0;
-	background-color: #ccc;
+	background-color: var(--light-grey-3);
 	transition: 0.4s;
 	border-radius: 34px;
 
@@ -303,18 +303,18 @@ export default {
 		width: 16px;
 		left: 4px;
 		bottom: 4px;
-		background-color: white;
+		background-color: var(--white);
 		transition: 0.4s;
 		border-radius: 50%;
 	}
 }
 
 input:checked + .slider {
-	background-color: $primary-color;
+	background-color: var(--primary-color);
 }
 
 input:focus + .slider {
-	box-shadow: 0 0 1px $primary-color;
+	box-shadow: 0 0 1px var(--primary-color);
 }
 
 input:checked + .slider:before {

frontend/src/pages/Station/components/CurrentlyPlaying.vue

@@ -190,7 +190,7 @@ export default {
 			#song-request-time {
 				font-size: 12px;
 				margin-top: 7px;
-				color: $dark-grey;
+				color: var(--dark-grey);
 			}
 		}
 
@@ -198,18 +198,18 @@ export default {
 			display: flex;
 
 			.button {
-				color: #fff;
+				color: var(--white);
 				padding: 0 15px;
 				border: 0;
 				margin: auto 3px;
 			}
 
 			#report-icon {
-				background-color: $yellow;
+				background-color: var(--yellow);
 			}
 
 			#youtube-icon {
-				background-color: #bd2e2e;
+				background-color: var(--youtube);
 
 				.icon {
 					margin-right: 3px;
@@ -218,7 +218,7 @@ export default {
 					-webkit-mask: url("/assets/social/youtube.svg") no-repeat
 						center;
 					mask: url("/assets/social/youtube.svg") no-repeat center;
-					background-color: #fff;
+					background-color: var(--white);
 				}
 			}
 

frontend/src/pages/Station/components/Sidebar/MyPlaylists.vue

@@ -58,9 +58,7 @@
 			@click="openModal({ sector: 'station', modal: 'createPlaylist' })"
 		>
 			<i class="material-icons icon-with-button">create</i>
-			<span class="optional-desktop-only-text">
-				Create Playlist
-			</span>
+			<span class="optional-desktop-only-text"> Create Playlist </span>
 		</a>
 	</div>
 </template>
@@ -210,7 +208,7 @@ export default {
 @import "../../../../styles/global.scss";
 
 #my-playlists {
-	background-color: #fff;
+	background-color: var(--white);
 	margin-bottom: 20px;
 	border-radius: 0 0 5px 5px;
 	max-height: 100%;
@@ -218,12 +216,12 @@ export default {
 
 .night-mode {
 	#my-playlists {
-		background-color: $night-mode-bg-secondary !important;
+		background-color: var(--dark-grey-3) !important;
 		border: 0 !important;
 	}
 
 	.draggable-list-ghost {
-		background-color: darken($night-mode-bg-secondary, 5%);
+		filter: brightness(95%);
 	}
 }
 
@@ -262,6 +260,6 @@ export default {
 
 .draggable-list-ghost {
 	opacity: 0.5;
-	background-color: darken(#fff, 5%);
+	filter: brightness(95%);
 }
 </style>

frontend/src/pages/Station/components/Sidebar/Queue/QueueItem.vue

@@ -134,7 +134,7 @@ export default {
 
 .night-mode {
 	.queue-item {
-		background-color: $dark-grey-2 !important;
+		background-color: var(--dark-grey-2) !important;
 		border: 0 !important;
 	}
 }

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

@@ -129,13 +129,13 @@ export default {
 
 .night-mode {
 	#queue {
-		background-color: $night-mode-bg-secondary !important;
+		background-color: var(--dark-grey-3) !important;
 		border: 0 !important;
 	}
 }
 
 #queue {
-	background-color: #fff;
+	background-color: var(--white);
 	border-radius: 0 0 5px 5px;
 
 	.actionable-button-hidden {

frontend/src/pages/Station/components/Sidebar/Users.vue

@@ -104,17 +104,17 @@ export default {
 
 .night-mode {
 	#users {
-		background-color: $night-mode-bg-secondary !important;
+		background-color: var(--dark-grey-3) !important;
 		border: 0 !important;
 	}
 
 	a {
-		color: $night-mode-text;
-		background-color: $dark-grey-2 !important;
+		color: var(--light-grey-2);
+		background-color: var(--dark-grey-2) !important;
 		border: 0 !important;
 
 		&:hover {
-			color: lighten($night-mode-text, 10%) !important;
+			color: var(--light-grey) !important;
 		}
 	}
 }
@@ -129,7 +129,7 @@ export default {
 }
 
 #users {
-	background-color: #fff;
+	background-color: var(--white);
 	margin-bottom: 20px;
 	border-radius: 0 0 5px 5px;
 	max-height: 100%;
@@ -154,13 +154,13 @@ export default {
 				display: flex;
 				align-items: center;
 				padding: 5px 10px;
-				border: 0.5px $light-grey-2 solid;
+				border: 0.5px var(--light-grey-3) solid;
 				border-radius: 3px;
 				cursor: pointer;
 
 				&:hover {
-					background-color: #eee;
-					color: #000;
+					background-color: var(--light-grey);
+					color: var(--black);
 				}
 
 				.profile-picture {

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

@@ -71,8 +71,8 @@ export default {
 
 .night-mode {
 	#tab-selection .button {
-		background: $dark-grey;
-		color: #fff;
+		background: var(--dark-grey);
+		color: var(--white);
 	}
 }
 
@@ -80,7 +80,7 @@ export default {
 	width: 100%;
 	height: calc(100% - 36px);
 	position: absolute;
-	border: 1px solid $light-grey-2;
+	border: 1px solid var(--light-grey-3);
 	border-top: 0;
 }
 
@@ -92,8 +92,8 @@ export default {
 		border: 0;
 		text-transform: uppercase;
 		font-size: 17px;
-		color: $night-mode-bg-secondary;
-		background-color: $night-mode-text;
+		color: var(--dark-grey-3);
+		background-color: var(--light-grey-2);
 		flex-grow: 1;
 
 		&:not(:first-of-type) {
@@ -102,8 +102,8 @@ export default {
 	}
 
 	.selected {
-		background-color: $night-mode-bg-secondary !important;
-		color: #fff !important;
+		background-color: var(--dark-grey-3) !important;
+		color: var(--white) !important;
 	}
 }
 
@@ -116,7 +116,7 @@ export default {
 	bottom: 0;
 	border: 0;
 	background-color: var(--station-theme) !important;
-	color: $white !important;
+	color: var(--white) !important;
 
 	&:active,
 	&:focus {
@@ -146,15 +146,15 @@ export default {
 }
 
 /deep/ ::-webkit-scrollbar-track {
-	background-color: #fff;
-	border: 1px solid $light-grey-2;
+	background-color: var(--white);
+	border: 1px solid var(--light-grey-3);
 }
 
 /deep/ ::-webkit-scrollbar-thumb {
-	background-color: $dark-grey;
+	background-color: var(--dark-grey);
 
 	&:hover {
-		background-color: darken($dark-grey, 10%);
+		filter: brightness(95%);
 	}
 }
 </style>

frontend/src/pages/Station/index.vue

@@ -1618,7 +1618,7 @@ export default {
 #mobile-progress-animation {
 	width: 50px;
 	animation: rotate 0.8s infinite linear;
-	border: 8px solid $primary-color;
+	border: 8px solid var(--primary-color);
 	border-right-color: transparent;
 	border-radius: 50%;
 	height: 50px;
@@ -1651,7 +1651,7 @@ export default {
 		flex-direction: column;
 
 		b {
-			color: #000;
+			color: var(--black);
 		}
 	}
 }
@@ -1661,7 +1661,7 @@ export default {
 	#about-station-container,
 	#control-bar-container,
 	.player-container {
-		background-color: $night-mode-bg-secondary !important;
+		background-color: var(--dark-grey-3) !important;
 	}
 
 	#video-container,
@@ -1672,15 +1672,15 @@ export default {
 	}
 
 	#seeker-bar-container {
-		background-color: $night-mode-bg-secondary !important;
+		background-color: var(--dark-grey-3) !important;
 	}
 
 	#dropdown-toggle {
-		background-color: $dark-grey-2 !important;
+		background-color: var(--dark-grey-2) !important;
 		border: 0;
 
 		i {
-			color: #fff;
+			color: var(--white);
 		}
 	}
 }
@@ -1719,8 +1719,8 @@ export default {
 		}
 
 		.quadrant:not(#sidebar-container) {
-			background-color: #fff;
-			border: 1px solid $light-grey-2;
+			background-color: var(--white);
+			border: 1px solid var(--light-grey-3);
 		}
 
 		#station-left-column {
@@ -1750,7 +1750,7 @@ export default {
 					i {
 						margin-left: 10px;
 						font-size: 30px;
-						color: $yellow;
+						color: var(--yellow);
 					}
 				}
 
@@ -1785,10 +1785,10 @@ export default {
 
 		.player-container {
 			height: inherit;
-			background-color: #fff;
+			background-color: var(--white);
 			display: flex;
 			flex-direction: column;
-			border: 1px solid $light-grey-2;
+			border: 1px solid var(--light-grey-3);
 			border-radius: 5px;
 			overflow: hidden;
 			flex-grow: 1;
@@ -1812,7 +1812,7 @@ export default {
 					justify-content: center;
 
 					p {
-						color: $white;
+						color: var(--white);
 						font-size: 26px;
 						text-align: center;
 					}
@@ -1820,7 +1820,7 @@ export default {
 			}
 
 			#seeker-bar-container {
-				background-color: #fff;
+				background-color: var(--white);
 				position: relative;
 				height: 7px;
 				display: block;
@@ -1841,7 +1841,7 @@ export default {
 				justify-content: space-around;
 				padding: 10px 0;
 				width: 100%;
-				background: #fff;
+				background: var(--white);
 				flex-direction: column;
 				flex-flow: wrap;
 
@@ -1903,7 +1903,7 @@ export default {
 						height: 5.2px;
 						cursor: pointer;
 						box-shadow: 0;
-						background: $light-grey-2;
+						background: var(--light-grey-3);
 						border-radius: 0;
 						border: 0;
 					}
@@ -1925,7 +1925,7 @@ export default {
 						height: 5.2px;
 						cursor: pointer;
 						box-shadow: 0;
-						background: $light-grey-2;
+						background: var(--light-grey-3);
 						border-radius: 0;
 						border: 0;
 					}
@@ -1946,19 +1946,19 @@ export default {
 						height: 5.2px;
 						cursor: pointer;
 						box-shadow: 0;
-						background: $light-grey-2;
+						background: var(--light-grey-3);
 						border-radius: 1.3px;
 					}
 
 					input[type="range"]::-ms-fill-lower {
-						background: $light-grey-2;
+						background: var(--light-grey-3);
 						border: 0;
 						border-radius: 0;
 						box-shadow: 0;
 					}
 
 					input[type="range"]::-ms-fill-upper {
-						background: $light-grey-2;
+						background: var(--light-grey-3);
 						border: 0;
 						border-radius: 0;
 						box-shadow: 0;
@@ -1992,22 +1992,9 @@ export default {
 					#ratings {
 						display: flex;
 
-						#like-song:hover,
-						#like-song.liked {
-							background-color: darken($green, 5%) !important;
-						}
-
-						#dislike-song:hover,
-						#dislike-song.disliked {
-							background-color: darken($red, 5%) !important;
-						}
-
 						&.liked #dislike-song,
 						&.disliked #like-song {
-							background-color: $grey !important;
-							&:hover {
-								background-color: darken($grey, 5%) !important;
-							}
+							background-color: var(--grey) !important;
 						}
 					}
 

frontend/src/pages/Team.vue

@@ -132,9 +132,9 @@ export default {
 
 .night-mode {
 	.card {
-		background-color: $night-mode-bg-secondary;
+		background-color: var(--dark-grey-3);
 		p {
-			color: $night-mode-text;
+			color: var(--light-grey-2);
 		}
 	}
 }
@@ -169,24 +169,24 @@ ul {
 }
 
 .custom-tag.blue {
-	border-bottom: 2px #0066f4 solid;
+	border-bottom: 2px var(--dark-blue) solid;
 }
 
 .custom-tag.pink {
-	border-bottom: 2px #ff99dd solid;
+	border-bottom: 2px var(--light-pink) solid;
 }
 
 .custom-tag.light-blue {
-	border-bottom: 2px #00baf4 solid;
+	border-bottom: 2px var(--blue) solid;
 	background-color: transparent !important;
 }
 
 .custom-tag.light-green {
-	border-bottom: 2px #019875 solid;
+	border-bottom: 2px var(--teal) solid;
 }
 
 .custom-tag.purple {
-	border-bottom: 2px $purple solid;
+	border-bottom: 2px var(--purple) solid;
 }
 
 #special-thanks {