Change background colors for light and dark themes

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'
    }
})

[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.

[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