feat: added dark mode

TODO.md

@@ -1,9 +1,6 @@
 # TODO list
 
 
-## design: dark mode
-
-
 ## bug: chart tooltips use different date format
 
 

src/App.vue

@@ -1,6 +1,7 @@
 <template>
 	<div
 		class="d-flex flex-column"
+		:class="dark ? 'bg-dark text-light' : null"
 		style="min-height: 100%"
 	>
 		<Navbar />
@@ -14,6 +15,7 @@
 </template>
 
 <script>
+import { mapState } from "vuex";
 import Footer from "@/components/Footer.vue";
 import Navbar from "@/components/Navbar.vue";
 
@@ -22,5 +24,8 @@ export default {
 	metaInfo: {
 		titleTemplate: "%s | TORN City Losers' Log",
 	},
+	computed: {
+		...mapState(["dark"]),
+	},
 };
 </script>

src/components/BarChartWidget.vue

@@ -2,13 +2,14 @@
 	<Widget :cardTitle="cardTitle">
 		<div class="align-items-end d-flex flex-grow-1 position-relative">
 			<div
-				class="avg border border-info position-absolute w-100"
+				class="avg border position-absolute w-100"
+				:class="dark ? 'border-white' : 'border-info'"
 				:style="{ bottom: (100 * avg / max) + '%' }"
 				v-if="avg"
 			></div>
 			<div
 				class="bar flex-grow-1"
-				:class="bar.highlight ? 'bg-info' : null"
+				:class="bar.highlight && !dark ? 'bg-info' : null"
 				:key="i"
 				:style="{ backgroundColor: bar.color, height: 100 * bar.value / max + '%' }"
 				:title="bar.label"
@@ -20,15 +21,17 @@
 </template>
 
 <script>
