AppDarkModeToggle.vue

<template>
  <t-toggle
    v-model="mode"
    value="dark"
    unchecked-value="light"
    variant="dark"
    :aria-checked="mode === 'light' ? 'false' : 'true'"
    aria-label="Toggle dark mode"
  >
    <fa
      slot="unchecked"
      icon="sun"
      class="transform scale-125 text-yellow-400"
    />
    <fa slot="checked" icon="moon" class="transform scale-110 text-gray-100" />
  </t-toggle>
</template>

<script>
export default {
  name: 'AppDarkMode',
  data() {
    return {
      mode: this.$colorMode.value,
    }
  },
  watch: {
    mode: {
      handler(newVal) {
        this.$colorMode.preference = newVal
      },
    },
    '$colorMode.value': {
      handler(newVal) {
        this.mode = newVal
      },
    },
  },
}
</script>