CODEWITHSUNDEEP
vue.jsvuejs3vuetify.js
Jer
Jer

Reputation: 231

Vue 3 / Vuetify 3: how to set a global default color for buttons

Using Vue 3 and Vuetify 3.0.4, I'm searching for a way to set a global default color for the v-btn's from Vuetify.

But this color must be editable when I want to set a different color on a specific v-btn.

On Vuetify 2 the default color was grey for the buttons like in this example-

<v-btn
  icon
  tile
>
  <v-icon>mdi-trash-can-outline</v-icon>
</v-btn>

now in Vuetify 3, I always have to write the color="grey" :

<v-btn
  @click="deleteAccountDialog(item)"
  variant="text"
  color="grey"
  icon="mdi-delete"
/>

EDIT: I add the vuetify.ts content to show the theme settings:

import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import type { ThemeDefinition } from 'vuetify'

const MyTheme: ThemeDefinition = {
  dark: false,
  colors: {
    primary: '#2196F3',
    secondary: '#424242',
    accent: '#82B1FF',
    error: '#FF5252',
    info: '#2196F3',
    success: '#4CAF50',
    warning: '#FFC107',
  },
}

export default createVuetify({
  theme: {
    defaultTheme: 'MyTheme',
    themes: {
      MyTheme,
    },
  },
})

Upvotes: 3

Views: 3280

Answers (2)

Neha Soni
Neha Soni

Reputation: 4674

Following trick could work for you-

Override the default color of Vuetify button in your global CSS, like this-

<style scoped>
  .v-btn {
     background: #F5F5F5;
   }
</style>

In this way, every new button would have a #F5F5F5 color by default, and when you want to assign any other color, simply assign it using the color prop which would have priority over custom CSS.

<v-btn color="secondary">Button</v-btn>

See the demo here- https://codepen.io/nehasoni988/pen/RwBbwJg?editors=1010

Upvotes: 1

Behzad Khanlar
Behzad Khanlar

Reputation: 31

You are using the default dark theme of Vuetify and that's because your button is in black color which is #333333. There are 2 approaches in my mind:

  1. Change the theme color surface based on this in docs.

  2. You can create a component for your button with grey as the default color.

MyButton.vue:

<template>
  <v-btn
     variant="text"
     color="grey"
     icon="mdi-delete"
  >
    <slot></slot>
  </v-btn>
</template>

and use it in other components like:

<template>
   <MyButton>Click Me!</MyButton>
</template>

Upvotes: 0

Related Questions