匹配颜色道具到浏览器的颜色/hex/rgb以及颜色变量

Question

好的，我正在制作一个自定义的vue组件，它的一个props是color。

我希望能够将这种颜色与所有可能的用例相匹配。我能想到的是

• 预定义的浏览器颜色，如white,black等
• 十六进制/RGB颜色代码(或其他浏览器解析)。
• 自定义颜色变量(如var(--pa-primary-accent)
)

对于前2种情况，只是传递颜色并使用它就可以了，但是对于第三种情况，如果用户只是传递pa-primary-accent，那么我必须将其与var(--${color})附加在一起。你怎样才能有一个与这两种情况完全兼容的东西呢?

这是代码的摘录:

// Current implementation, breaks if user passes `white` for example.
computed: {
style () {
return `
background-color: var(--${this.bgColor});
`
},

Answer 1

所以解决这个问题的一种方法是使用回退，我已经为所有与颜色相关的CSS值做了这个，它工作得很好。

的例子:background-color: var(--${this.bgColor}, ${this.bgColor});

请记住，如果具有相同名称的正常值有效，则这将始终优先考虑自定义的--前缀值。