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

Question

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

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>

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

<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 版本中运行？

来自 docs（请参阅 自定义属性）

Enabling customProperties will also generate a css variable for each theme color, which you can then use in your components' blocks.
Vue.use(Vuetify, {
  options: {
    customProperties: true
  }
})

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

对于自定义值，例如
yourcustomvariablename: '#607D8B'
使用 --v-yourcustomvariablename-base（因此 base 是默认值）。

原回答：

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

@KaelWD（开发者之一）wrote:

This is something you'll have to implement yourself. I've tried doing something similar before but it doesn't really work on a framework level.

问题被标记为 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

对于从 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中找到。

Answer 4

主题切换示例(helpfull link):

    <v-app :dark="setTheme" 
           :style="{background: $vuetify.theme.themes[theme].background}" 
           >

JS:

      computed: {
            setTheme() {
                this.$vuetify.theme.dark = this.goDark;
            }
      },
      data() {
            return { 
                goDark: false
            }
      }

Answer 5

根据以上答案，如果你想包含所有 vuetify 颜色，请将此代码放入 App.vue 模板

<v-app :style="cssProps">

App.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 6

也许我迟到了最有效的方法就是文档中提到的https://vuetifyjs.com/en/features/theme/#custom-properties

我将为此提供一个工作示例。您只需要做三处更改即可开始工作。

提及神奇的选项和您的主题颜色

export default new Vuetify({
    theme: {
        options: {
            customProperties: true
        },
        themes: {
            light: {
                primary: "#3DCFD3",
                secondary: "#171b34",
                accent: "3D87E4"
            }
        }
    }
});

在要应用主题的标签中提及 class 名称

<h4 class="blue-header">Yash Oswal</h4>

CSS 应用您的主题。

<style lang="scss">

.blue-header {
  color: var(--v-primary-base);
}

</style>

Answer 7

对于 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="bg-green on-green">background color with appropriate text color contrast</div>

  <div class="text-green">text color</div>

  <div class="border-green">border color</div>
</template>

<style>
  .custom-class {
    background: rgb(var(--v-theme-green))
    color: rgba(var(--v-theme-on-green), 0.9)
  }
</style>

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

Using custom theming in Vuetify and pass color variables to components

vuejs2

vue-component

vuetify.js

编辑^(2018/10/11)

原回答：

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

Using custom theming in Vuetify and pass color variables to components

vuejs2

vue-component

vuetify.js

编辑(2018/10/11)

原回答：

编辑^(2018/10/11)