Station themes now use css variables

frontend/src/App.vue

@@ -191,7 +191,7 @@ export default {
 	--yellow: rgb(241, 196, 15);
 	--light-pink: rgb(228, 155, 166);
 	--dark-pink: rgb(234, 72, 97);
-	--light-orange: rgb(255, 94, 0);
+	--orange: rgb(255, 94, 0);
 	--dark-orange: rgb(250, 50, 0);
 	--green: rgb(68, 189, 50);
 	--red: rgb(231, 77, 60);

frontend/src/components/modals/EditStation.vue

@@ -1115,7 +1115,7 @@ export default {
 			}
 
 			&.orange {
-				background-color: var(--light-orange);
+				background-color: var(--orange);
 			}
 
 			&.yellow {

frontend/src/components/ui/ProfilePicture.vue

@@ -67,7 +67,7 @@ export default {
 			color: var(--white);
 		}
 		&.orange {
-			background-color: var(--light-orange);
+			background-color: var(--orange);
 			color: var(--white);
 		}
 		&.green {

frontend/src/pages/Admin/index.vue

@@ -238,12 +238,12 @@ export default {
 		border-color: var(--dark-pink);
 	}
 	.statistics {
-		color: var(--light-orange);
-		border-color: var(--light-orange);
+		color: var(--orange);
+		border-color: var(--orange);
 	}
 	.newstatistics {
-		color: var(--light-orange);
-		border-color: var(--light-orange);
+		color: var(--orange);
+		border-color: var(--orange);
 	}
 	.punishments {
 		color: var(--dark-orange);

frontend/src/pages/Home/index.vue

@@ -62,7 +62,7 @@
 						isPrivate: station.privacy === 'private',
 						isMine: isOwner(station)
 					}"
-					:style="'--station-theme: ' + station.themeCode"
+					:style="'--station-theme: var(--' + station.theme + ')'"
 				>
 					<div class="card-image">
 						<figure class="image is-square">
@@ -210,7 +210,6 @@
 						})
 					"
 					class="card station-card createStation"
-					:style="'--station-theme: rgb(2, 166, 242)'"
 				>
 					<div class="card-image">
 						<figure class="image is-square">
@@ -230,11 +229,7 @@
 					</div>
 					<div class="bottomBar"></div>
 				</a>
-				<a
-					v-else
-					class="card station-card createStation"
-					:style="'--station-theme: rgb(2, 166, 242)'"
-				>
+				<a v-else class="card station-card createStation">
 					<div class="card-image">
 						<figure class="image is-square">
 							<i class="material-icons">radio</i>
@@ -264,7 +259,7 @@
 						isPrivate: station.privacy === 'private',
 						isMine: isOwner(station)
 					}"
-					:style="'--station-theme: ' + station.themeCode"
+					:style="'--station-theme: var(--' + station.theme + ')'"
 				>
 					<div class="card-image">
 						<figure class="image is-square">
@@ -565,17 +560,6 @@ export default {
 					const station = s;
 					if (station._id === stationId) {
 						station.theme = theme;
-						if (theme === "blue") {
-							station.themeCode = "rgb(2, 166, 242)";
-						} else if (theme === "purple") {
-							station.themeCode = "rgb(143, 40, 140)";
-						} else if (theme === "teal") {
-							station.themeCode = "rgb(0, 209, 178)";
-						} else if (theme === "orange") {
-							station.themeCode = "rgb(255, 94, 0)";
-						} else {
-							station.themeCode = "rgb(2, 166, 242)";
-						}
 					}
 				});
 			});
@@ -655,18 +639,6 @@ export default {
 						)
 							modifiableStation.currentSong.ytThumbnail = `https://img.youtube.com/vi/${station.currentSong.songId}/mqdefault.jpg`;
 
-						if (modifiableStation.theme === "blue") {
-							modifiableStation.themeCode = "rgb(2, 166, 242)";
-						} else if (modifiableStation.theme === "purple") {
-							modifiableStation.themeCode = "rgb(143, 40, 140)";
-						} else if (modifiableStation.theme === "teal") {
-							modifiableStation.themeCode = "rgb(0, 209, 178)";
-						} else if (modifiableStation.theme === "orange") {
-							modifiableStation.themeCode = "rgb(255, 94, 0)";
-						} else {
-							modifiableStation.themeCode = "rgb(2, 166, 242)";
-						}
-
 						this.stations.push(modifiableStation);
 					});
 			});
