如何使用带有自定义主题变体的 vuetify 颜色道具

Posted 2023-02-16

【中文标题】如何使用带有自定义主题变体的 vuetify 颜色道具

【英文标题】：How to use vuetify color props with custom theme variations

【发布时间】：2021-11-25 22:22:46

【问题描述】：

我正在使用带有我们自己的自定义主题颜色的 vuetify (2.5.8)。如果我们需要更多地控制生成哪些变化并减少 css 变量，我们已经通过 String 或 Object 定义了我们自己的颜色名称。 但是，我无法让这些变体与 vuetify 元素的颜色属性一起使用，特别是 v-expansion-panel-header。

在文档中，我看到了使用 color=”purple darken-2" 和 color="success darken-2" 的示例，将主题颜色及其变化用空格分隔开来。当我的主题中的颜色被定义为字符串并且其变体由 vuetify 生成为 (darken|lighten)-n 时，此方法有效。

但是当我定义自己的变体时，这不再起作用了。例如：如果我在我的主题中定义颜色success: base: '#1CC234', muted: '#2AAC9B', '，我不能使用color="success muted"，它会一直显示基色。当我尝试以 vuetify 描述它们的方式命名我的变体时也是如此，例如success: base: '#1CC234', 'darken-2': '#2AAC9B', '。在这种情况下，color="success darken-2" 不再有效。

我尝试通过将我的变体命名为“darken-2”等以及嵌套语法 (success.muted) 作为生成的颜色变量 (success-muted) 的名称来解决它，但没有利用。有没有人可以通过 color 属性传递这些变化，而不必使用 v-deep 选择器并在我使用它的任何地方重新设置整个组件的样式？或者我应该使用计算来访问this.$vuetify.theme，看看我是否可以通过这种方式获取十六进制代码？

提前致谢。

【问题讨论】：

你是不是根据这个来做的：vuetifyjs.com/en/styles/colors/#javascript-color-pack

我没有使用颜色包，但是我正在重新定义主题，如图所示。我已经通过十六进制代码定义了颜色。 color="error darken-2" 有效，如果我在我的主题中使用 error: '#abcdef'。当我将错误添加为对象时（error: 'darken-2': '#abcdef', base: '#fedcba' ，不再拾取变体，而是使用基色。这扩展到名称与 vuetify 自己的（较暗|较亮）-n 类不同的变体

【参考方案1】：

color="success muted"

仅使用 base 和 lighten/darken 变体。 您可以通过将其定义为 success: '#1CC234', 'success-muted': '#2AAC9B'

来解决此问题

在这种情况下，color="success darken-2" 不再有效。

主题配置中的key应该是camelCase:darken2

【讨论】：

谢谢！这很好用，唯一的缺点是我们只需要为饱和度变体保留不同变暗/变亮级别的设计文档。

感谢编辑中的建议，在顶层定义和关闭变体应该正是我所需要的！