? Select a framework: » - Use arrow-keys. Return to submit.
    vanilla                                                
>   vue                                                    
    react                                                  
    preact                                                 
    lit                                                    
    svelte
选择ts
? Select a variant: › - Use arrow-keys. Return to submit.
    JavaScript
❯   TypeScript
    Customize with create-vue ↗
    Nuxt ↗

✔  Successfully installed plugin: vue-cli-plugin-vuetify
? Choose a preset:
  Vuetify 2 - Configure Vue CLI (advanced)
  Vuetify 2 - Vue CLI (recommended)
  Vuetify 2 - Prototype (rapid development)
❯ Vuetify 3 - Vite (preview)
  Vuetify 3 - Vue CLI (preview)

<template>
  <v-app :theme="theme">
    <v-main>
      <v-btn @click="toggleTheme">点击切换主题</v-btn>
      <HelloWorld/>
    </v-main>
  </v-app>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import HelloWorld from './components/HelloWorld.vue'
const theme = ref('light')
const toggleTheme = () => theme.value = theme.value === 'light' ? 'dark' : 'light'
</script>

//vuetify.ts
import { createVuetify } from 'vuetify'
const light = {
    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 dark = {
    dark: true,
    colors: {
    }
}
export default createVuetify({
    theme: {
        defaultTheme: 'light',
        themes: {
            light,
            dark
        }
    }
})