[Vuejs]-Re-using Vuetify theme colors

by

3👍

✅

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));
  color: rgba(var(--v-theme-on-primary), 0.8);
}
👤Kael Watts-Deuchar

1👍

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/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css"/>
<div id="app">
    <v-app :style="getColors">
        <h4 class="container">Hello</h4>
    </v-app>
</div>
👤Debug Diva

Leave a comment