AppDarkMode.vue

<template>
  <t-toggle v-model="mode" value="dark" unchecked-value="light" variant="dark">
    <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>