style(css): all night mode colors now use scss variables

Signed-off-by: Jonathan <theflametrooper@gmail.com>

frontend/src/App.vue

@@ -184,7 +184,7 @@ export default {
 .night-mode {
 	div {
 		// background-color: #000;
-		color: #ddd;
+		color: $night-mode-text;
 	}
 
 	#toasts-container .toast {
@@ -207,7 +207,7 @@ export default {
 
 	p:not(.help),
 	label {
-		color: #ddd !important;
+		color: $night-mode-text !important;
 	}
 }
 

frontend/src/components/Modal.vue

@@ -43,10 +43,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "../styles/global.scss";
+
 .night-mode {
 	.modal-card-head,
 	.modal-card-foot {
-		background-color: #222;
+		background-color: $night-mode-bg-secondary;
 		border-color: #333;
 	}
 
@@ -61,7 +63,7 @@ export default {
 	p,
 	label,
 	td {
-		color: #ddd !important;
+		color: $night-mode-text !important;
 	}
 
 	h1,

frontend/src/components/Sidebar.vue

@@ -25,14 +25,14 @@ export default {
 
 .night-mode {
 	.sidebar {
-		background-color: $night-mode-secondary;
+		background-color: $night-mode-bg-secondary;
 
 		.sidebar-title {
 			color: #fff;
 		}
 
 		* {
-			color: #ddd;
+			color: $night-mode-text;
 		}
 	}
 }

frontend/src/components/layout/MainFooter.vue

@@ -84,7 +84,7 @@ export default {
 	footer.footer,
 	footer.footer .container,
 	footer.footer .container .footer-content {
-		background-color: #222;
+		background-color: $night-mode-bg-secondary;
 	}
 
 	footer.footer #footer-social-icons img {

frontend/src/components/layout/MainHeader.vue

@@ -115,11 +115,11 @@ export default {
 .night-mode {
 	.nav-left,
 	.nav-right {
-		background-color: #222;
+		background-color: $night-mode-bg-secondary;
 	}
 
 	.nav-item {
-		color: #ddd !important;
+		color: $night-mode-text !important;
 	}
 }
 

frontend/src/components/modals/EditSong.vue

@@ -1410,7 +1410,7 @@ export default {
 	.api-section,
 	.api-result,
 	.player-footer {
-		background-color: #222 !important;
+		background-color: $night-mode-bg-secondary !important;
 	}
 
 	.api-result .tracks .track:hover,
@@ -1421,7 +1421,7 @@ export default {
 	.label,
 	p,
 	strong {
-		color: #ddd;
+		color: $night-mode-text;
 	}
 }
 

frontend/src/components/modals/EditStation.vue

@@ -1011,18 +1011,18 @@ export default {
 	.modal-card-head,
 	.modal-card-body,
 	.modal-card-foot {
-		background-color: $night-mode-secondary;
+		background-color: $night-mode-bg-secondary;
 	}
 
 	.section {
-		background-color: #222 !important;
+		background-color: $night-mode-bg-secondary !important;
 		border: 0 !important;
 	}
 
 	.label,
 	p,
 	strong {
-		color: #ddd;
+		color: $night-mode-text;
 	}
 }
 

frontend/src/components/modals/Login.vue

@@ -130,12 +130,12 @@ export default {
 	.modal-card-head,
 	.modal-card-body,
 	.modal-card-foot {
-		background-color: $night-mode-secondary;
+		background-color: $night-mode-bg-secondary;
 	}
 
 	.label,
 	p:not(.help) {
-		color: #ddd;
+		color: $night-mode-text;
 	}
 }
 

frontend/src/components/modals/Register.vue

@@ -268,12 +268,12 @@ export default {
 	.modal-card-head,
 	.modal-card-body,
 	.modal-card-foot {
-		background-color: $night-mode-secondary;
+		background-color: $night-mode-bg-secondary;
 	}
 
 	.label,
 	p:not(.help) {
-		color: #ddd;
+		color: $night-mode-text;
 	}
 }
 

frontend/src/components/modals/WhatIsNew.vue

@@ -133,12 +133,12 @@ export default {
 	.modal-card,
 	.modal-card-head,
 	.modal-card-body {
-		background-color: $night-mode-secondary;
+		background-color: $night-mode-bg-secondary;
 	}
 
 	strong,
 	p {
-		color: #ddd;
+		color: $night-mode-text;
 	}
 }
 

frontend/src/components/ui/PlaylistItem.vue

@@ -43,7 +43,7 @@ export default {
 
 .night-mode {
 	.playlist p {
-		color: #ddd !important;
+		color: $night-mode-text !important;
 	}
 }
 

frontend/src/pages/About.vue

@@ -84,11 +84,11 @@ export default {
 
 .night-mode {
 	.card {
-		background-color: $night-mode-secondary;
+		background-color: $night-mode-bg-secondary;
 	}
 
 	p {
-		color: #ddd;
+		color: $night-mode-text;
 	}
 }
 

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

@@ -246,11 +246,11 @@ export default {
 
 .night-mode {
 	.table {
-		color: #ddd;
-		background-color: #222;
+		color: $night-mode-text;
+		background-color: $night-mode-bg-secondary;
 
 		thead tr {
-			background: $night-mode-secondary;
+			background: $night-mode-bg-secondary;
 			td {
 				color: #fff;
 			}
@@ -265,15 +265,15 @@ export default {
 		}
 
 		strong {
-			color: #ddd;
+			color: $night-mode-text;
 		}
 	}
 
 	.card {
-		background-color: $night-mode-secondary;
+		background-color: $night-mode-bg-secondary;
 
 		p {
-			color: #ddd;
+			color: $night-mode-text;
 		}
 	}
 }

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

@@ -354,11 +354,11 @@ export default {
 
 .night-mode {
 	.table {
-		color: #ddd;
-		background-color: #222;
+		color: $night-mode-text;
+		background-color: $night-mode-bg-secondary;
 
 		thead tr {
-			background: $night-mode-secondary;
+			background: $night-mode-bg-secondary;
 			td {
 				color: #fff;
 			}
@@ -373,12 +373,12 @@ export default {
 		}
 
 		strong {
-			color: #ddd;
+			color: $night-mode-text;
 		}
 	}
 
 	.card {
-		background: #222;
+		background: $night-mode-bg-secondary;
 
 		.card-header {
 			box-shadow: 0 1px 2px rgba(10, 10, 10, 0.8);
@@ -386,7 +386,7 @@ export default {
 
 		p,
 		.label {
-			color: #ddd;
+			color: $night-mode-text;
 		}
 	}
 }

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

@@ -158,11 +158,11 @@ export default {
 
 .night-mode {
 	.table {
-		color: #ddd;
-		background-color: #222;
+		color: $night-mode-text;
+		background-color: $night-mode-bg-secondary;
 
 		thead tr {
-			background: $night-mode-secondary;
+			background: $night-mode-bg-secondary;
 			td {
 				color: #fff;
 			}
@@ -177,12 +177,12 @@ export default {
 		}
 
 		strong {
-			color: #ddd;
+			color: $night-mode-text;
 		}
 	}
 
 	.card {
-		background: #222;
+		background: $night-mode-bg-secondary;
 
 		.card-header {
 			box-shadow: 0 1px 2px rgba(10, 10, 10, 0.8);
@@ -190,7 +190,7 @@ export default {
 
 		p,
 		.label {
-			color: #ddd;
+			color: $night-mode-text;
 		}
 	}
 }

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

@@ -324,11 +324,11 @@ export default {
 
 .night-mode {
 	.table {
-		color: #ddd;
-		background-color: #222;
+		color: $night-mode-text;
+		background-color: $night-mode-bg-secondary;
 
 		thead tr {
-			background: $night-mode-secondary;
+			background: $night-mode-bg-secondary;
 			td {
 				color: #fff;
 			}
@@ -343,7 +343,7 @@ export default {
 		}
 
 		strong {
-			color: #ddd;
+			color: $night-mode-text;
 		}
 	}
 }

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

@@ -152,11 +152,11 @@ export default {
 
 .night-mode {
 	.table {
-		color: #ddd;
-		background-color: #222;
+		color: $night-mode-text;
+		background-color: $night-mode-bg-secondary;
 
 		thead tr {
-			background: $night-mode-secondary;
+			background: $night-mode-bg-secondary;
 			td {
 				color: #fff;
 			}
@@ -171,7 +171,7 @@ export default {
 		}
 
 		strong {
-			color: #ddd;
+			color: $night-mode-text;
 		}
 	}
 }

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

@@ -419,11 +419,11 @@ export default {
 
 .night-mode {
 	.table {
-		color: #ddd;
-		background-color: #222;
+		color: $night-mode-text;
+		background-color: $night-mode-bg-secondary;
 
 		thead tr {
-			background: $night-mode-secondary;
+			background: $night-mode-bg-secondary;
 			td {
 				color: #fff;
 			}
@@ -438,7 +438,7 @@ export default {
 		}
 
 		strong {
-			color: #ddd;
+			color: $night-mode-text;
 		}
 	}
 }

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

@@ -365,11 +365,11 @@ export default {
 
 .night-mode {
 	.table {
-		color: #ddd;
-		background-color: #222;
+		color: $night-mode-text;
+		background-color: $night-mode-bg-secondary;
 
 		thead tr {
-			background: $night-mode-secondary;
+			background: $night-mode-bg-secondary;
 			td {
 				color: #fff;
 			}
@@ -384,12 +384,12 @@ export default {
 		}
 
 		strong {
-			color: #ddd;
+			color: $night-mode-text;
 		}
 	}
 
 	.card {
-		background: #222;
+		background: $night-mode-bg-secondary;
 
 		.card-header {
 			box-shadow: 0 1px 2px rgba(10, 10, 10, 0.8);
@@ -397,7 +397,7 @@ export default {
 
 		p,
 		.label {
-			color: #ddd;
+			color: $night-mode-text;
 		}
 	}
 }

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

@@ -330,11 +330,11 @@ export default {
 
 .night-mode {
 	.table {
-		color: #ddd;
-		background-color: #222;
+		color: $night-mode-text;
+		background-color: $night-mode-bg-secondary;
 
 		thead tr {
-			background: $night-mode-secondary;
+			background: $night-mode-bg-secondary;
 			td {
 				color: #fff;
 			}
@@ -349,15 +349,15 @@ export default {
 		}
 
 		strong {
-			color: #ddd;
+			color: $night-mode-text;
 		}
 	}
 
 	.card {
-		background-color: $night-mode-secondary;
+		background-color: $night-mode-bg-secondary;
 
 		p {
-			color: #ddd;
+			color: $night-mode-text;
 		}
 	}
 }

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

@@ -115,11 +115,11 @@ export default {
 
 .night-mode {
 	.table {
-		color: #ddd;
-		background-color: #222;
+		color: $night-mode-text;
+		background-color: $night-mode-bg-secondary;
 
 		thead tr {
-			background: $night-mode-secondary;
+			background: $night-mode-bg-secondary;
 			td {
 				color: #fff;
 			}
@@ -134,7 +134,7 @@ export default {
 		}
 
 		strong {
-			color: #ddd;
+			color: $night-mode-text;
 		}
 	}
 }

frontend/src/pages/Home/index.vue

@@ -356,12 +356,12 @@ html {
 	.card,
 	.card-content,
 	.card-content div {
-		background-color: $night-mode-secondary;
+		background-color: $night-mode-bg-secondary;
 	}
 
 	.card-content .icons i,
 	.group-title i {
-		color: #ddd;
+		color: $night-mode-text;
 	}
 
 	.card-image .image {
@@ -369,7 +369,7 @@ html {
 	}
 
 	.card-content .under-content .hostedBy {
-		color: #ddd;
+		color: $night-mode-text;
 	}
 }
 

frontend/src/pages/News.vue

@@ -135,7 +135,7 @@ export default {
 
 .night-mode {
 	p {
-		color: #ddd;
+		color: $night-mode-text;
 	}
 }
 

frontend/src/pages/ResetPassword.vue

@@ -416,7 +416,7 @@ export default {
 
 .night-mode {
 	.label {
-		color: #ddd;
+		color: $night-mode-text;
 	}
 
 	.skip-step {

frontend/src/pages/Settings/index.vue

@@ -137,7 +137,7 @@ export default {
 
 .night-mode {
 	.content {
-		background-color: #222 !important;
+		background-color: $night-mode-bg-secondary !important;
 	}
 }
 

frontend/src/pages/Station/AddSongToQueue.vue

@@ -385,7 +385,7 @@ export default {
 
 .night-mode {
 	tr {
-		background-color: #222;
+		background-color: $night-mode-bg-secondary;
 	}
 }
 

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

@@ -164,7 +164,7 @@ export default {
 
 .night-mode {
 	#my-playlists {
-		background-color: #222 !important;
+		background-color: $night-mode-bg-secondary !important;
 		border: 0 !important;
 	}
 }

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

@@ -109,7 +109,7 @@ export default {
 
 .night-mode {
 	#queue-items {
-		background-color: #222 !important;
+		background-color: $night-mode-bg-secondary !important;
 		border: 0 !important;
 	}
 }

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

@@ -32,12 +32,12 @@ export default {
 
 .night-mode {
 	#users {
-		background-color: #222 !important;
+		background-color: $night-mode-bg-secondary !important;
 		border: 0 !important;
 	}
 
 	a {
-		color: #ddd;
+		color: $night-mode-text;
 	}
 }
 

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

@@ -72,8 +72,8 @@ export default {
 		border: 0;
 		text-transform: uppercase;
 		font-size: 17px;
-		color: #222;
-		background-color: #ddd;
+		color: $night-mode-bg-secondary;
+		background-color: $night-mode-text;
 		flex-grow: 1;
 
 		&:not(:first-of-type) {
@@ -82,7 +82,7 @@ export default {
 	}
 
 	.selected {
-		background-color: #222;
+		background-color: $night-mode-bg-secondary;
 		color: #fff;
 	}
 }

frontend/src/pages/Station/index.vue

@@ -1481,7 +1481,7 @@ export default {
 	#about-station-container,
 	#control-bar-container,
 	.player-container.nothing-here {
-		background-color: #222 !important;
+		background-color: $night-mode-bg-secondary !important;
 	}
 
 	#upper-row .quadrant,

frontend/src/pages/Team.vue

@@ -132,9 +132,9 @@ export default {
 
 .night-mode {
 	.card {
-		background-color: $night-mode-secondary;
+		background-color: $night-mode-bg-secondary;
 		p {
-			color: #ddd;
+			color: $night-mode-text;
 		}
 	}
 }

frontend/src/styles/colors.scss

@@ -24,4 +24,7 @@ $dark-grey-2: hsl(0, 0%, 20%);
 $dark-grey-3: hsl(0, 0%, 10%);
 
 $primary-color: $musare-blue;
-$night-mode-secondary: #222;
+
+/* DARK MODE */
+$night-mode-text: #ddd;
+$night-mode-bg-secondary: #222;