Advanced Color Management in Vuetify.js with Nuxt.js

Photo by Mika Baumeister on Unsplash

Vuetify.js is a Material Design component framework that can be easily customized. It allows you to change the colors of all it’s components using a theme. Apart from changing the basic colors, it’s also possible to define new colors, customize each individual color’s lighter / darker variants and change the theme dynamically at runtime.

In this example we will be using Nuxt.js — a meta-framework for Vue.js. However, very similar techniques can be applied to vanilla Vuetify.js.

TL;DR — go straight to the final code:

You probably already know that it’s possible to chose between a light and dark theme and set the basic colors in the nuxt.config.js file vuetify section (see documentation):

vuetify: {
theme: {
dark: true,
themes: {
dark: {
primary: '#4caf50',
secondary: '#ff8c00',
accent: '#9c27b0'
}
}
}
},

However, did you know that you can also define your own custom colors:

vuetify: {
theme: {
dark: true,
themes: {
dark: {
primary: '#4caf50',
secondary: '#ff8c00',
tertiary: '#4682bf',
accent: '#9c27b0'
}
}
}
},

You can use these colors the same way as a default color — you can can apply them to the background or to the text and lighten / darken variants work as expected:

<span class="tertiary--text">
Color
</span>
...
<v-sheet color="tertiary lighten-3 pa-4 ma-3">
Tertiary Light
</v-sheet>
<v-sheet color="tertiary pa-4 ma-3">
Tertiary
</v-sheet>
<v-sheet color="tertiary darken-3 pa-4 ma-3">
Tertiary Dark
</v-sheet>

Interestingly, it’s even possible to define individual light and dark variants for each color instead of relying on automatically generated ones:

vuetify: {
theme: {
dark: true,
themes: {
dark: {
primary: '#4caf50',
secondary: {
base: '#ff8c00',
lighten3: '#ffb700',
darken3: '#ff6200'
},
tertiary: {
base: '#4682bf',
lighten3: '#4696bf',
darken3: '#466ebf'
},
accent: '#9c27b0'
}
}
}
},

I was happy to discover this when developing an application based on detailed Zeplin mock-ups, containing a very specific color palette prepared by a UX/UI designer.

Bonus — you can also change the theme and its colors dynamically at runtime via $vuetify instance conveniently injected into each Vue component:

this.$vuetify.theme.isDark = true
this.$vuetify.theme.themes.dark.primary = '#4caf50'

Full-Stack Developer / Agilist / Free and Open Source Software Fan.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store