how I can change the background color by clicking button using vuetify?

Question

Here, I have used vuetify to create buttons which pop up dialog box that contains buttons with different colors and I want to use buttons to change the background color of navigation and menu bar but due to my limited knowledge on vue and vuetify I am not able to change my background color. Can anyone help me???

My code is here:

<template>

  <v-row justify="center">
    <v-dialog v-model="dialog" persistent max-width="600px"   class="pa-md-4 mx-lg-auto">
      <template v-slot:activator="{ on }">
        <v-btn color="primary" dark v-on="on">Theme</v-btn>
      </template>


  <div class="text-center">
   <v-btn  v-for="(item) in colors"  :color="item" dark large class="ma-2" style="width:100px;">
      <span class="text-truncate" style="width:120px;">
        {{item.replace(/-/g, '')}}
      </span>
   </v-btn>

   <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" text @click="dialog = false">Close</v-btn>
          <v-btn color="blue darken-1" text @click="dialog = false">Save</v-btn>
        </v-card-actions>
  </div>

    </v-dialog>
  </v-row>
   </template>


<script>
export default {
    data(){

        return{
            colors: ["red","pink","purple","deep-purple","indigo","blue","light-blue","cyan","teal","green","light-green","lime","yellow","amber","orange","deep-orange","brown","blue-grey","grey", "black"],
            dialog: false
        }



    },
} </script>

Answer 1

To do this you actually use themes that you setup in vuetify.js and you can assign different colors to the different values for example primary: '#c3c3c3' and define different themes within your app. It comes with light and dark theme but you can also add/remove themes programmatically.

It's quite a bit of code so I will post the links on where directions can be found here.

https://vuetifyjs.com/en/customization/theme/#custom-theme-variants

And the actual usage can be found here:

https://vuetifyjs.com/en/customization/theme/#usage