如何在Vuetify中配置多套自定义主题，新增第三套主题的实现方法？

该需求完全可以实现。Vuetify的主题系统原生支持自定义多套主题，除默认的亮色、暗色主题外，可按需新增任意数量的自定义主题，"blue mode"完全可以正常配置使用。

如果你使用的是Vuetify 3.x版本 #

• 第一步：在Vuetify初始化配置中定义自定义主题
  在创建Vuetify实例时，在theme配置项的themes字段中新增对应配置即可，示例代码如下：

import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
import 'vuetify/styles'

const vuetify = createVuetify({
  theme: {
    defaultTheme: 'light', // 项目默认使用的主题可自行修改
    themes: {
      // 原有默认亮、暗主题不需要可以直接删除
      light: {},
      dark: {},
      // 新增自定义blue mode主题
      blueMode: {
        dark: false, // 可自行设置该主题基础底色为亮色/暗色
        colors: {
          background: '#e3f2fd', // 浅蓝背景色
          surface: '#bbdefb',
          primary: '#1976d2',
          secondary: '#42a5f5',
          error: '#ef5350',
          info: '#2196f3',
          success: '#4caf50',
          warning: '#ff9800',
          // 可按需添加更多自定义颜色字段
        }
      }
    }
  }
})

const app = createApp(App)
app.use(vuetify)
app.mount('#app')

• 第二步：切换自定义主题
  在任意组件内通过useTheme组合式API即可完成主题切换，示例代码如下：

import { useTheme } from 'vuetify'

const theme = useTheme()
// 切换到blue mode主题
theme.global.name.value = 'blueMode'
// 切回默认亮色主题参考写法
// theme.global.name.value = 'light'

如果你使用的是Vuetify 2.x版本 #

• 第一步：在Vuetify初始化时配置自定义主题

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

export default new Vuetify({
  theme: {
    themes: {
      light: {},
      dark: {},
      blueMode: {
        primary: '#1976d2',
        secondary: '#42a5f5',
        accent: '#82b1ff',
        background: '#e3f2fd',
        // 其他颜色可按需自行配置
      }
    }
  }
})

• 第二步：切换主题
  在组件内修改$vuetify.theme.name的值即可完成切换：

// 切换到blue mode
this.$vuetify.theme.name = 'blueMode'
// 切回亮色主题参考写法
// this.$vuetify.theme.name = 'light'

提示：如果不需要保留默认的亮、暗主题，直接在配置中删除对应配置项即可。

内容的提问来源于stack exchange，提问作者morteza mortezaie