我可以将 CSS 变量传递给 Vuetify 主题颜色吗？

Question

我正在使用带有 Nuxt 的 Vue 2。我怎样才能实现 Vuetify 无处不在，其中颜色使用 CSS 变量使用 var(--X)？
我想动态改变 Vue 主题的颜色。

{
  theme: {
    themes: {
      light: {
        primary: 'var(--primaryColor)', // <== Put CSS Variables in here
        secondary: 'var(--secondaryColor)'
      },
    },
  },
}

当我这样做时，所有颜色都只是白色#FFFFFF。

Answer 1

我猜你是在nuxt.config.js 做这个配置？到目前为止，该文件不知道任何类型的 window 或 CSS。

您需要从其他地方导入硬编码的 CSS 变量或直接将它们写入那里（因为它处于顶点，所以完全没问题）。 #fff 后备可能是undefined 或类似情况的后备。

至于直接更改 Vuetify 的颜色，这里是关于 the customization 的部分，我引用

在底层，Vuetify 将根据这些值生成 css 类，这些值可以在 DOM 中访问。这些类将遵循与其他帮助类（主要或次要）相同的标记——例如文本。如果您提供整个颜色对象（如上面的 colors.purple 中），则将直接使用变亮/变暗变化而不是生成。

这些值也将在主题属性下的实例 $vuetify 对象上可用。这允许您动态修改您的主题。在幕后，Vuetify 将重新生成和更新您的主题类，无缝更新您的应用程序。

因此可以像这样更新这些值

// Light theme
this.$vuetify.theme.themes.light.primary = '#4caf50'

// Dark theme
this.$vuetify.theme.themes.dark.primary = '#4caf50'

PS：最棒的是变亮/变暗变体也将为您完成。