Vue3+Vuetify3 多主题配置

// Styles
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'
// Vuetify
import { createVuetify } from 'vuetify'
const customDarkTheme = {
    dark: true,
    colors: {
        background: "#15202b",
        surface: "#15202b",
        primary: "#3f51b5",
        secondary: "#03dac6",
        error: "#f44336",
        info: "#2196F3",
        success: "#4caf50",
        warning: "#fb8c00",
    },
};
const customLightTheme = {
    dark: false,
    colors: {
        background: '#808080',
        surface: '#6200EE',
        primary: '#6200EE',
        'primary-darken-1': '#3700B3',
        secondary: '#03DAC6',
        'secondary-darken-1': '#018786',
        error: '#B00020',
        info: '#2196F3',
        success: '#4CAF50',
        warning: '#FB8C00',
    },
};
const customTheme = {
    dark: false,
    colors: {
        background: '#34A853',
        surface: '#FF0101',
        primary: '#FF0101',
        'primary-darken-1': '#FF0101',
        secondary: '#03DAC6',
        'secondary-darken-1': '#018786',
        error: '#B00020',
        info: '#2196F3',
        success: '#4CAF50',
        warning: '#FF0101',
    },
};
export default createVuetify(
  // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
    {
        theme: {
            defaultTheme: 'light',
            themes: {
                customDarkTheme,
                customLightTheme,
                customTheme,
            }
        }
    }
)

<template>
  <v-app >
    <v-main>
<!--      <v-btn @click="toggleTheme">点击切换主题</v-btn>-->
      <v-btn @click="setTheme(0)">light</v-btn>
      <v-btn @click="setTheme(1)">dark</v-btn>
      <v-btn @click="setTheme(2)">customTheme</v-btn>
      <v-btn @click="setTheme(3)">customLightTheme</v-btn>
      <v-btn @click="setTheme(4)">customDarkTheme</v-btn>
       <v-card theme="light">测试测试...</v-card>
      <v-theme-provider theme="customLightTheme">
        <v-card>测试测试...</v-card>
      </v-theme-provider>
      <HelloWorld/>
    </v-main>
  </v-app>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import HelloWorld from './components/HelloWorld.vue'
import {useTheme} from "vuetify";
//使用useTheme() 获取主题，useTheme()是由Vuetify提供的
const theme = useTheme();
//包含Vuetify默认的浅色和深色主题以及我们自定义的主题
const myThemes = ["light","dark","customTheme","customLightTheme","customDarkTheme"]
const setTheme = (index:number) => {
  //全局修改主题theme
  theme.global.name.value = myThemes[index]
}
// const toggleTheme = () => {
//   console.log('111111',theme.value)
//   theme.value = theme.value === 'light' ? 'dark' : 'light'
// }
</script>