feat: night mode styling

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

frontend/App.vue

@@ -50,6 +50,14 @@ export default {
 		},
 		...mapActions("modals", ["closeCurrentModal"])
 	},
+	beforeMount() {
+		const nightmode = true || localStorage.getItem("nightmode");
+		if (nightmode) {
+			document
+				.getElementsByTagName("body")[0]
+				.classList.add("night-mode");
+		}
+	},
 	mounted() {
 		document.onkeydown = ev => {
 			const event = ev || window.event;
@@ -116,6 +124,22 @@ export default {
 <style lang="scss">
 @import "styles/global.scss";
 
+.night-mode {
+	div {
+		// background-color: #000;
+		color: #ddd;
+	}
+
+	#toasts-container .toast {
+		background-color: #ddd;
+		color: #333;
+	}
+}
+
+body.night-mode {
+	background-color: #000 !important;
+}
+
 #toasts-container {
 	z-index: 10000 !important;
 

frontend/components/Admin/News.vue

@@ -345,6 +345,45 @@ export default {
 <style lang="scss" scoped>
 @import "styles/global.scss";
 
+.night-mode {
+	.table {
+		color: #ddd;
+		background-color: #222;
+
+		thead tr {
+			background: $night-mode-secondary;
+			td {
+				color: #fff;
+			}
+		}
+
+		tbody tr:hover {
+			background-color: #111 !important;
+		}
+
+		tbody tr:nth-child(even) {
+			background-color: #444;
+		}
+
+		strong {
+			color: #ddd;
+		}
+	}
+
+	.card {
+		background: #222;
+
+		.card-header {
+			box-shadow: 0 1px 2px rgba(10, 10, 10, 0.8);
+		}
+
+		p,
+		.label {
+			color: #ddd;
+		}
+	}
+}
+
 .tag:not(:last-child) {
 	margin-right: 5px;
 }

frontend/components/Admin/Punishments.vue

@@ -178,6 +178,45 @@ export default {
 <style lang="scss" scoped>
 @import "styles/global.scss";
 
+.night-mode {
+	.table {
+		color: #ddd;
+		background-color: #222;
+
+		thead tr {
+			background: $night-mode-secondary;
+			td {
+				color: #fff;
+			}
+		}
+
+		tbody tr:hover {
+			background-color: #111 !important;
+		}
+
+		tbody tr:nth-child(even) {
+			background-color: #444;
+		}
+
+		strong {
+			color: #ddd;
+		}
+	}
+
+	.card {
+		background: #222;
+
+		.card-header {
+			box-shadow: 0 1px 2px rgba(10, 10, 10, 0.8);
+		}
+
+		p,
+		.label {
+			color: #ddd;
+		}
+	}
+}
+
 body {
 	font-family: "Roboto", sans-serif;
 }

frontend/components/Admin/QueueSongs.vue

@@ -235,6 +235,32 @@ export default {
 <style lang="scss" scoped>
 @import "styles/global.scss";
 
+.night-mode {
+	.table {
+		color: #ddd;
+		background-color: #222;
+
+		thead tr {
+			background: $night-mode-secondary;
+			td {
+				color: #fff;
+			}
+		}
+
+		tbody tr:hover {
+			background-color: #111 !important;
+		}
+
+		tbody tr:nth-child(even) {
+			background-color: #444;
+		}
+
+		strong {
+			color: #ddd;
+		}
+	}
+}
+
 .optionsColumn {
 	width: 140px;
 	button {

frontend/components/Admin/Reports.vue

@@ -147,6 +147,32 @@ export default {
 <style lang="scss" scoped>
 @import "styles/global.scss";
 
+.night-mode {
+	.table {
+		color: #ddd;
+		background-color: #222;
+
+		thead tr {
+			background: $night-mode-secondary;
+			td {
+				color: #fff;
+			}
+		}
+
+		tbody tr:hover {
+			background-color: #111 !important;
+		}
+
+		tbody tr:nth-child(even) {
+			background-color: #444;
+		}
+
+		strong {
+			color: #ddd;
+		}
+	}
+}
+
 .tag:not(:last-child) {
 	margin-right: 5px;
 }

frontend/components/Admin/Songs.vue

@@ -243,6 +243,32 @@ export default {
 <style lang="scss" scoped>
 @import "styles/global.scss";
 
+.night-mode {
+	.table {
+		color: #ddd;
+		background-color: #222;
+
+		thead tr {
+			background: $night-mode-secondary;
+			td {
+				color: #fff;
+			}
+		}
+
+		tbody tr:hover {
+			background-color: #111 !important;
+		}
+
+		tbody tr:nth-child(even) {
+			background-color: #444;
+		}
+
+		strong {
+			color: #ddd;
+		}
+	}
+}
+
 body {
 	font-family: "Roboto", sans-serif;
 }

frontend/components/Admin/Stations.vue

@@ -359,6 +359,45 @@ export default {
 <style lang="scss" scoped>
 @import "styles/global.scss";
 
+.night-mode {
+	.table {
+		color: #ddd;
+		background-color: #222;
+
+		thead tr {
+			background: $night-mode-secondary;
+			td {
+				color: #fff;
+			}
+		}
+
+		tbody tr:hover {
+			background-color: #111 !important;
+		}
+
+		tbody tr:nth-child(even) {
+			background-color: #444;
+		}
+
+		strong {
+			color: #ddd;
+		}
+	}
+
+	.card {
+		background: #222;
+
+		.card-header {
+			box-shadow: 0 1px 2px rgba(10, 10, 10, 0.8);
+		}
+
+		p,
+		.label {
+			color: #ddd;
+		}
+	}
+}
+
 .tag {
 	margin-top: 5px;
 	&:not(:last-child) {

frontend/components/Admin/Statistics.vue

@@ -330,6 +330,40 @@ export default {
 <style lang="scss" scoped>
 @import "styles/global.scss";
 
+.night-mode {
+	.table {
+		color: #ddd;
+		background-color: #222;
+
+		thead tr {
+			background: $night-mode-secondary;
+			td {
+				color: #fff;
+			}
+		}
+
+		tbody tr:hover {
+			background-color: #111 !important;
+		}
+
+		tbody tr:nth-child(even) {
+			background-color: #444;
+		}
+
+		strong {
+			color: #ddd;
+		}
+	}
+
+	.card {
+		background-color: $night-mode-secondary;
+
+		p {
+			color: #ddd;
+		}
+	}
+}
+
 body {
 	font-family: "Roboto", sans-serif;
 }

frontend/components/Admin/Users.vue

@@ -108,6 +108,32 @@ export default {
 <style lang="scss" scoped>
 @import "styles/global.scss";
 
+.night-mode {
+	.table {
+		color: #ddd;
+		background-color: #222;
+
+		thead tr {
+			background: $night-mode-secondary;
+			td {
+				color: #fff;
+			}
+		}
+
+		tbody tr:hover {
+			background-color: #111 !important;
+		}
+
+		tbody tr:nth-child(even) {
+			background-color: #444;
+		}
+
+		strong {
+			color: #ddd;
+		}
+	}
+}
+
 body {
 	font-family: "Roboto", sans-serif;
 }

frontend/components/MainFooter.vue

@@ -84,6 +84,18 @@ export default {
 <style lang="scss" scoped>
 @import "styles/global.scss";
 
+.night-mode {
+	footer.footer,
+	footer.footer .container,
+	footer.footer .container .content {
+		background-color: #222;
+	}
+
+	footer.footer .socialIcons img {
+		filter: invert(1);
+	}
+}
+
 .content a:not(.button) {
 	border: 0;
 }

frontend/components/MainHeader.vue

@@ -109,6 +109,17 @@ export default {
 <style lang="scss" scoped>
 @import "styles/global.scss";
 
+.night-mode {
+	.nav-left,
+	.nav-right {
+		background-color: #222;
+	}
+
+	.nav-item {
+		color: #ddd !important;
+	}
+}
+
 .nav {
 	background-color: $primary-color;
 	height: 64px;

frontend/components/Modals/EditStation.vue

@@ -806,6 +806,28 @@ export default {
 </script>
 
 <style lang="scss">
+@import "styles/global.scss";
+
+.night-mode {
+	.modal-card,
+	.modal-card-head,
+	.modal-card-body,
+	.modal-card-foot {
+		background-color: $night-mode-secondary;
+	}
+
+	.section {
+		background-color: #111 !important;
+		border: 0 !important;
+	}
+
+	.label,
+	p,
+	strong {
+		color: #ddd;
+	}
+}
+
 .edit-station-modal {
 	.modal-card-title {
 		text-align: center;

frontend/components/Modals/Login.vue

@@ -126,6 +126,20 @@ export default {
 <style lang="scss" scoped>
 @import "styles/global.scss";
 
+.night-mode {
+	.modal-card,
+	.modal-card-head,
+	.modal-card-body,
+	.modal-card-foot {
+		background-color: $night-mode-secondary;
+	}
+
+	.label,
+	p {
+		color: #ddd;
+	}
+}
+
 .button.is-github {
 	background-color: $dark-grey-2;
 	color: $white !important;

frontend/components/Modals/Register.vue

@@ -152,6 +152,20 @@ export default {
 <style lang="scss" scoped>
 @import "styles/global.scss";
 
+.night-mode {
+	.modal-card,
+	.modal-card-head,
+	.modal-card-body,
+	.modal-card-foot {
+		background-color: $night-mode-secondary;
+	}
+
+	.label,
+	p {
+		color: #ddd;
+	}
+}
+
 .button.is-github {
 	background-color: $dark-grey-2;
 	color: $white !important;

frontend/components/Modals/WhatIsNew.vue

@@ -133,6 +133,19 @@ export default {
 <style lang="scss" scoped>
 @import "styles/global.scss";
 
+.night-mode {
+	.modal-card,
+	.modal-card-head,
+	.modal-card-body {
+		background-color: $night-mode-secondary;
+	}
+
+	strong,
+	p {
+		color: #ddd;
+	}
+}
+
 .modal-card-head {
 	border-bottom: none;
 	background-color: ghostwhite;

frontend/components/Sidebars/Playlist.vue

@@ -144,6 +144,20 @@ export default {
 <style lang="scss" scoped>
 @import "styles/global.scss";
 
+.night-mode {
+	.sidebar {
+		background-color: $night-mode-secondary;
+
+		.title {
+			color: #fff;
+		}
+
+		* {
+			color: #ddd;
+		}
+	}
+}
+
 .sidebar {
 	position: fixed;
 	z-index: 1;

frontend/components/Sidebars/SongsList.vue

@@ -186,6 +186,20 @@ export default {
 <style lang="scss" scoped>
 @import "styles/global.scss";
 
+.night-mode {
+	.sidebar {
+		background-color: $night-mode-secondary;
+
+		.title {
+			color: #fff;
+		}
+
+		* {
+			color: #ddd;
+		}
+	}
+}
+
 .sidebar {
 	position: fixed;
 	z-index: 1;

frontend/components/Sidebars/UsersList.vue

@@ -35,6 +35,20 @@ export default {
 <style lang="scss" scoped>
 @import "styles/global.scss";
 
+.night-mode {
+	.sidebar {
+		background-color: $night-mode-secondary;
+
+		.title {
+			color: #fff;
+		}
+
+		* {
+			color: #ddd;
+		}
+	}
+}
+
 .sidebar {
 	position: fixed;
 	z-index: 1;

frontend/components/Station/Station.vue

@@ -1287,6 +1287,13 @@ export default {
 <style lang="scss">
 @import "styles/global.scss";
 
+.night-mode {
+	.nav,
+	.control-sidebar {
+		background-color: #222;
+	}
+}
+
 .player-can-not-autoplay {
 	position: absolute;
 	width: 100%;

frontend/components/User/ResetPassword.vue

@@ -151,6 +151,16 @@ export default {
 <style lang="scss" scoped>
 @import "styles/global.scss";
 
+.night-mode {
+	.label {
+		color: #ddd;
+	}
+
+	.skip-step {
+		border: 0;
+	}
+}
+
 .container {
 	padding: 25px;
 }

frontend/components/User/Settings.vue

@@ -366,6 +366,12 @@ export default {
 <style lang="scss" scoped>
 @import "styles/global.scss";
 
+.night-mode {
+	.label {
+		color: #ddd;
+	}
+}
+
 .container {
 	padding: 25px;
 }

frontend/components/User/Show.vue

@@ -127,6 +127,12 @@ export default {
 <style lang="scss" scoped>
 @import "styles/global.scss";
 
+.night-mode {
+	.level .title {
+		color: #ccc;
+	}
+}
+
 .container {
 	padding: 25px;
 }

frontend/components/pages/About.vue

@@ -2,63 +2,68 @@
 	<div class="app">
 		<metadata title="About" />
 		<main-header />
-		<div class="content-wrapper">
-			<div class="card is-fullwidth">
-				<header class="card-header">
-					<p class="card-header-title">
-						The project
-					</p>
-				</header>
-				<div class="card-content">
-					<div class="content">
-						<p>
-							Musare is an open-source music website where you can
-							listen to real-time genre specific music stations,
-							or join community stations created by users.
+		<div class="container">
+			<div class="content-wrapper">
+				<div class="card is-fullwidth">
+					<header class="card-header">
+						<p class="card-header-title">
+							The project
 						</p>
+					</header>
+					<div class="card-content">
+						<div class="content">
+							<p>
+								Musare is an open-source music website where you
+								can listen to real-time genre specific music
+								stations, or join community stations created by
+								users.
+							</p>
+						</div>
 					</div>
 				</div>
-			</div>
-			<div class="card is-fullwidth">
-				<header class="card-header">
-					<p class="card-header-title">
-						How you can help
-					</p>
-				</header>
-				<div class="card-content">
-					<div class="content">
-						<span>
-							There are multiple ways you can help us:
-							<ol>
-								<li>
-									Reporting bugs. No website is perfect, but
-									we try to eliminate as many bugs as
-									possible. If you find a bug, we would highly
-									appreciate it if you could create an issue
-									on the GitHub project with steps to
-									reproduce the issue, so we can fix it as
-									soon as possible.
-								</li>
-								<li>
-									Sending us feedback. Your comments and/or
-									suggestions are extremely valuable to us. In
-									order to improve we need to know what you
-									like, don't like and what you might want on
-									the website.
-								</li>
-								<li>
-									Sharing the joy. The more people enjoying
-									Musare, the better. Telling your friends or
-									relatives about Musare would increase the
-									amount of users we have, which would
-									motivate us and cause Musare to grow faster.
-								</li>
-							</ol>
-						</span>
+				<div class="card is-fullwidth">
+					<header class="card-header">
+						<p class="card-header-title">
+							How you can help
+						</p>
+					</header>
+					<div class="card-content">
+						<div class="content">
+							<span>
+								There are multiple ways you can help us:
+								<ol>
+									<li>
+										Reporting bugs. No website is perfect,
+										but we try to eliminate as many bugs as
+										possible. If you find a bug, we would
+										highly appreciate it if you could create
+										an issue on the GitHub project with
+										steps to reproduce the issue, so we can
+										fix it as soon as possible.
+									</li>
+									<li>
+										Sending us feedback. Your comments
+										and/or suggestions are extremely
+										valuable to us. In order to improve we
+										need to know what you like, don't like
+										and what you might want on the website.
+									</li>
+									<li>
+										Sharing the joy. The more people
+										enjoying Musare, the better. Telling
+										your friends or relatives about Musare
+										would increase the amount of users we
+										have, which would motivate us and cause
+										Musare to grow faster.
+									</li>
+								</ol>
+							</span>
+						</div>
 					</div>
 				</div>
 			</div>
 		</div>
+
 		<main-footer />
 	</div>
 </template>
@@ -80,6 +85,16 @@ export default {
 <style lang="scss" scoped>
 @import "styles/global.scss";
 
+.night-mode {
+	.card {
+		background-color: $night-mode-secondary;
+	}
+
+	p {
+		color: #ddd;
+	}
+}
+
 .card {
 	margin-top: 50px;
 }

frontend/components/pages/Admin.vue

@@ -161,6 +161,17 @@ export default {
 <style lang="scss" scoped>
 @import "styles/global.scss";
 
+.night-mode {
+	.tabs {
+		background-color: #333;
+		border: 0;
+
+		ul {
+			border-bottom: 0;
+		}
+	}
+}
+
 .tabs {
 	background-color: $white;
 	.queueSongs {

frontend/components/pages/Home.vue

@@ -299,6 +299,22 @@ html {
 	}
 }
 
+.night-mode {
+	.card,
+	.card-content,
+	.card-content div {
+		background-color: $night-mode-secondary;
+	}
+
+	.card-content .icons i {
+		color: #ddd;
+	}
+
+	.card-image .image {
+		background-color: #333;
+	}
+}
+
 @media only screen and (min-width: 1200px) {
 	html {
 		font-size: 15px;

frontend/components/pages/News.vue

@@ -128,6 +128,12 @@ export default {
 <style lang="scss" scoped>
 @import "styles/global.scss";
 
+.night-mode {
+	p {
+		color: #ddd;
+	}
+}
+
 .card {
 	margin-top: 50px;
 }

frontend/components/pages/Team.vue

@@ -205,6 +205,15 @@ export default {
 <style lang="scss" scoped>
 @import "styles/global.scss";
 
+.night-mode {
+	.card {
+		background-color: $night-mode-secondary;
+		p {
+			color: #ddd;
+		}
+	}
+}
+
 li a {
 	color: dodgerblue;
 	border-bottom: 0 !important;

frontend/components/pages/Terms.vue

@@ -2,7 +2,7 @@
 	<div class="app">
 		<metadata title="Terms of Service" />
 		<main-header />
-		<div class="content-wrapper">
+		<div class="container">
 			<h1>MUSARE TERMS OF SERVICE</h1>
 			<h4>Last Updated: January 25, 2016</h4>
 

frontend/styles/colors.scss

@@ -19,4 +19,5 @@ $dark-grey: hsl(0, 0%, 30%);
 $dark-grey-2: hsl(0, 0%, 20%);
 $dark-grey-3: hsl(0, 0%, 10%);
 
-$primary-color: $musareBlue;
+$primary-color: $musareBlue;
+$night-mode-secondary: #222;