如何通过使用 vuetify 单击按钮来更改背景颜色？答案

【问题标题】：how I can change the background color by clicking button using vuetify?如何通过使用 vuetify 单击按钮来更改背景颜色？
【发布时间】：2020-08-24 06:34:40
【问题描述】：

在这里，我使用 vuetify 创建了弹出对话框的按钮，其中包含不同颜色的按钮，我想使用按钮来更改导航和菜单栏的背景颜色，但由于我对 vue 和 vuetify 的了解有限，我我无法更改我的背景颜色。谁能帮帮我？？？

我的代码在这里：

<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>

【问题讨论】：

以下内容对您有帮助吗？
@JuanPabloUgas 是的
@JuanPabloUgas 我参考了您分享的链接，但我仍然无法更改我的应用程序和导航栏颜色。
你能分享你的代码吗？或者你能弄明白吗？
@JuanPabloUgas 感谢您的回复，但我已经解决了这个问题。

标签： vue.js vuetify.js

【解决方案1】：

为此，您实际上使用了在vuetify.js 中设置的主题，您可以为不同的值分配不同的颜色，例如primary: '#c3c3c3'，并在您的应用程序中定义不同的主题。它带有明暗主题，但您也可以以编程方式添加/删除主题。

这是相当多的代码，所以我将在此处发布可以找到方向的链接。

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

而实际用法可以在这里找到：

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

【讨论】：