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:

GitHub - loomchild/advanced-color-management-vuetify: A project demonstrating how to manage colors…

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'

You can find an example code for this article in this repository:

loomchild/advanced-color-management-vuetify

Edit: See also my related article about changing the background color.