How to change default colors in vuetify?

Member

by jerad , in category: Javascript , 10 months ago

How to change default colors in vuetify?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by lizzie , 7 months ago

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

Related Threads:

How to change the default theme of phpMyAdmin?
How to change the default text in dropzone.js?
How to change default database in codeigniter?
How to change the default delimiter of mustache.js?
How to change vuetify v-icon color in css?
How to change default language in laravel?