Changing Background Color in Vuetify.js and Nuxt.js

Vuetify.js is a Material Design component framework that allows customizing colors easily via themes. However, one color that is missing in the theme config is the background color. In this article we will fix that via CSS variables!

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/change-vuetify-background-color: A project demonstrating how change app…

As described in the official Vuetify.js documentation, it’s possible to choose between a light and dark theme and set the basic colors in the nuxt.config.js file vuetify section:

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

However, there’s nothing mentioned about changing the background color. Does this mean that we are stuck with a white background in light theme and a dark gray background in dark theme? Of course not!

Result of running the example code.

Pure CSS Solution

The simplest way to change the background color is to set the style of the app element in default.vue layout:

<template>
  <v-app>
    <v-content>
      <nuxt />
    </v-content>
  </v-app>
</template>
<script>
export default {
}
</script>
<style scoped>
.v-application {
  background-color: #00a86b;
}
</style>

This works just fine for simple applications, but wouldn’t it be nice to control all the colors centrally in the nuxt.config.js file? We can combine the above code with what we’ve learnt in my Advanced Color Management article and define a custom background color as follows:

vuetify: {
  theme: {
    options: {
      customProperties: true
    },
    dark: true,
    themes: {
      dark: {
        background: '#00a86b'
      },
      light: {
        background: '#d0f0c0'
      }
    }
  }
}

Note that we also need to enable the customProperties option to use the new color variable in CSS (see Vuetify.js documentation).

Now all we need to do is apply the background color style to the app HTML element. We can do this directly in default.vue layout as shown above, by changing the layout style to:

.theme--dark.v-application {
  background-color: var(--v-background-base, #121212) !important;
}
.theme--light.v-application {
  background-color: var(--v-background-base, white) !important;
}

Note that I set the fallback values for my variable. It’s useful to do that in case we forget to configure the background color in theme — otherwise we will just see a generic white background.

Canonical SASS Solution

There exists an alternative canonical solution using SASS variables, which may work better with existing Vuetify.js components that define their own backgrounds.

First we need to include the custom SASS variables file in the nuxt.config.js file:

vuetify: {
  customVariables: ['~/assets/variables.scss'],
  treeShake: true,
  theme: {
    options: {
      customProperties: true
    },
    dark: true,
    themes: {
      dark: {
        background: '#00a86b'
      },
      light: {
        background: '#d0f0c0'
      }
    }
  }
}

Note that we need to enable the treeShake option for the SASS variables to be taken into account.

Next we need to create the assets/variables.scss file with the following contents:

@import '~vuetify/src/styles/styles.sass';
$material-light: map-merge($material-light, (
  'background': var(--v-background-base, map-get($material-light, 'background')) !important,
));
$material-dark: map-merge($material-dark, (
  'background': var(--v-background-base, map-get($material-dark, 'background')) !important,
));

Voilà, and that’s it! You can find a complete example based on the above idea in this repo:

oomchild/change-vuetify-background-color

Cover photo by David Pisnoy on Unsplash.