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

<style scoped></style>
