BrainBlast/src/components/BrainBlastBar.vue

<template>
  <v-app-bar :elevation="12">
    <RouterMenu />
    <v-app-bar-title>Brain Blast</v-app-bar-title>

    <template v-slot:append>
      <v-btn @click="toggleTheme" icon="mdi-theme-light-dark"></v-btn>
    </template>
  </v-app-bar>
</template>

<script setup>
  import { useTheme } from 'vuetify'
  import RouterMenu from '@/components/RouterMenu.vue'

  const theme = useTheme()

  function toggleTheme () {
    theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
  }
</script>