title: Unable to change the background color using vuetify theme?
body: <p>Here, I have been working vuetify theme to change the background color of the app and nav bar using a pop up form to choose the color for the app and nav bar but due to the some reason my color buttons  are  not able to change the background color for the app and nav bar. I am using vuetify color and theme to change the background color.</p>
  
  <pre><code>&lt;template&gt;
  &lt;nav&gt;
  
  
          &lt;v-app-bar  color="primary darken-3"
                     height="45px"
                     clipped
                     dark app&gt;
              &lt;v-app-bar-nav-icon @click.stop="drawer = ! drawer"&gt;
  
              &lt;/v-app-bar-nav-icon&gt;
  
              &lt;v-spacer&gt; &lt;/v-spacer&gt;
  
              &lt;v-btn text icon&gt;
                  &lt;v-icon style=""&gt;mdi-star&lt;/v-icon&gt;
              &lt;/v-btn&gt;
              &lt;v-menu offset-y origin="center center" class="elevation-1" :nudge-bottom="14" transition="scale-transition" max-width="10"&gt;
                  &lt;v-btn icon text slot="activator"&gt;
                      &lt;v-badge color="red" overlap&gt;
                          &lt;span slot="badge"&gt;3&lt;/span&gt;
                          &lt;v-icon medium&gt;mdi-bell&lt;/v-icon&gt;
                      &lt;/v-badge&gt;
                  &lt;/v-btn&gt;
                  &lt;notification-list&gt;&lt;/notification-list&gt;
              &lt;/v-menu&gt;
  
                  &lt;v-menu
                          bottom
                          offset-y
                          :nudge-bottom="10"
                  &gt;
                      &lt;template  v-slot:activator="{ on }"&gt;
  
                          &lt;v-btn
                                  dark
                                  icon
                                  v-on="on"
                          &gt;
  
                              &lt;span&gt;&lt;v-icon&gt;mdi-account-circle-outline&lt;/v-icon&gt;&lt;/span&gt;
  
                          &lt;/v-btn&gt;
  
                      &lt;/template&gt;
  
                  &lt;v-list   flat&gt;
  
                      &lt;v-list-item active-class="border"&gt;
                          &lt;v-list-item-icon style="padding-left: 10px; padding-right: 10px" &gt;
                              &lt;v-icon&gt;mdi-account-circle-outline&lt;/v-icon&gt;
                          &lt;/v-list-item-icon&gt;
                          &lt;v-list-item-title&gt;Profile&lt;/v-list-item-title&gt;
                      &lt;/v-list-item&gt;
  
                      &lt;v-list-item class="ml-1" active-class="border"&gt;
                          &lt;v-list-item-icon&gt;
                              &lt;v-icon &gt;mdi-logout-variant&lt;/v-icon&gt;
                          &lt;/v-list-item-icon&gt;
                          &lt;v-list-item-title&gt;logout&lt;/v-list-item-title&gt;
                      &lt;/v-list-item&gt;
  
  
  
                        &lt;v-list-item  @click.stop="dialog = true"&gt;
                       &lt;v-list-item-icon &gt;  
                           &lt;v-icon&gt;mdi-select-color&lt;/v-icon&gt;
                           &lt;/v-list-item-icon&gt;
                              &lt;v-list-item-title&gt;Theme&lt;/v-list-item-title&gt;
  
                              &lt;v-dialog
        v-model="dialog"
        max-width="290"
      &gt;
  
          &lt;v-card&gt;
          &lt;v-card-title&gt;Theme&lt;/v-card-title&gt;
          &lt;v-card-text&gt;
            &lt;v-btn
                v-for="item in colors"
                :key="item"
                :color="item"
                         @click="changeTheme(item)"
  
                class="ma-2"
              &gt;
  
                       &lt;template v-if="theme != item" v-slot:default&gt;
  
                &lt;span class="text-truncate" style="width:120px;"&gt;
          {{item.replace(/-/g, '')}}
        &lt;/span&gt;
         &lt;/template&gt;
          &lt;/v-btn&gt;
  
  
  
                &lt;/v-card-text&gt;
     &lt;v-card-actions&gt;
            &lt;v-spacer&gt;&lt;/v-spacer&gt;
            &lt;v-btn color="blue darken-1" text @click="dialog = false"&gt;Close&lt;/v-btn&gt;
            &lt;v-btn color="blue darken-1" text @click="dialog = false"&gt;Save&lt;/v-btn&gt;
          &lt;/v-card-actions&gt;
  
  
  
  
        &lt;/v-card&gt;
      &lt;/v-dialog&gt;
  
                      &lt;/v-list-item&gt;
  
  
                  &lt;/v-list&gt;
              &lt;/v-menu&gt;
          &lt;/v-app-bar&gt;
  
  
          &lt;v-navigation-drawer @click="!drawer"
                               dark
                               app
                               stateless
                               border
                               color="primary darken-1"
                               value="true"
                               :mini-variant="drawer"&gt;
              &lt;v-layout  column align-center&gt;
                  &lt;v-flex class="ma-2"&gt;
                      &lt;v-avatar&gt;
                           &lt;v-img width="80" :src="require('../../../images/chillibiz.png')"&gt; &lt;/v-img&gt;
                      &lt;/v-avatar&gt;
                      &lt;p v-if="!drawer" class="white--text subheading mt-1 text-center" style="font-size:0.9em"&gt;ChilliBiz&lt;/p&gt;
                  &lt;/v-flex&gt;
              &lt;/v-layout&gt;
              &lt;v-divider class=" mt-0 mb-0" /&gt;
              &lt;v-list nav
                      dense
                      class="py-0" &gt;
                  &lt;v-list-item v-for="item in menus" :key="item.name" :to="item.url" &gt;
                      &lt;v-list-item-icon&gt;
                          &lt;v-icon&gt;{{ item.icon }}&lt;/v-icon&gt;
                      &lt;/v-list-item-icon&gt;
                      &lt;v-list-item-content&gt;
                          &lt;v-list-item-title v-if="item.url=='/'"&gt;{{ item.name }}&lt;/v-list-item-title&gt;
                          &lt;v-list-item-title  v-if="item.url=='/hr'"&gt;{{ item.name }}&lt;hrm/&gt;&lt;/v-list-item-title&gt;
                          &lt;v-list-item-title  v-if="item.url=='/inventory'"&gt;{{ item.name }}&lt;master/&gt;&lt;/v-list-item-title&gt;
                          &lt;v-list-item-title  v-if="item.url=='/finace&amp;accounts'"&gt;{{ item.name }}&lt;finance/&gt;&lt;/v-list-item-title&gt;
                          &lt;v-list-item-title  v-if="item.url=='/reports'"&gt;{{ item.name }}&lt;/v-list-item-title&gt;
                          &lt;v-list-item-title  v-if="item.url=='/system'"&gt;{{ item.name }}&lt;/v-list-item-title&gt;  
                      &lt;/v-list-item-content&gt;
                  &lt;/v-list-item&gt;
              &lt;/v-list&gt;
          &lt;/v-navigation-drawer&gt;
      &lt;/nav&gt;
  
  
  &lt;/template&gt;
  &lt;script&gt;
      import hrm from "./HRcomponent"
      import master from "./MasterComponent"
      import finance from "./FinanceComponent"
  
      export default {
          data() {
              return {
                   drawer:false,
                     dialog: false,
                   searchOpen: false,
                  menus: [
                      {icon:'',name:'', url:''}
                  ],
                  theme: '',
                  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"],
              }
          },
          methods: {
    changeTheme (item) {
      this.theme = item
      this.$vuetify.theme.themes.dark.primary = this.theme
    }
  },
          created() {
              axios
                  .get('api/menuslevel0')
                  .then(response =&gt; (this.menus = response.data))
          },     
          components :{
              hrm,
              master,
              finance
          }
      }
  &lt;/script&gt;
  </code></pre>