Vue3+TypeScript+Vuetify+Vite 实现动态主题切换

飞熊 • 2023年5月26日下午4:09 • 前端开发 • 阅读 470

创建项目

创建一个 Vite 项目

npm create vite@latest

输入项目名称

? Project name: vue3-ts

选择vue

? 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 ↗

下一步就是创建完了。

安装Vuetify

我们进到项目里面安装vuetify

vue add vuetify

选择Vite Preview (Vuetify 3 + Vite)

✔  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)

安装完成

✔  Successfully invoked generator for plugin: vue-cli-plugin-vuetify

启动服务器

npm run dev

访问: http://localhost:3000/

动态主题切换

在App.vue文件里：

<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文件里面配置主题颜色：

//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
        }
    }
})

效果：