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 icon @click="toggleTheme">
        <v-icon>{{ darkTheme ? 'mdi-white-balance-sunny' : 'mdi-moon-waning-crescent' }}</v-icon>
      </v-btn>
    </template>
  </v-app-bar>
</template>

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

  const theme = useTheme()
  const darkTheme = ref(true)

  function toggleTheme() {
    darkTheme.value = !darkTheme.value
    theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
  }

</script>