[Vuejs]-How can I re-use Vuetify colors within my components?

by

0👍

Yes, there are SASS variables and CSS classes in Vuetify.

Out of the box you get access to all colors in the Material Design spec through sass and javascript. These values can be used within your style sheets, your component files and on actual components via the color class system.

You can find further information here: Colors | Classes

On the same page, (SASS Color Pack, different anchor), you find information about the usage of SASS Color Pack. Please be aware of the hint in the documentation:

You must configure your webpack setup to use sass. If you are using a pre-made template this will already be done for you.

0👍

You can define the colors as part of your theme like below :

export default new Vuetify({

    theme: {
        dark: true,
        themes: {
          dark: {
            primary: "#99CC11",
            secondary: "#99CC11",
            accent: "#cddc39",
            error: "#7E57C2",
            warning: "#7E57C2",
            info: "#2196f3",
            success: "#8bc34a",
          },
          },
        },
});

Then just use the class as a prop :

<v-btn
      text
      rounded
      class="primary--text mx-1"
      to="/signin"
      v-if="authState !== 'signedin'"
    >

0👍

Use var(--v-primary-base)
Replace ‘primary’ above with any existing variable i.e [primary, secondary, accent, error, ….]

Usage
background-color: var(–v-primary-base);

This can be used directly in your CSS.

Leave a comment