Vuetify3 如何定义主题设置

Question

我在使用新的 vuetify 3 定义主题设置时遇到了一些麻烦。

文档示例（针对 Vuetify3）：

// src/plugins/vuetify.js
import { createApp } from 'vue'
import { createVuetify } from 'vuetify'

export default createVuetify({
  theme: {
    defaultTheme: 'myCustomTheme',
    themes: {
      myCustomTheme: {
        dark: false,
        colors: {
          ..., // We have omitted the standard color properties here to emphasize the custom one that we've added
          green: '#00ff00'
        }
      }
    }
  }
})

我做了完全相同的事情（当然删除了 ..., 的颜色），但是在 chrome 控制台中出现错误：

Uncaught TypeError: Cannot convert undefined or null to object

有人知道为什么会这样吗？（我知道是新版本，文档还在开发中）

谢谢！

Answer 1

这可能是 Vuetify 中的一个错误（毕竟是 alpha 版本）。我已经在 vuetifyjs/vuetify Issue #13822.

中报告了它

版本 3.0.0-alpha.6 需要定义 theme.variables 对象属性以避免崩溃：

export default createVuetify({
  theme: {
    defaultTheme: 'myCustomTheme',
    themes: {
      myCustomTheme: {
        variables: {}, // ✅ this property is required to avoid Vuetify crash
      }
    }
  }
}

还要注意 colors 的几个问题：

colors中的原色名称似乎被忽略了，所以不能使用green。选择类似 greenish 的内容。
设置 colors 似乎消除了未指定的默认颜色（这可能是不受欢迎的），因此它们应该包含在自定义设置中。

myCustomTheme: {
  colors: {
    // green: '#xxx', 1️⃣
    greenish: '#xxx',

    // 2️⃣
    background: '#ccc',
    surface: '#212121',
    primary: '#00ff00',
    'primary-darken-1': '#3700B3',
    secondary: '#03DAC5',
    'secondary-darken-1': '#03DAC5',
    error: '#CF6679',
    info: '#2196F3',
    success: '#4CAF50',
    warning: '#FB8C00'
  }
}

demo

Vuetify3 如何定义主题设置

Vuetify3 How to define theme settings

vue.js

vuetify.js

vuejs3