Nav bar for vuetify with theme switch

NavBar.vue

<template>
  <v-app-bar app color="primary" dense :dark="isDark">
    <v-app-bar-nav-icon></v-app-bar-nav-icon>
    <div class="d-flex align-center">
      <v-toolbar-title>Alpha IT</v-toolbar-title>
    </div>

    <v-spacer></v-spacer>

    <v-menu>
      <template v-slot:activator="{ on }">
        <v-btn icon v-on="on">
          <v-icon v-text="themeIcon"></v-icon>
        </v-btn>
      </template>
      <v-list dense>
        <v-subheader>Set Site Theme</v-subheader>
        <v-list-item-group v-model="theme">
          <v-list-item
            v-for="(item, i) in icons"
            :key="i"
            @click="setTheme(item.key)"
          >
            <v-list-item-icon>
              <v-icon v-text="item.icon"></v-icon>
            </v-list-item-icon>
            <v-list-item-content>
              <v-list-item-title v-text="item.title"></v-list-item-title>
            </v-list-item-content>
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-menu>
  </v-app-bar>
</template>
<script>
export default {
  name: "NavBar",
  data: () => ({
    theme: null,
    hasUserPrefDark: matchMedia("(prefers-color-scheme: dark)").matches,
    icons: [
      {
        key: "auto",
        title: "Automatic",
        icon: "mdi-theme-light-dark"
      },
      {
        key: "dark",
        title: "Dark",
        icon: "mdi-weather-night"
      },
      {
        key: "light",
        title: "Light",
        icon: "mdi-white-balance-sunny"
      }
    ],
    localTheme: localStorage.getItem("theme")
  }),
  methods: {
    setTheme(t) {
      this.localTheme = t;
      localStorage.setItem("theme", this.localTheme);
      this.loadTheme();
    },
    loadTheme() {
      this.isDark
        ? (this.$vuetify.theme.dark = true)
        : (this.$vuetify.theme.dark = false);
      this.theme = this.icons.findIndex(x => x.key === this.localTheme);
    }
  },
  computed: {
    isDark: function() {
      return (
        (this.localTheme === "auto" && this.hasUserPrefDark) ||
        this.localTheme === "dark"
      );
    },
    themeIcon: function() {
      return this.icons[this.icons.findIndex(x => x.key === this.localTheme)]
        .icon;
    }
  },
  mounted: function() {
    this.loadTheme();
  }
};
</script>