@@ -907,7 +879,7 @@ html {
 			margin-left: 5px;
 		}
 		.unlistedIcon {
-			color: var(--light-orange);
+			color: var(--orange);
 		}
 		.privateIcon {
 			color: var(--dark-pink);
@@ -924,7 +896,7 @@ html {
 		.host,
 		.host a {
 			font-weight: 400;
-			color: var(--station-theme);
+			color: var(--primary-color);
 			&:hover,
 			&:focus {
 				filter: brightness(90%);
@@ -963,6 +935,8 @@ html {
 	box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
 	transition: all ease-in-out 0.2s;
 
+	--primary-color: var(--station-theme);
+
 	.card-content {
 		padding: 10px 10px 10px 15px;
 		display: flex;
@@ -1009,7 +983,7 @@ html {
 				}
 
 				.verified-station {
-					color: var(--station-theme);
+					color: var(--primary-color);
 				}
 			}
 		}
@@ -1058,7 +1032,7 @@ html {
 		position: relative;
 		display: flex;
 		align-items: center;
-		background: var(--station-theme);
+		background: var(--primary-color);
 		// box-shadow: inset 0px 2px 4px rgba(100, 100, 100, 0.3);
 		width: 100%;
 		height: 30px;
@@ -1096,7 +1070,7 @@ html {
 			right: 0;
 			text-align: center;
 			font-size: 70px;
-			color: var(--station-theme);
+			color: var(--primary-color);
 		}
 		.card-content {
 			.media {

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

@@ -248,7 +248,7 @@ export default {
 				left: 2px;
 				top: 2px;
 				border-radius: 3px;
-				background-color: var(--station-theme);
+				background-color: var(--primary-color);
 				position: absolute;
 			}
 		}

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

@@ -170,7 +170,7 @@ export default {
 			flex-direction: column;
 			flex-grow: 1;
 			h6 {
-				color: var(--station-theme) !important;
+				color: var(--primary-color) !important;
 				font-weight: bold;
 				font-size: 17px;
 			}
@@ -221,7 +221,7 @@ export default {
 			}
 
 			#editsong-icon.button.is-primary {
-				background-color: var(--station-theme) !important;
+				background-color: var(--primary-color) !important;
 				&:hover,
 				&:focus {
 					filter: brightness(90%);

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

@@ -232,7 +232,7 @@ export default {
 	align-items: center;
 
 	.edit-icon {
-		color: var(--station-theme);
+		color: var(--primary-color);
 	}
 }
 

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

@@ -175,7 +175,7 @@ export default {
 	}
 
 	.edit-icon {
-		color: var(--station-theme);
+		color: var(--primary-color);
 	}
 }
 </style>

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

@@ -120,7 +120,7 @@ export default {
 	position: absolute;
 	bottom: 0;
 	border: 0;
-	background-color: var(--station-theme) !important;
+	background-color: var(--primary-color) !important;
 	color: var(--white) !important;
 
 	&:active,
@@ -130,7 +130,7 @@ export default {
 
 	&:hover,
 	&:focus {
-		background-color: var(--station-theme) !important;
+		background-color: var(--primary-color) !important;
 		filter: brightness(90%);
 	}
 }

frontend/src/pages/Station/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<div :style="'--station-theme: ' + theme">
+	<div :style="'--station-theme: var(--' + station.theme + ')'">
 		<metadata v-if="exists && !loading" :title="`${station.displayName}`" />
 		<metadata v-else-if="!exists && !loading" :title="`Not found`" />
 
@@ -545,7 +545,7 @@ export default {
 			volumeSliderValue: 0,
 			showPlaylistDropdown: false,
 			editingSongId: "",
-			theme: "rgb(2, 166, 242)"
+			theme: "var(--primary-color)"
 		};
 	},
 	computed: {
@@ -758,15 +758,6 @@ export default {
 
 			this.socket.on("event:theme.updated", theme => {
 				this.station.theme = theme;
-				if (theme === "blue") {
-					this.theme = "rgb(2, 166, 242)";
-				} else if (theme === "purple") {
-					this.theme = "rgb(143, 40, 140)";
-				} else if (theme === "teal") {
-					this.theme = "rgb(0, 209, 178)";
-				} else if (theme === "orange") {
-					this.theme = "rgb(255, 94, 0)";
-				}
 			});
 
 			this.socket.on("event:newOfficialPlaylist", playlist => {
@@ -1427,16 +1418,6 @@ export default {
 						theme
 					});
 
-					if (this.station.theme === "blue") {
-						this.theme = "rgb(2, 166, 242)";
-					} else if (this.station.theme === "purple") {
-						this.theme = "rgb(143, 40, 140)";
-					} else if (this.station.theme === "teal") {
-						this.theme = "rgb(0, 209, 178)";
-					} else if (this.station.theme === "orange") {
-						this.theme = "rgb(255, 94, 0)";
-					}
-
 					const currentSong = res.data.currentSong
 						? res.data.currentSong
 						: {};
@@ -1657,6 +1638,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.main-container {
+	--primary-color: var(--station-theme);
+}
+
 #page-loader-container {
 	height: inherit;
 
@@ -1699,7 +1684,7 @@ export default {
 
 .nav,
 .button.is-primary {
-	background-color: var(--station-theme) !important;
+	background-color: var(--primary-color) !important;
 }
 .button.is-primary:hover,
 .button.is-primary:focus {
@@ -1866,7 +1851,7 @@ export default {
 					width: 100%;
 					height: 100%;
 					bottom: calc(100% + 5px);
-					background: var(--station-theme);
+					background: var(--primary-color);
 					display: flex;
 					align-items: center;
 					justify-content: center;
@@ -1888,7 +1873,7 @@ export default {
 				overflow: hidden;
 
 				#seeker-bar {
-					background-color: var(--station-theme);
+					background-color: var(--primary-color);
 					top: 0;
 					left: 0;
 					bottom: 0;
@@ -1978,7 +1963,7 @@ export default {
 						height: 19px;
 						width: 19px;
 						border-radius: 15px;
-						background: var(--station-theme);
+						background: var(--primary-color);
 						cursor: pointer;
 						-webkit-appearance: none;
 						margin-top: -6.5px;
@@ -2000,7 +1985,7 @@ export default {
 						height: 19px;
 						width: 19px;
 						border-radius: 15px;
-						background: var(--station-theme);
+						background: var(--primary-color);
 						cursor: pointer;
 						-webkit-appearance: none;
 						margin-top: -6.5px;
@@ -2034,7 +2019,7 @@ export default {
 						height: 15px;
 						width: 15px;
 						border-radius: 15px;
-						background: var(--station-theme);
+						background: var(--primary-color);
 						cursor: pointer;
 						-webkit-appearance: none;
 						margin-top: 1.5px;