How to use as vuetify theme colors in nuxtjs

Question

I created a nuxt app with the create nuxt app, at the time of creation I selected the vuetify ramework. In the file nuxt.config.js there is an object with the configuration of the colors of a theme.

vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      themes: {
        mainTheme: {
          primary: '#8B0000',
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3,
        },
      },
    },
  },
  ...
}

I'm trying to look for documentation on how to use these colors in my vue component but I'm quite confused about that and so far I haven't been able to.

<template>
  <v-toolbar color="#8B0000">
    <v-container>
      <v-row>
        <h1 class="title">Abner Matheus</h1>
      </v-row>
    </v-container>
  </v-toolbar>
</template>

<script>
export default {}
</script>

<style scoped>
.title {
  color: azure;
}
</style>

I want the color property on my v-toolbar to receive one of my theme's colors. Does anyone know how to do this ?

color is a prop, not an attribute. Try <v-toolbar :color="#8B0000"> — bassxzero

User 28 User 28 · Accepted Answer · 2021-05-12T04:34:13

You can use color="primary":

<template>
  <v-toolbar color="primary">
    <v-container>
      <v-row>
        <h1 class="title">Abner Matheus</h1>
      </v-row>
    </v-container>
  </v-toolbar>
</template>

for other elements you may use:

<span class="primary--text">Text</span>

See Colors for more details.

How to use as vuetify theme colors in nuxtjs

1 Answers