Vuetify: [Feature Request] Setting dark theme background color by passing it to `Vue.use`

[eidellev]

New Functionality

This will allow me to set the dark theme background color as easily as I can set the primary, secondary and accent colors. I am thinking something like this will do the trick:

Vue.use(Vuetify, {
  theme: {
    primary: '#3f51b5',
    secondary: '#b0bec5',
    accent: '#8c9eff',
    error: '#b71c1c'
  },
  darkTheme: {
    background: '#2e1a6c',
  },
})

Improvements

At the moment, I have to override the background color on each dark themed component using stylus/css.

Bugs or Edge Cases it Helps Avoid

By setting the background globally I can avoid mistakes and missing individual components

[KaelWD]

There's a stylus variable for that: https://github.com/vuetifyjs/vuetify/blob/dev/src/stylus/settings/_theme.styl#L110

We won't be adding anything else to the js theme system.

[adelriosantiago]

@KaelWD Could you please add an example how to set this variable?

I am trying

$material-light.background = '#FF0000'

And it throws a

$material-light has no property .background

What I'm doing wrong?

[saiteg]

@adelriosantiago Before overriding this variables you have to add
@require '~vuetify/src/stylus/settings/_theme'

[iuliuscaesar92]

@saited I have tried that, as well as the solution for overriding stylus variables in official docs. Still can't achieve the desired result. Is there any explicit example ? Unfortunately the documentation is not so specific.

[albernhagen]

I'm having the same issue as @iuliuscaesar92 . Is there any other guidance? For what it's worth, I'm working in an a la carte app, but requiring the theme stylus file and overriding that property is not changing the resulting CSS.

[iuliuscaesar92]

I'm having the same issue as @iuliuscaesar92 . Is there any other guidance? For what it's worth, I'm working in an a la carte app, but requiring the theme stylus file and overriding that property is not changing the resulting CSS.

The thing that worked for me was creating a new styl file which overrides the original one. Then, import it before vuetify does that.
That's how I achived that:
1) Create a file in your assets folder, called main.styl
2) Copy the code that you need from original main.styl file, and tweak it as necessary.
for me it was:

// ./assets/stylus/main.styl  - my file path

@require 'main_colors.styl' // That's my custom styl file for colors
@require '~vuetify/src/stylus/settings/_colors' // That's vue original colors path

$material-light = {  // Please copy that exactly as it is in the original file
  status-bar: {
    regular: #E0E0E0,
    lights-out: rgba(#fff, .7)
  }, /..........some other tweaked style........../
}

$material-dark = { // Please copy that exactly as it is in the original file
  status-bar: {
    regular: $charleston-green.darken-3,
    lights-out: rgba($charleston-green.darken-3, .2)
  }, /............. some other tweaked style .............../
}
@import '~vuetify/src/stylus/main'   // This is required to add the missing snippets

3) Then, create vuetify.js file, under let's say a custom path called plugins ( /plugins/vuetify.js ):
```import 'material-design-icons-iconfont/dist/material-design-icons.css'
import '@mdi/font/css/materialdesignicons.css'
import '@fortawesome/fontawesome-free/css/all.css' // All icons need to be imported at the TOP!

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

import '@/assets/stylus/main.styl' // As you can see, I did import my tweaked main.styl here

// Helpers
import colors from 'vuetify/es5/util/colors'

Vue.use(Vuetify, {
theme: {
primary: {
base: '#4B83A2', // teal
accent: '#262C31',
lighten5: '#eceff1',
lighten4: '#cfd8dc',
lighten3: '#b0bec5',
lighten2: '#90a4ae',
lighten1: '#78909c',
darken1: '#546e7a',
darken2: '#455a64',
darken3: '#37474f',
darken4: '#263238'
},
secondary: {
base: '#147814',
lighten5: '#E8F5E9',
lighten4: '#C8E6C9',
lighten3: '#A5D6A7',
lighten2: '#81C784',
lighten1: '#66BB6A',
darken1: '#43A047',
darken2: '#388E3C',
darken3: '#2E7D32',
darken4: '#1B5E20',
accent1: '#B9F6CA',
accent2: '#69F0AE',
accent3: '#00E676',
accent4: '#00C853'
},
tertiary: {
base: '#444555'
},
dark: '#262C31',
lighten_dark: '#444555',
primary_gray: '#F3F5F6',
accent: colors.indigo.base // #3F51B5
},
iconfont: 'md' || 'mdi' || 'fa'
})

4) All you need now, is just import your obtained file (third step) into your main.js app, like that:

```import Vue from 'vue'
import App from './App.vue'
import router from './router'

import '@/plugins/vuetify'
new Vue({
    router,
    render: h => h(App),
}).$mount('#app')

[barclayd]

The workaround above is quite a lot of work for changing something as simple as the background colour. A neat workaround I found was declaring a new custom property within theme, passed into Vue.use, that can then be used as a class to style Vuetify elements.

For example: changing the v-app background from the standard dark theme to a new dark theme background.

Vue.use(Vuetify, {
  theme: {
    new-dark-theme: '#000f1b',
  },
});

You can then pass the property name as a class in like so:

<v-app dark class="new-dark-theme">
</v-app

[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