re-using Vuetify theme colors-CodePudding

Vuetify provides a configurable theme which defines a set of color that may be overridden when constructing the Vuetify object, e.g.

const vuetify = new Vuetify({
  theme: {
    themes: {
      light: {
        primary: '#3f51b5',
        secondary: '#b0bec5',
        error: '#b71c1c',
      }
    }
  }
})

In the example above, I've overridden 3 of the theme colors. How can I use these theme colors in my own components, e.g. if I want to set the background color of a div to match the primary color

<template>
  <div id="container"></div>
</template>
<script>
  // detail omitted
</script>
<style lang="scss" scoped>
  #container {
    background-color: '#3f51b5';
  }
</style>

In the example above I've hard-coded the primary color, but I assume Vuetify provides a way of avoiding this repetition, e.g. a SASS/SCSS variable?

CodePudding user response：

You can simply achieve that by applying the CSS as per your custom theme. Please follow the below steps.

Add a wrapper element <v-app> around your component content and then by using computed property get the theme colors.

<v-app :style="getColors">


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

And then in CSS, You can achieve like this :

#container {
  color: var(--v-primary);
}

Live demo :

new Vue({
  el: "#app",
  opts: {
      theme: {
          themes: {
              light: {
                  primary: '#3f51b5',
                  secondary: '#b0bec5',
                  error: '#b71c1c',
              }
          }
      }
  },
  vuetify: new Vuetify(this.opts),
  computed: {
      getColors () {
          let themeColors = {}
          Object.keys(this.$vuetify.theme.themes.light).forEach((color) => {
              themeColors[`--v-${color}`] = this.$vuetify.theme.themes.light[color]
          })
          return themeColors
      }
  }
});

.container {
    color: var(--v-primary);
  }

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css"/>
<div id="app">
    <v-app :style="getColors">
        <h4 >Hello</h4>
    </v-app>
</div>

CodePudding user response：

If you don't need to support IE11 you can tell the theme system to use CSS custom properties instead:

new Vuetify({
  theme: {
    options: { customProperties: true },
  },
})

Then you can access the colors directly in your stylesheet:

#container {
  background-color: var(--v-primary-base);
}

https://vuetifyjs.com/en/features/theme/#custom-properties

Vuetify 3 doesn't support IE so this is always enabled, and the custom properties are r,g,b lists so you need to use rgb() or rgba() to access them:

#container {
  background-color: rgb(var(--v-theme-primary));
}