在Vuetify中使用自定义主题并将颜色变量传递给组件

Question

在我的index.js文件中,我theme用我公司的颜色手动覆盖了Vuetify 对象:

Vue.use(Vuetify, {
  theme: {
    primary: '#377ef9',
    secondary: '#1b3e70',
    accent: '#ff643d',
    error: '#ff643d'
    ...
  }

现在,我可以使用我的模板中的这些颜色,如下所示:

<my-text-field name="input text"
    label="text"
    value="text text text text..."
    type="text"
    color="primary">
</my-text-field>

我在我的模板样式中使用上面定义primary的theme对象中的任何其他变量:

<script>
  import { VTextField } from 'vuetify'
  export default {
    extends: VTextField
  }
</script>

<style scoped lang="stylus">
  label
    color: <seconday color> <-- this is what I'm after
    color: #1b3e70 <-- this works, but not quite good enough for me
</style>

我可以很容易地在样式部分中编写我的颜色的十六进制值,但我不想重复自己,而是宁愿使用我的theme对象,这样我也可以更容易地在各处轻松更改颜色,并避免拼写错误这会导致颜色定义出错.

Answer 1

编辑^(2018/10/11)

从版本开始1.2.我们可以启用CSS变量
注意:据称它不能在IE中工作(Edge应该可以工作),可能还有一些Safari版本？

从文档(请参阅自定义属性)

启用customProperties还会为每种主题颜色生成一个css变量,然后您可以在组件的块中使用它.

Vue.use(Vuetify, {
  options: {
    customProperties: true
  }
})

<style scoped>
  .something {
    color: var(--v-primary-base)
    background-color: var(--v-accent-lighten2)
  }
</style>

对于自定义值,例如
yourcustomvariablename: '#607D8B'
use --v-yourcustomvariablename-base(base默认值为).

原始答案:

Feature Request在github上有一个:在手写笔文件中访问主题颜色

@KaelWD(开发者之一) 写道:

这是你必须自己实现的.我之前尝试过类似的东西,但它在框架级别上并没有真正起作用.

问题已标记 wontfix

_{编辑(2018/10/11)}
另见这个更新的主题:
https://github.com/vuetifyjs/vuetify/issues/827(功能请求:本机css变量)

Answer 2

有一种方法可以通过利用:style属性来解决这个问题.它可用于反应性地设置自定义CSS属性.

添加计算属性:

computed: {
    cssProps () {
        return {
            '--secondary-color': this.$vuetify.theme.secondary
        }
    }

将样式绑定到cssProps:

<div id="app" :style="cssProps">

然后,按照你的风格:

<style scoped>
    label
        color: var(--secondary-color);
</style>

改编自此讨论:https://github.com/vuejs/vue/issues/7346

Answer 3

对于 vutify 3+：在 vuetify.js 文件中声明主题颜色变量colors:{green:'#00ff00'}

// 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'
        }
      }
    }
  }
})

在 .vue 组件文件中使用 rgb(var(--v-theme-green))：

<template>
  <div class="custom-class">background color with appropriate text color contrast</div>
</template>

<style>
  .custom-class {
    background: rgb(var(--v-theme-green))
  }
</style>

更新： 现在您可以直接使用 myCustomTheme 中定义的颜色作为背景和文本变体，只需将类名命名为 -

对于背景：<div class="bg-green"> 对于文本：<span class="text-green">

Answer 4

从上面的答案中，如果您想包含所有 vuetify 颜色，请将此代码放入 App.vue 模板中

<v-app :style="cssProps">

应用程序.vue脚本

computed: {
   cssProps () {
      var themeColors = {}
      Object.keys(this.$vuetify.theme.themes.light).forEach((color) => {
        themeColors[`--v-${color}`] = this.$vuetify.theme.themes.light[color]
      })
      return themeColors
   }
}

假设 vuetify.js 中是否有这种颜色

export default new Vuetify({
  treeShake: true,
    theme: {
      themes: {
        light: {
          darkRed: "#CD3300",
        }
      }
    }
})

然后，在任意组件中：

<style scoped>
  .label {
    color: var(--v-darkRed);
  }
</style>

Answer 5

对于从Vuetify V2开始遇到麻烦的人，您可以执行以下操作来访问SCSS颜色变量。

// Import the Vuetify styles somewhere global
@import '~vuetify/src/styles/styles.sass';

// Now in your components you can access the colour variables using map-get
div {
  background: map-get($grey, lighten-4);
}

所有颜色都可以在/node_modules/vuetify/styles/settings/_colors.scss中找到。