Dark mode toggle for Vuetify

DarkModeToggle.vue

<template>
  <div>
    <v-tooltip v-if="!$vuetify.theme.dark" bottom>
      <template v-slot:activator="{ on }">
        <v-btn v-on="on" icon @click="toggleDarkMode">
          <v-icon class="mr-1">mdi-moon-waxing-crescent</v-icon>
        </v-btn>
      </template>
      <span>Dark Mode On</span>
    </v-tooltip>

    <v-tooltip v-else bottom>
      <template v-slot:activator="{ on }">
        <v-btn v-on="on" icon @click="toggleDarkMode">
          <v-icon color="yellow">mdi-white-balance-sunny</v-icon>
        </v-btn>
      </template>
      <span>Dark Mode Off</span>
    </v-tooltip>
  </div>
</template>

<script lang="ts">
import { defineComponent } from '@vue/composition-api'

export default defineComponent({
  name: 'DarkModeToggle',
  setup: (props, { root }) => {
    function toggleDarkMode () {
      root.$vuetify.theme.dark = !root.$vuetify.theme.dark
      localStorage.setItem('dark-mode', String(root.$vuetify.theme.dark))
    }

    return {
      toggleDarkMode
    }
  }
})
</script>

<style scoped>
</style>