From 1abceb7f2adadef7afc1ddfdf7d4c0a4e15e17cd Mon Sep 17 00:00:00 2001
From: garionion <github@entr0py.de>
Date: Thu, 8 Apr 2021 15:59:13 +0200
Subject: [PATCH] add option to toggle dark mode

---
 src/App.vue            |  5 ++++-
 src/views/Settings.vue | 17 ++++++++++++++++-
 tailwind.config.js     |  2 +-
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a4ddc28..f4d91c2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,6 +11,7 @@
 </template>
 
 <script lang="ts">
+import { useDark } from "@vueuse/core";
 import { defineComponent } from "vue";
 import VNav from "./components/VNav.vue";
 import VSpinner from "./components/VSpinner.vue";
@@ -21,7 +22,9 @@ export default defineComponent({
     VNav,
     VSpinner,
   },
-  setup() {},
+  setup() {
+    useDark();
+  },
 });
 </script>
 
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 97cf76d..89d7bd8 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -1,10 +1,25 @@
-<template>settierungsmöglichkeiten</template>
+<template>
+  <button
+    class="bg-green-600 hover:bg-green-400 text-white font-bold py-2 px-4 rounded"
+    type="button"
+    @click="toggleDark"
+  >
+    Turn Dark Mode {{ isDark ? "off" : "on" }}
+  </button>
+</template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
+import { useDark, useToggle } from "@vueuse/core";
 
 export default defineComponent({
   name: "Settings",
+  setup() {
+    const isDark = useDark();
+    const toggleDark = useToggle(isDark);
+
+    return { isDark, toggleDark };
+  },
 });
 </script>
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 69e387f..b34cc53 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,6 @@
 module.exports = {
   purge: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
-  darkMode: "media", // or 'media' or 'class'
+  darkMode: "class", // or 'media' or 'class'
   theme: {
     extend: {},
   },