add option to toggle dark mode

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>
 

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>
 

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: {},
   },