[Vuejs]-How to change the default color theme of a Vuetify button?

by

1👍

As you can create Your own theme with your wanted colors, the easiest way is just to add a class with your wanted styles and apply them to the button:

new Vue({
  el: '#app',
  data() {
    return {}
  }
})

Vue.use(Vuetify);
/* needs to use !important to override the default theme styles */
.my-theme-btn-class {
  background-color: red !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/0.15.4/vuetify.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/0.15.4/vuetify.css" rel="stylesheet" />

<v-app id="app" toolbar--fixed toolbar>

  <v-btn class="my-theme-btn-class">Clear</v-btn>

</v-app>

Which will work fine.

As per your comment, you want to use SCSS logic for it. As you need your custom color, plain and block – just add those styles to the .v-btn class:

new Vue({
  el: '#app',
  data() {
    return {}
  }
})

Vue.use(Vuetify);
.btn {
  /* .v-btn--block styles */
  display: flex !important;
  flex: 1 0 auto !important;
  min-width: 100% !important;
  max-width: auto !important;
  
  /* and your custom colors */
  background-color: #4b53b9 !important;
}

.btn::before {
  /* .v-btn--plain:before styles */
  display: none !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/0.15.4/vuetify.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/0.15.4/vuetify.css" rel="stylesheet" />

<v-app id="app">

  <v-btn>Clear</v-btn>

</v-app>
👤Vucko

1👍

It’s not necessary to create a CSS class if you just need to change one button’s background color.

You can apply color prop directly to a button component. This way, by example:

<v-btn color="#4b53b9">
  Aceptar
</v-btn>
👤Alexander Shkirkov

1👍

So there could be two scenarios to achieve this requirement as per the use case.

  1. You just want to change <v-btn> default color in one place. Then, I will suggest you to make this change inline by using color attribute.

    For Example :

    <v-btn color="#4b53b9">Button</v-btn>

  2. If you want to change <v-btn> at all the places in your application wherever you used this button. Then, I will suggest you to override the .v-btn color by make this style change at global .css file.

    For Example :

    .v-btn {
    background-color: #4b53b9 !important;
}
👤Debug Diva

Leave a comment