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 控制台中出现错误：

未捕获的类型错误：无法将未定义或 null 转换为对象

有谁知道为什么会发生这种情况？（我知道这是一个新版本，文档仍在开发中）。

谢谢！

Answer 1

这可能是 Vuetify 中的一个错误（alpha毕竟它是版本）。我已在vuetifyjs/vuetifyIssue #13822中报告了该问题。

\n

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

\n

export default createVuetify({\n  theme: {\n    defaultTheme: \'myCustomTheme\',\n    themes: {\n      myCustomTheme: {\n        variables: {}, // \xe2\x9c\x85 this property is required to avoid Vuetify crash\n      }\n    }\n  }\n}\n

\n

另请注意以下几个问题colors：

\n

\n

1. 中的原色名称colors似乎被忽略，因此您不能使用green. 选择类似的东西greenish来代替。

   \n
\n

2. 设置colors似乎会消除未指定的默认颜色（这可能是不可取的），因此它们应该包含在自定义设置中。

   \n
\n

\n

myCustomTheme: {\n  colors: {\n    // green: \'#xxx\', 1\xef\xb8\x8f\xe2\x83\xa3\n    greenish: \'#xxx\',\n\n    // 2\xef\xb8\x8f\xe2\x83\xa3\n    background: \'#ccc\',\n    surface: \'#212121\',\n    primary: \'#00ff00\',\n    \'primary-darken-1\': \'#3700B3\',\n    secondary: \'#03DAC5\',\n    \'secondary-darken-1\': \'#03DAC5\',\n    error: \'#CF6679\',\n    info: \'#2196F3\',\n    success: \'#4CAF50\',\n    warning: \'#FB8C00\'\n  }\n}\n

\n

演示

\n