Vuetify3 如何定义主题设置

Posted 2023-02-22

【中文标题】Vuetify3 如何定义主题设置

【英文标题】：Vuetify3 How to define theme settings

【发布时间】：2021-08-31 19:07:02

【问题描述】：

我在使用新的 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 控制台中出现错误：

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

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

谢谢！

【参考方案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

【讨论】：

非常感谢！感谢您对颜色的澄清，希望他们能解决这个问题，因为有时您不想定义所有