How to change default colors in vuetify?

@jerad 

To change the default colors in Vuetify, you can customize the theme colors using the vuetify.js file.

First, create a new vuetify.js file in your project's src folder. Next, import Vuetify, Vuetify, and VuetifyLoaderPlugin from 'vuetify-loader' at the top of the file:

import Vuetify from 'vuetify' import 'vuetify/dist/vuetify.min.css' import Vue from 'vue' Vue.use(Vuetify)

// theme colors const options = { theme: { themes: { light: { primary: '#009688', secondary: '#FFC107', accent: '#795548', error: '#f44336', warning: '#ffeb3b', info: '#2196F3', success: '#4CAF50' }, }, }, }

export default new Vuetify(options)

In the theme object, you can set the primary, secondary, accent, error, warning, info, and success colors to your desired colors using hexadecimal, RGB, or CSS color names.

After setting the theme colors, import and use the new vuetify.js file in your main.js file:

import Vue from 'vue' import App from './App.vue' import vuetify from './vuetify'

Vue.config.productionTip = false

new Vue({ render: h => h(App), vuetify, }).$mount('#app')

Now, when you use Vuetify components in your project, they will use the custom theme colors you defined in the vuetify.js file.