How do I change the vuetify theme background color

Question

The default vuetify themes have a very limited amount of properties to tweak.

dark: {
    primary: '#3739FF',
    accent: '#101721',
    secondary: colors.amber.darken3,
    info: colors.teal.lighten1,
    warning: colors.amber.base,
    error: colors.deepOrange.accent4,
    success: colors.green.accent3
}

I want to have control over all the background colors.

I tried the answer from Dmitry Kaltovich

How To change theme colors on Nuxt/Vuetify starter template

By having a custom scss file like this

@import '~vuetify/src/styles/styles.sass';

$material-dark: map-merge(
  $material-dark,
  (
    background: map-get($blue, 'lighten-5'),
  )
);

and my nuxt config like this

vuetify: {
    treeShake: true,
    customVariables: ['~/assets/scss/vuetify.scss'],
    theme: {
        dark: true,
        themes: {
            options: {customProperties: true},
            dark: {
                primary: '#3739FF',
                accent: '#101721',
                secondary: colors.amber.darken3,
                info: colors.teal.lighten1,
                warning: colors.amber.base,
                error: colors.deepOrange.accent4,
                success: colors.green.accent3
            }
        }
    }
},

But it does not work.

I'm using

"nuxt": "^2.14.6",
"@nuxtjs/vuetify": "^1.11.2",
"sass": "^1.29.0",
"sass-loader": "^7.3.1"
"fibers": "^5.0.0",
"node-sass": "^5.0.0",

Answer 1

Well everything is almost right except one thing.

You need to have sass-loader version 8.x to make it work with customVariables: part. Install it with npm install -D sass-loader@8 This because of sass-loader takes additional data different way in different versions. more information about sass-loader

After that, you should be able to override framework variables thru editing vuetify.scss file.

/* Example of `~assets/scss/vuetify.scss` */

@import '~vuetify/src/styles/styles.sass';

// theme to override, same applies for $material-light
$material-dark: map-merge(
  $material-dark,
  (
    'background': rgb(130, 130, 130),
    'text': (
      'primary': map-get($grey, 'lighten-2'),
    ),
    'calendar': (
      background-color: red,
    ),
  )
);

What happens in here is that we are overriding $material-dark variable that exist in node_modules/vuetify/src/styles/settings/_dark.scss. Here you can use any static value or pre-defined framework colors that exist in node_modules/vuetify/src/styles/settings/_colors.scss, with the help of map-get function as the colors are defined as key-value pair. So what you can do with this approach is, just find the background values (or anything else) you want to override inside _dark.scss, for dark theme.

Note that this approach is to override framework defaults. If you want to define any color and then use inside a component, this approach might not be what you are looking for, this works best to override defaults.

Second approach is to define your colors inside vuetify.theme.themes.dark that exist in nuxt.config.js

vuetify: {
    treeShake: true,
    customVariables: ['~/assets/scss/vuetify.scss'],
    theme: {
      dark: true,
      themes: {
        options: { customProperties: true },
        dark: {
          header: '#3739FF',
          footer: '#101721'
        },
      },
    },
  },

Vuetify provides primary, secondary, accent, info, warning, error, success by default. If you change any of these values, they will be overwritten with yours. If you add any other value like header, footer, etc. they will be added with lighten/darken variants.

These values can be used in a couple of different ways:

1. with color/background/background-color props like <v-btn color="header" />
2. apply background with class <div class="primary" /> or custom <div class="footer" />
3. apply font color with class <div class="primary--text" /> or custom <div class="header--text" />
4. using lighten variant with <div class="header lighten-2" />

more info about colors

So the values you add here are not for overriding for component defaults, only to create extra colors or override primary, success, error etc. colors.