feat(station themes): Added dark mode and themes to station page

backend/logic/db/schemas/station.js

@@ -40,5 +40,5 @@ module.exports = {
 	owner: { type: String },
 	privatePlaylist: { type: mongoose.Schema.Types.ObjectId },
 	partyMode: { type: Boolean },
-	theme: { type: String, enum: ["blue", "purple", "teal"], default: "blue" }
+	theme: { type: String, enum: ["blue", "purple", "teal", "dark"], default: "blue" }
 };

frontend/components/Modals/EditStation.vue

@@ -322,6 +322,19 @@
 							<i class="material-icons">palette</i>
 							Teal
 						</button>
+						<button
+							v-bind:class="{
+								dark: true,
+								current: editing.theme === 'dark'
+							}"
+							v-if="
+								themeDropdownActive || editing.theme === 'dark'
+							"
+							@click="updateThemeLocal('dark')"
+						>
+							<i class="material-icons">palette</i>
+							Dark
+						</button>
 					</div>
 				</div>
 			</div>
@@ -1136,9 +1149,9 @@ export default {
 		&.purple {
 			&.current,
 			&:hover {
-				background-color: $purple;
+				background-color: $light-purple;
 			}
-			background-color: rgba($purple, 0.7);
+			background-color: rgba($light-purple, 0.7);
 			transition: all 0.3s ease-in-out;
 		}
 
@@ -1151,6 +1164,15 @@ export default {
 			transition: all 0.3s ease-in-out;
 		}
 
+		&.dark {
+			&.current,
+			&:hover {
+				background-color: $dark-grey;
+			}
+			background-color: rgba($dark-grey, 0.7);
+			transition: all 0.3s ease-in-out;
+		}
+
 		i {
 			font-size: 20px;
 			margin-right: 4px;

frontend/components/Station/Station.vue

@@ -1,5 +1,12 @@
 <template>
-	<div>
+	<div
+		:class="{
+			blueTheme: station.theme === 'blue',
+			purpleTheme: station.theme === 'purple',
+			tealTheme: station.theme === 'teal',
+			darkTheme: station.theme === 'dark'
+		}"
+	>
 		<metadata
 			v-if="exists && !loading"
 			v-bind:title="`${station.displayName}`"
@@ -98,7 +105,7 @@
 						id="preview-progress"
 						class="seeker-bar-container white"
 					>
-						<div class="seeker-bar light-blue" style="width: 0%;" />
+						<div class="seeker-bar" style="width: 0%;" />
 					</div>
 				</div>
 				<div
@@ -1363,7 +1370,7 @@ export default {
 		0 2px 10px 0 rgba(0, 0, 0, 0.12);
 	.slideout-header {
 		text-align: center;
-		background-color: rgb(3, 169, 244) !important;
+		background-color: $primary-color !important;
 		margin: 0;
 		padding-top: 5px;
 		padding-bottom: 7px;
@@ -1386,6 +1393,7 @@ export default {
 	margin: 0 auto;
 	max-width: 100%;
 	width: 90%;
+	min-height: calc(100vh - 66px);
 
 	@media only screen and (min-width: 993px) {
 		width: 70%;
@@ -1647,6 +1655,7 @@ export default {
 	left: 0;
 	bottom: 0;
 	position: absolute;
+	background-color: $musareBlue;
 }
 
 ul {
@@ -1795,4 +1804,123 @@ h6 {
 .experimental {
 	display: none !important;
 }
+
+.purpleTheme {
+	.slideout .slideout-header,
+	.sidebar .title,
+	.seeker-bar,
+	.add-to-queue,
+	.add-to-playlist,
+	.create-playlist {
+		background-color: $light-purple !important;
+	}
+	.player-can-not-autoplay {
+		background: rgba($light-purple, 0.95);
+	}
+	.no-song {
+		color: $light-purple;
+	}
+	.station input[type="range"] {
+		&::-webkit-slider-thumb {
+			background: $light-purple !important;
+		}
+		&::-moz-range-thumb {
+			background: $light-purple !important;
+		}
+		&::-ms-thumb {
+			background: $light-purple !important;
+		}
+	}
+}
+.tealTheme {
+	.slideout .slideout-header,
+	.sidebar .title,
+	.seeker-bar,
+	.add-to-queue,
+	.add-to-playlist,
+	.create-playlist {
+		background-color: $teal !important;
+	}
+	.player-can-not-autoplay {
+		background: rgba($teal, 0.95);
+	}
+	.no-song {
+		color: $teal;
+	}
+	.station input[type="range"] {
+		&::-webkit-slider-thumb {
+			background: $teal !important;
+		}
+		&::-moz-range-thumb {
+			background: $teal !important;
+		}
+		&::-ms-thumb {
+			background: $teal !important;
+		}
+	}
+}
+.blueTheme {
+	.slideout .slideout-header,
+	.sidebar .title,
+	.seeker-bar,
+	.add-to-queue,
+	.add-to-playlist,
+	.create-playlist {
+		background-color: $musareBlue !important;
+	}
+	.player-can-not-autoplay {
+		background: rgba($musareBlue, 0.95);
+	}
+	.no-song {
+		color: $musareBlue;
+	}
+	.station input[type="range"] {
+		&::-webkit-slider-thumb {
+			background: $musareBlue !important;
+		}
+		&::-moz-range-thumb {
+			background: $musareBlue !important;
+		}
+		&::-ms-thumb {
+			background: $musareBlue !important;
+		}
+	}
+}
+.darkTheme {
+	background: $dark-grey;
+	color: $light-grey;
+	.seeker-bar,
+	.add-to-queue,
+	.add-to-playlist,
+	.create-playlist {
+		background-color: $dark-grey-2 !important;
+	}
+	.sidebar,
+	.slideout {
+		background-color: $dark-grey !important;
+		.slideout-header,
+		.title {
+			background-color: $dark-grey-2 !important;
+		}
+	}
+	.player-can-not-autoplay {
+		background: rgba($dark-grey-3, 0.95);
+	}
+	.no-song,
+	.content,
+	strong {
+		color: $light-grey;
+	}
+	.station input[type="range"] {
+		&::-webkit-slider-thumb {
+			background: $dark-grey-3 !important;
+		}
+		&::-moz-range-thumb {
+			background: $dark-grey-3 !important;
+		}
+		&::-ms-thumb {
+			background: $dark-grey-3 !important;
+		}
+	}
+}
 </style>

frontend/components/Station/StationHeader.vue

@@ -492,4 +492,89 @@ a.nav-item.is-tab:hover {
 	opacity: 1;
 	display: block;
 }
+
+.purpleTheme {
+	.nav {
+		background-color: $light-purple;
+		.is-brand img {
+			color: $light-purple;
+		}
+		.nav-right.is-active .nav-item {
+			background: $light-purple;
+		}
+	}
+	.control-sidebar {
+		background-color: $light-purple;
+		.sidebar-item .icon-purpose {
+			background-color: rgba($light-purple, 0.8);
+			&::after {
+				border-color: transparent rgba($light-purple, 0.8) transparent
+					transparent;
+			}
+		}
+	}
+}
+.tealTheme {
+	.nav {
+		background-color: $teal;
+		.is-brand img {
+			color: $teal;
+		}
+		.nav-right.is-active .nav-item {
+			background: $teal;
+		}
+	}
+	.control-sidebar {
+		background-color: $teal;
+		.sidebar-item .icon-purpose {
+			background-color: rgba($teal, 0.8);
+			&::after {
+				border-color: transparent rgba($teal, 0.8) transparent
+					transparent;
+			}
+		}
+	}
+}
+.blueTheme {
+	.nav {
+		background-color: $musareBlue;
+		.is-brand img {
+			color: $musareBlue;
+		}
+		.nav-right.is-active .nav-item {
+			background: $musareBlue;
+		}
+	}
+	.control-sidebar {
+		background-color: $musareBlue;
+		.sidebar-item .icon-purpose {
+			background-color: rgba($musareBlue, 0.8);
+			&::after {
+				border-color: transparent rgba($musareBlue, 0.8) transparent
+					transparent;
+			}
+		}
+	}
+}
+.darkTheme {
+	.nav {
+		background-color: $dark-grey-3;
+		.is-brand img {
+			color: $light-grey-2;
+		}
+		.nav-right.is-active .nav-item {
+			background: $dark-grey-3;
+		}
+	}
+	.control-sidebar {
+		background-color: $dark-grey-3;
+		.sidebar-item .icon-purpose {
+			background-color: rgba($dark-grey-3, 0.8);
+			&::after {
+				border-color: transparent rgba($dark-grey-3, 0.8) transparent
+					transparent;
+			}
+		}
+	}
+}
 </style>

frontend/components/pages/Home.vue

@@ -33,7 +33,8 @@
 							stationCard: true,
 							blueTheme: station.theme === 'blue',
 							purpleTheme: station.theme === 'purple',
-							tealTheme: station.theme === 'teal'
+							tealTheme: station.theme === 'teal',
+							darkTheme: station.theme === 'dark'
 						}"
 					>
 						<div class="topContent">
@@ -529,7 +530,7 @@ html {
 	.bottomBar {
 		display: inline-flex;
 		background: $primary-color;
-		box-shadow: inset 0px 2px 4px rgba(7, 136, 191, 0.6);
+		box-shadow: inset 0px 2px 4px rgba(darken($primary-color, 7), 0.7);
 		width: 100%;
 		height: 30px;
 		line-height: 30px;
@@ -561,30 +562,69 @@ html {
 			}
 		}
 	}
+	&.blueTheme {
+		.topContent .info {
+			.hostedBy .host,
+			.hostedBy .host a,
+			.displayName .badge,
+			.bottomIcons .homeIcon {
+				color: $musareBlue;
+			}
+		}
+		.bottomBar {
+			background: $musareBlue;
+			box-shadow: inset 0px 2px 4px rgba(darken($musareBlue, 7), 0.7);
+		}
+	}
 	&.purpleTheme {
 		.topContent .info {
 			.hostedBy .host,
 			.hostedBy .host a,
-			.displayName .badge {
-				color: $purple;
+			.displayName .badge,
+			.bottomIcons .homeIcon {
+				color: $light-purple;
 			}
 		}
 		.bottomBar {
-			background: $purple;
-			box-shadow: inset 0px 2px 4px rgba(103, 12, 100, 0.7);
+			background: $light-purple;
+			box-shadow: inset 0px 2px 4px rgba(darken($light-purple, 7), 0.7);
 		}
 	}
 	&.tealTheme {
 		.topContent .info {
 			.hostedBy .host,
 			.hostedBy .host a,
-			.displayName .badge {
+			.displayName .badge,
+			.bottomIcons .homeIcon {
 				color: $teal;
 			}
 		}
 		.bottomBar {
 			background: $teal;
-			box-shadow: inset 0px 2px 4px rgba(20, 160, 122, 0.7);
+			box-shadow: inset 0px 2px 4px rgba(darken($teal, 7), 0.7);
+		}
+	}
+	&.darkTheme {
+		background: $dark-grey;
+		color: $light-grey;
+		.albumArt {
+			box-shadow: 1px 0px 3px rgba($dark-grey-3, 0.3);
+		}
+		.topContent .info {
+			.hostedBy .host,
+			.hostedBy .host a,
+			.displayName,
+			.displayName .badge,
+			.bottomIcons .homeIcon {
+				color: $light-grey;
+			}
+			.hostedBy {
+				color: $light-grey-2;
+			}
+		}
+		.bottomBar {
+			background: $dark-grey-2;
+			box-shadow: inset 0px 2px 4px rgba(darken($dark-grey, 7), 0.7);
 		}
 	}
 }