如何将 Vuetify 的材料设计颜色名称转换为 Vue 组件中的十六进制值？

Question

我想在我的 Vue 组件模板中获取Vuetify 材料设计颜色作为十六进制值，这样我就可以在下面执行类似这样的操作来获取字符串#FFD54F：

<div :style="`border: 5px solid ${ myHexadecimalColor('amber lighten-2') }`"></div>

我阅读了 Vuetify 文档的SASS 变量和颜色部分，但无法确定解决方案。

我可以看到Vuetify 的 github repo @中定义的颜色vuetify/packages/vuetify/src/styles/settings/_colors.scss，但我不知道如何在我的 Vue 单文件组件中访问这些 Sass 变量。

有谁知道将 Vuetify 材料设计颜色名称转换为十六进制值的最佳方法？

---

奖金：

根据 Boussadjra Brahim 的回答，我写了一个快速的颜色名称到十六进制的方法来放入 Vue 混合，并将其包含在下面以防对任何人有帮助。

示例：hexColor('amber lighten-2')退货#FFD54F

import colors from 'vuetify/lib/util/colors'

...

methods: {

  hexColor: (name) => {

    const [nameFamily, nameModifier] = name.split(' ')

    const shades = ['black', 'white', 'transparent']

    const util = {family: null, modifier: null}

    if (shades.find(shade => shade === nameFamily)){

      util.family = 'shades'

      util.modifier = nameFamily

    } else {

      const [firstWord, secondWord] = nameFamily.split('-')

      util.family = `${ firstWord }${ secondWord

        ? secondWord.charAt(0).toUpperCase() + secondWord.slice(1)

        : '' }`

      util.modifier = nameModifier 

        ? nameModifier.replace('-', '') 

        : 'base'

    }

    return colors[util.family][util.modifier]

  }

}

Answer 1

将颜色导入您的组件，然后使用它的修饰符访问颜色，例如：import colors from 'vuetify/lib/util/colors'....<div :style="`border: 5px solid ${ colors['amber']['lighten2'] }`"></div>

Answer 2

success因此，虽然接受的答案是正确的，但我认为更完整的功能还包括翻译主题颜色（例如, error）及其阴影（例如）的能力success darken-2，以及在颜色已经通过时处理输入十六进制、RGB 或 RGBA。这是我在 mixin 中实现的一个函数，它执行以下操作：import colors from 'vuetify/lib/util/colors';...methods: {&nbsp; &nbsp; translateColor(color) {&nbsp; &nbsp; &nbsp; &nbsp; if ('string' !== typeof color || color.trim().length == 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return color;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; if (color.startsWith('#') || color.startsWith('rgb')) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return color;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; const themeColors = Object.keys(this.$vuetify.theme.currentTheme);&nbsp; &nbsp; &nbsp; &nbsp; const themeColorIndex = themeColors.indexOf(color);&nbsp; &nbsp; &nbsp; &nbsp; if (themeColorIndex > -1) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return this.$vuetify.theme.currentTheme[color];&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; let baseColor;&nbsp; &nbsp; &nbsp; &nbsp; let shade;&nbsp; &nbsp; &nbsp; &nbsp; if (color.includes(' ')) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const [bc, s] = color.split(' ');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; baseColor = bc;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; shade = s;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; baseColor = color;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; shade = 'base';&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; const generalColors = Object.keys(colors);&nbsp; &nbsp; &nbsp; &nbsp; const generalColorsIndex = generalColors.indexOf(baseColor);&nbsp; &nbsp; &nbsp; &nbsp; const themeColorsShadeIndex = themeColors.indexOf(baseColor);&nbsp; &nbsp; &nbsp; &nbsp; if (generalColorsIndex > -1) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const fixedShade = shade.toLowerCase().replace('-', '');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const co = colors[generalColors[generalColorsIndex]];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return co[fixedShade];&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; else if (themeColorsShadeIndex > -1) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const fixedShade = shade.toLowerCase().replace('-', '');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const co = this.$vuetify.theme.parsedTheme[themeColors[themeColorsShadeIndex]]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return co[fixedShade];&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; return color;&nbsp; &nbsp; }}现在我确定我的方法可以优化，但一般的想法是它能够从包含的 Material Design 颜色和主题的颜色中读取。