Vuetify: Change background colors for light and dark themes

[agnjunio]

What problem does this feature solve?

I want to use a different tone of color for dark and light theme in my theme-able application. But today, there's no way to set that.

What is your proposed solution?

Based on #1599, it should be nice to have a theme setup like this:

Vue.use(Vuetify, {
  theme: {
    light: {
      background: '#cccccc',
      primary: '#3f51b5',
      secondary: '#b0bec5',
      accent: '#8c9eff',
      error: '#b71c1c'
    },
    dark: {
      background: '#555555',
      primary: '#3f51b5',
      secondary: '#b0bec5',
      accent: '#8c9eff',
      error: '#b71c1c'
    }
})

[KaelWD]

Duplicate of #3417

We will be rewriting the theme system in 2.0 so this may change, but you have to use stylus for now.

[MrSunshyne]

@KaelWD is this now possible in 2.0 ?

I can change the primary/secondary/accent colors, but i'm unsure how to change the color of the background in dark mode.

Here's what I want to achieve:

A darker ...dark mode. Essentially i want to access all the dark backgrounds and make them slightly darker. I'd rather not override the CSS as they don't all use the same tone of grey.

I noticed the dark backgrounds do not use css-variables but have hex values directly.

Anyway this is possible using the new theme system ?

thanks !

[KaelWD]

https://vuetifyjs.com/en/customization/sass-variables
https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/styles/settings/_dark.scss

[MrSunshyne]

@KaelWD Perfect ! Thanks

[mtermoul]

I tried to change the light/dark theme default background color using the method above, however it does not work!!! here is what I did

add new style file under ./src/scss/main.scss

// src/scss/main.scss
@import '~vuetify/src/styles/styles.sass'
$new-colors: (
    'app-bar': map-get($red, 'lighten-4') !important,
    'background': map-get($red, 'lighten-4') !important,
    'cards': map-get($red, 'lighten-4') !important,
    'bg-color': map-get($red, 'lighten-4') !important,
    'fg-color': map-get($red, 'lighten-4') !important,
    'text-color': map-get($red, 'lighten-4') !important,
    'buttons': (
      'disabled': map-get($red, 'lighten-4') !important,
      'focused': map-get($red, 'lighten-4') !important,
      'focused-alt': map-get($red, 'lighten-4') !important,
      'pressed': map-get($red, 'lighten-4') !important,
    ),
);
$material-light: map-merge($material-light, $new-colors);
$material-dark: map-merge($material-dark, $new-colors);
@debug $material-light;

@import '~vuetify/src/styles/main.sass';
@import '~vuetify/src/components/VBtn/_variables.scss';

Then I imported this file from ./src/main.js like this:

// ./src/main.js 
import Vue from 'vue';
import vuetify from './plugins/vuetify';
import './scss/main.scss';

new Vue({
    vuetify,
    beforeCreate() {
        console.log('Before our APP is created');
    },
    mounted() {
        console.log('Our APP is being mounted now.');
    },
    render: function(h) {
        return h(App);
    }
}).$mount('#app');

I am using vue 2.6.7 and vuetify 2.1.7

[Amin-stefan]

I tried to change the light/dark theme default background color using the method above, however it does not work!!! here is what I did

add new style file under ./src/scss/main.scss

// src/scss/main.scss
@import '~vuetify/src/styles/styles.sass'
$new-colors: (
    'app-bar': map-get($red, 'lighten-4') !important,
    'background': map-get($red, 'lighten-4') !important,
    'cards': map-get($red, 'lighten-4') !important,
    'bg-color': map-get($red, 'lighten-4') !important,
    'fg-color': map-get($red, 'lighten-4') !important,
    'text-color': map-get($red, 'lighten-4') !important,
    'buttons': (
      'disabled': map-get($red, 'lighten-4') !important,
      'focused': map-get($red, 'lighten-4') !important,
      'focused-alt': map-get($red, 'lighten-4') !important,
      'pressed': map-get($red, 'lighten-4') !important,
    ),
);
$material-light: map-merge($material-light, $new-colors);
$material-dark: map-merge($material-dark, $new-colors);
@debug $material-light;

@import '~vuetify/src/styles/main.sass';
@import '~vuetify/src/components/VBtn/_variables.scss';

Then I imported this file from ./src/main.js like this:

// ./src/main.js 
import Vue from 'vue';
import vuetify from './plugins/vuetify';
import './scss/main.scss';

new Vue({
    vuetify,
    beforeCreate() {
        console.log('Before our APP is created');
    },
    mounted() {
        console.log('Our APP is being mounted now.');
    },
    render: function(h) {
        return h(App);
    }
}).$mount('#app');

I am using vue 2.6.7 and vuetify 2.1.7

In order to make this thing work make sure that you are writing your changes on variables.scss file.

/*
  ** vuetify module configuration
  ** https://github.com/nuxt-community/vuetify-module
  */
  vuetify: {
    customVariables: ['~/assets/variables.scss'],

    theme: {
      dark: true,
    }
  },

Of curse I am using nuxtjs.

[loomchild]

I wrote a short article combining above solutions and defining a custom background color: Changing Background Color in Vuetify.js and Nuxt.js - I thought someone might find it interesting.

[gemunet]

for 2020 solution vuetify and nuxt

https://vuetifyjs.com/en/features/sass-variables/#nuxt-install

in ~/assets/variables.scss
$material-light: (
app-bar: #ffffff,
background: #eef5f9,
);

the list of variables is
https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/styles/settings/_light.scss