Vuetify - How to set background color
To override the dark theme background color
Personally, I find this a very clean way. Set your background color in vuetify.js like so:
export default new Vuetify({
theme: {
options: {
customProperties: true,
},
themes: {
dark: {
background: '#292930',
},
},
dark: true,
},
});
Then add this to your css file (eg. "app.css", in the project root):
.v-application {
background-color: var(--v-background-base) !important;
}
And in your App.Vue, simply import the css file:
import styles from './app.css'
There is another solution:
In vuetify.js:
export default new Vuetify({
theme: {
themes: {
light: {
primary: '#e20074',
secondary: '#6c757d',
accent: '#3ea2fb',
error: '#dc3545',
petrol: '#17a499',
background: '#fff',
}
},
options: {
customProperties: true
},
},
})
In App.vue:
<v-app id="app">
...
</app>
<style>
#app {
background-color: var(--v-background-base);
}
</style>
Details: https://stackoverflow.com/a/48285278/506764
You have the right approach. You only need to import vuetify's theme file first so that the material-light
variable is defined:
// main.styl
@import '~vuetify/src/stylus/theme.styl'
$material-light.background = #fff
@import '~vuetify/src/stylus/main.styl'
Vuetify 2.0 update
Vuetify switched to SASS in 2.0, so the syntax is slightly different. Follow the guide to set up sass-loader properly, then add this to your variables.scss file:
$material-light: (
'background': #fff
);
The theme and main imports are no longer needed, and maps are merged by vuetify so you only have to define keys you want to change.
With Vuetify 2.0, I would like to propose my solution:
Vuetifty Theme Referance
Follow the documentation as usual with setting up custom theming, except add another variable (background in my case).
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import colors from 'vuetify/lib/util/colors'
const vuetify = new Vuetify({
theme: {
themes: {
light: {
primary: colors.purple,
secondary: colors.grey.darken1,
accent: colors.shades.black,
error: colors.red.accent3,
background: colors.indigo.lighten5, // Not automatically applied
...
},
dark: {
primary: colors.blue.lighten3,
background: colors.indigo.base, // If not using lighten/darken, use base to return hex
...
},
},
},
})
But we are not done! The background
variable doesn't cut it. We need to rig v-app
to toggle the light/dark backgrounds.
<template>
<v-app id="main" :style="{background: $vuetify.theme.themes[theme].background}">
<v-content>
Stuff :)
</v-content>
</v-app>
</template>
<script>
export default {
name: 'App',
computed:{
theme(){
return (this.$vuetify.theme.dark) ? 'dark' : 'light'
}
}
};
</script>