add option to toggle dark mode
continuous-integration/drone/push Build is passing Details
continuous-integration/drone Build is passing Details

This commit is contained in:
garionion 2021-04-08 15:59:13 +02:00
parent d9be5be62c
commit 1abceb7f2a
Signed by: garionion
GPG Key ID: 53352FA607FA681A
3 changed files with 21 additions and 3 deletions

View File

@ -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>

View File

@ -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>

View File

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