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 on Codesandbox:
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!
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
}…
