How To change theme colors on Nuxt/Vuetify starter template

In Vuetify 2, for example, if you want ro override background colour (nuxt js):

1. Create .\assets\style\variables.scss

    @import '~vuetify/src/styles/styles.sass';    $material-light: map-merge($material-light, (            background: map-get($blue, 'lighten-5'),            calendar: (background-color: red),    )    );

2. In nuxt.config.js add:

    import colors from 'vuetify/lib/util/colors'    buildModules: ['@nuxtjs/vuetify'],    vuetify: {        treeShake: true,        customVariables: ['~/assets/style/variables.scss']        theme: {            options: {customProperties: true},            themes: {                light: {                    primary: colors.blue.lighten5,                    secondary: colors.amber.darken3,                    accent: colors.grey.darken3,                    info: colors.teal.lighten1,                    warning: colors.amber.base,                    error: colors.deepOrange.accent4,                    success: colors.green.accent3                }    }

More info:

1. https://vuetifyjs.com/ru/customization/sass-variables

2. https://vuetifyjs.com/ru/customization/theme

There are two options to change the color theme1. from the /plugins/vueitfy.js

    Vue.use(Vuetify, {  theme: {    primary: '#2c3e50',    secondary: '#1abc9c',    accent: '#2980b9',    error: '#e74c3c',    action: '#23DB2A'  }})

2. From /assets/style/appl.styl, before the require of vuetify

$theme := { primary: '#2c3e50', secondary: '#1abc9c', accent: '#2980b9', error: '#e74c3c', action: '#23DB2A' }

And header and footer won't work as a color theme property