Vuetify Tutorial #9 - Themes

Hey gang, in this video I'll talk about how to change the default colour theme provided by Vuetify: primary, secondary, warning, info, error etc.

----------------------------------------

🐱‍💻 🐱‍💻 Course Links:

🤑🤑 Donate


🎓🎓 Find me on Udemy

[hcgaron]

We now need to nest themes apparently. New syntax:



export default new Vuetify({
icons: {
iconfont: 'mdi'

},
// this is the spot to modify

theme: {
themes: {
light: {
primary: '#9652ff'
}
}
}
})

[MyMeww]

For any newbies confused, this is how your vuetify.js should look right now (format has changed since 2018)

import Vue from 'vue';
import Vuetify from 'vuetify/lib';

Vue.use(Vuetify);

export default new Vuetify({
icons: {
iconfont: 'md'
},
theme: {
themes: {
light: {
primary: '#3f51b5',
secondary: '#b0bec5',
accent: '#8c9eff',
error: '#b71c1c',
},
},
},

});

[md.akib]

guys show this guy more love. Keep commenting to cheer him up even if it's just a letter

[MyMeww]

I'm having the best day following your tutorials, Ninja! And major thanks to everyone commenting on Vue2 changes :)

[Cho]

Wow! We can override the default themes with ours! It's great! Thanks!!!!

[zizeperto]

your tutorials are all amazing. thank you so much and wish you the best

[sallanci]

After the update you should use v-main instead of v-content. Thanks for the course, it is great!!!

[SameeraSenarathna]

Great Video Series. Highly Recommended.

[Anonymous-hello]

I love ur videos so much! Keep it up! ( a member of ur gang :D)

[luizelias]

Amazing tutorials please keep the good work

[anygames]

i love your course man <3. Much much thanks for uploading video.. pls can you upload video about adjusting row, column in vuetify .

[PRASHANTSINGH-drow]

Is there a way to create multiple theme and toggle them with a button in vuetify?

[tomaszswiatek]

yea for me it is also the best around vue tutorial like the others from you:) greetings :)

[sultonbekrakhimov]

Excellent tutorial, would appreciate update for vuetify 3

[deejayerick]

Hello thanks for the tutorial... why you delete the others tutorials from the channel?

[pogirockz]

Hi, I just want to know if theres a way to overrwrite vuetify css? How? Cause it doesn't work if I apply it on a single component

[atakama]

when we add override codes over vuetify like this and after vuetify version updated later and we update version, do they gone ?

[classicguy]

Thanks! How to declare and change color in vuetify.js, let's say, class: "nav-bar"? Please

[jhblack]

Someone now where the vuetify file is with nuxt ? there is no vuetify.js in plugins folder.

[bobomurod]

What's the greating at the beginning each lesson? i cant understand