doccano/frontend/components/layout/TheColorModeSwitcher.vue

<template>
  <v-btn
    icon
    fab
    @click="isDark=!isDark"
  >
    <v-icon v-if="isDark">
      mdi-moon-waxing-crescent
    </v-icon>
    <v-icon v-else>
      mdi-white-balance-sunny
    </v-icon>
  </v-btn>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  data() {
    return {
      isDark: false
    }
  },

  watch: {
    isDark() {
      this.$vuetify.theme.dark = this.isDark
      localStorage.setItem('dark', JSON.stringify(this.isDark))
    }
  },

  created() {
    const dark = localStorage.getItem('dark')
    this.isDark = dark ? JSON.parse(dark) : false
  }
})
</script>