+import { mapState } from "vuex";
 import Widget from "@/components/Widget.vue";
 
 export default {
 	components: { Widget },
 	props: ["avg", "bars", "cardTitle"],
 	computed: {
+		...mapState(["dark"]),
 		barsAug() {
 			return this.bars.map((bar) => {
-				bar.color = `rgba(0, 123, 255, ${0.25 + 0.75 * bar.value / this.max})`;
+				bar.color = `rgba(${this.dark ? '255, 255, 255' : '0, 123, 255'}, ${0.25 + 0.75 * bar.value / this.max})`;
 				return bar;
 			});
 		},

src/components/Footer.vue

@@ -1,5 +1,8 @@
 <template>
-	<div class="bg-dark text-light">
+	<div
+		class="bg-dark text-light"
+		:class="dark ? 'border-top border-secondary' : null"
+	>
 		<div class="container my-3">
 			<div class="row">
 				<div class="col-md-4 mb-4 mb-md-0">
@@ -40,13 +43,18 @@
 </template>
 
 <script>
+import { mapState } from "vuex";
+
 export default {
 	data() {
 		return {
 			buildTime: null,
 			version: APP_VERSION,
 		};
 	},
+	computed: {
+		...mapState(["dark"]),
+	},
 	mounted() {
 		const t =
 			document

src/components/KpiWidget.vue

@@ -3,7 +3,7 @@
 		<h6 class="card-title">
 			<slot name="mainLabel" />
 		</h6>
-		<h1 class="border-bottom font-weight-bold pb-2">
+		<h1 class="border-bottom font-weight-bold pb-2" :class="dark ? 'border-secondary' : null">
 			<slot name="mainValue" />
 		</h1>
 		<div class="row">
@@ -24,10 +24,14 @@
 </template>
 
 <script>
+import { mapState } from "vuex";
 import Widget from "@/components/Widget.vue";
 
 export default {
 	components: { Widget },
 	props: ["labels", "values"],
+	computed: {
+		...mapState(["dark"]),
+	},
 };
 </script>

src/components/Log.vue

@@ -7,14 +7,20 @@
 			No results.
 		</div>
 		<div v-else>
-			<div class="border-bottom list-group list-group-flush">
+			<div
+				class="border-bottom list-group list-group-flush"
+				:class="dark ? 'border-secondary' : null"
+			>
 				<LogEntry
 					:entry="e"
 					:key="entryKey(e)"
 					v-for="e in entriesOnPage"
 				/>
 			</div>
-			<div class="bg-light d-flex flex-wrap justify-content-center pt-3">
+			<div
+				class="d-flex flex-wrap justify-content-center pt-3"
+				:class="dark ? 'bg-dark' : 'bg-light'"
+			>
 				<ul class="pagination">
 					<li
 						class="page-item"
@@ -23,6 +29,7 @@
 					>
 						<a
 							class="page-link"
+							:class="dark ? 'bg-secondary border-dark text-light' : null"
 							href="javascript:void(0)"
 						>First</a>
 					</li>
@@ -33,11 +40,15 @@
 					>
 						<a
 							class="page-link"
+							:class="dark ? 'bg-secondary border-dark text-light' : null"
 							href="javascript:void(0)"
 						>Previous</a>
 					</li>
 					<li class="disabled page-item">
-						<span class="page-link">{{ page + 1 }} / {{ pageCount }}</span>
+						<span
+							class="page-link"
+							:class="dark ? 'bg-secondary border-dark text-light' : null"
+						>{{ page + 1 }} / {{ pageCount }}</span>
 					</li>
 					<li
 						class="page-item"
@@ -46,6 +57,7 @@
 					>
 						<a
 							class="page-link"
+							:class="dark ? 'bg-secondary border-dark text-light' : null"
 							href="javascript:void(0)"
 						>Next</a>
 					</li>
@@ -56,6 +68,7 @@
 					>
 						<a
 							class="page-link"
+							:class="dark ? 'bg-secondary border-dark text-light' : null"
 							href="javascript:void(0)"
 						>Last</a>
 					</li>
@@ -70,6 +83,7 @@
 					>
 						<a
 							class="page-link"
+							:class="dark && o != limit ? 'bg-dark border-secondary text-light' : null"
 							href="#"
 						>{{ o }}</a>
 					</li>
@@ -96,7 +110,7 @@ export default {
 		};
 	},
 	computed: {
-		...mapState(["tab"]),
+		...mapState(["dark", "tab"]),
 		offset() {
 			return this.limit * this.page;
 		},
@@ -109,7 +123,16 @@ export default {
 	},
 	methods: {
 		entryKey(a) {
-			return "t" + this.tab + "a" + (a.code || a.attacks[0].code) + "p" + a.paid + "$" + a.price;
+			return (
+				"t" +
+				this.tab +
+				"a" +
+				(a.code || a.attacks[0].code) +
+				"p" +
+				a.paid +
+				"$" +
+				a.price
+			);
 		},
 	},
 	watch: {

src/components/LogEntry.vue

@@ -1,5 +1,8 @@
 <template>
-	<div class="list-group-item px-2 py-1">
+	<div
+		class="list-group-item px-2 py-1"
+		:class="dark ? 'bg-dark text-light' : null"
+	>
 		<div class="align-items-center d-flex">
 			<LogEntryTimestamp
 				:entry="entry"
@@ -28,7 +31,7 @@ export default {
 	components: { LogEntryPaidButton, LogEntryText, LogEntryTimestamp, ProofBox },
 	props: ["entry"],
 	computed: {
-		...mapState(["tab"]),
+		...mapState(["dark", "tab"]),
 		proofBoxId() {
 			return this.entry.code || this.entry.attacks[0].code;
 		},

src/components/LogEntryText.vue

@@ -16,7 +16,7 @@
 		<Player
 			class="font-weight-bold"
 			:id="entry.defender_id"
-			:variant="entry.paid ? 'muted' : 'dark'"
+			:variant="dark ? (entry.paid ? 'secondary' : 'light') : (entry.paid ? 'muted' : 'dark')"
 		/>
 		<span class="d-none d-md-inline mr-1">for</span>
 		<strong
@@ -34,6 +34,7 @@
 		</span>
 		<span
 			class="badge alert-success ml-2 px-2"
+			:class="dark ? 'bg-success' : 'alert-success'"
 			v-if="entry.paid"
 		>paid</span>
 		<span
@@ -46,13 +47,16 @@
 </template>
 
 <script>
-import { mapActions } from "vuex";
+import { mapActions, mapState } from "vuex";
 import Player from "@/components/Player.vue";
 import { formatPrice } from "@/services/tornFormat.js";
 
 export default {
 	components: { Player },
 	props: ["entry"],
+	computed: {
+		...mapState(["dark"]),
+	},
 	methods: {
 		...mapActions(["setPrice"]),
 		doSetPrice() {

src/components/LogEntryTimestamp.vue

@@ -5,6 +5,7 @@
 	>
 		<div
 			class="align-items-center d-none d-md-flex log-entry-timestamp mr-3 small text-primary"
+			:class="dark ? 'text-light' : 'text-primary'"
 			v-b-toggle="proofBoxId"
 		>
 			<div>
@@ -25,10 +26,14 @@
 </template>
 
 <script>
+import { mapState } from "vuex";
 import { formatTimestamp } from "@/services/tornFormat.js";
 
 export default {
 	props: ["entry", "proofBoxId"],
+	computed: {
+		...mapState(["dark"]),
+	},
 	methods: {
 		formatTimestamp,
 	},

src/components/LogWidget.vue

@@ -1,6 +1,9 @@
 <template>
 	<Widget :card-body-class="'p-0'">
-		<ul class="bg-light mb-1 nav nav-tabs px-3 pt-3">
+		<ul
+			class="mb-1 nav nav-tabs px-3 pt-3"
+			:class="dark ? 'bg-dark border-secondary' : 'bg-light'"
+		>
 			<li
 				class="flex-grow-1 nav-item text-center"
 				:key="i"
@@ -10,7 +13,7 @@
 			>
 				<span
 					class="nav-link"
-					:class="i === tab ? 'active' : null"
+					:class="(i === tab ? 'active' : null) + ' ' + (dark && i === tab ? 'bg-secondary border-secondary text-white' : null)"
 					role="button"
 					@click="setTab(i)"
 				>
@@ -19,7 +22,10 @@
 						:class="t.icon"
 					></i>
 					<span class="d-none d-md-inline">{{ t.title }}</span>
-					<span class="font-weight-bold ml-1" v-if="i === 4">${{ formatPrice(unpaidTotal) }}</span>
+					<span
+						class="font-weight-bold ml-1"
+						v-if="i === 4"
+					>${{ formatPrice(unpaidTotal) }}</span>
 				</span>
 			</li>
 		</ul>
@@ -73,16 +79,23 @@ export default {
 		};
 	},
 	computed: {
-		...mapState(["tab"]),
-		...mapGetters(["losses", "sessions", "dailyClients", "clients", "unpaidClients", "unpaidTotal"]),
+		...mapState(["dark", "tab"]),
+		...mapGetters([
+			"losses",
+			"sessions",
+			"dailyClients",
+			"clients",
+			"unpaidClients",
+			"unpaidTotal",
+		]),
 		entries() {
 			const { losses, sessions, dailyClients, clients, unpaidClients } = this;
 			return [losses, sessions, dailyClients, clients, unpaidClients][this.tab];
 		},
 	},
 	methods: {
 		...mapMutations(["setTab"]),
-		formatPrice
+		formatPrice,
 	},
 };
 </script>