From afee7c2ffb5eff64ed0f449e7ffb7fb1c64237ae Mon Sep 17 00:00:00 2001
From: Griefed <griefed@griefed.de>
Date: Sat, 2 Oct 2021 18:22:43 +0200
Subject: [PATCH] feat: Dark Mode. Can be toggled on and off via button in the
menu bar.
---
src/layouts/MainLayout.vue | 16 +++++++++++++++-
src/pages/Index.vue | 6 +++---
2 files changed, 18 insertions(+), 4 deletions(-)
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 2d038c2..a1f2977 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -146,6 +146,20 @@
<q-separator inset spaced />
+ <q-btn
+ :icon="$q.dark.isActive ? 'nights_stay' : 'wb_sunny'"
+ class="q-mr-xs"
+ dense
+ color="secondary"
+ label="Toggle Dark Mode"
+ @click="$q.dark.toggle()">
+ <q-tooltip :disable="$q.platform.is.mobile">
+ {{ $q.dark.isActive ? 'Deactivate Dark Mode' : 'Activate Dark Mode' }}
+ </q-tooltip>
+ </q-btn>
+
+ <q-separator inset spaced />
+
<q-btn @click="alert = true" color="secondary" dense label="About LTTMM">
<q-tooltip :disable="$q.platform.is.mobile">
Open a little About! 🙂
@@ -163,7 +177,7 @@
<q-card-section align="center">
<q-btn style="margin-right: 15px" type="a" target="_blank" href="https://github.com/Griefed/ltt-mapmaker">
- <q-icon size="50px" color="dark" name="mdi-github"></q-icon>
+ <q-icon size="50px" :color="$q.dark.isActive ? 'white' : 'dark'" name="mdi-github"></q-icon>
<q-tooltip :disable="$q.platform.is.mobile">
LTTMM on GitHub!
</q-tooltip>
diff --git a/src/pages/Index.vue b/src/pages/Index.vue
index 6acd1f2..66147df 100644
--- a/src/pages/Index.vue
+++ b/src/pages/Index.vue
@@ -26,7 +26,7 @@
<q-card>
<q-card-section>
<div class="column" style="width: 600px;">
- <div class="text-h6 q-mb-md text-black">New Map Dimensions</div>
+ <div class="text-h6 q-mb-md">New Map Dimensions</div>
<q-item>
<q-item-section avatar>
<q-icon size="30px" color="secondary" name="mdi-arrow-expand-horizontal" />
@@ -81,7 +81,7 @@
<q-card-section>
<div class="column">
- <div class="text-h6 q-mb-md text-black">Load Existing Map</div>
+ <div class="text-h6 q-mb-md">Load Existing Map</div>
<q-input
v-model="mapString"
filled
@@ -103,7 +103,7 @@
<q-card-section>
<div class="column">
- <div class="text-h6 q-mb-md text-black">Load Map from File</div>
+ <div class="text-h6 q-mb-md">Load Map from File</div>
<q-file
v-model="file"
label="Pick one file"
--
GitLab