有没有办法在 Vuetify 2.0 中拥有 2 个以上（深色和浅色）主题？

Question

Vuetify 2.0 提供了一个相对简单的选项来在应用程序中切换两种颜色主题。然而，在当前的项目中，需要添加第三个主题（深色、浅色和特殊 - “高对比度”模式）。

起初我想象的是这样的：

export default new Vuetify({
   theme: {
      themes: {
          light: {...},
          dark: {...},
          highContrast: {...}
      }
   }
})

应该是可以的。然而，似乎无法在默认的 Vuetify 模式下激活第三个或更多主题。 有人有类似情况的经历吗？

Answer 1

您可能已经知道答案，但仍然有人可能会寻找提示。 是的，您可以在 Vuetify 中定义自定义主题，示例可在文档中找到：

Vuetify 文档

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

const myCustomLightTheme = {
  dark: false,
  colors: {
    background: '#FFFFFF',
    surface: '#FFFFFF',
    primary: '#6200EE',
    'primary-darken-1': '#3700B3',
    secondary: '#03DAC6',
    'secondary-darken-1': '#018786',
    error: '#B00020',
    info: '#2196F3',
    success: '#4CAF50',
    warning: '#FB8C00',
  },
}

export default createVuetify({
  theme: {
    defaultTheme: 'myCustomLightTheme',
    themes: {
      myCustomLightTheme,
    },
  },
})