Easily change the colors of your application programmatically.

Light and Dark

Vuetify supports both light and dark variants of the Material Design spec. This designation starts at the root application component, v-app.
<v-app light>
When you designate a component as light or dark, all of its children will inherit and apply the same unless otherwise specified.


By default, Vuetify has a standard theme applied for all components.
  primary: '#1976D2',
  secondary: '#424242',
  accent: '#82B1FF',
  error: '#FF5252',
  info: '#2196F3',
  success: '#4CAF50',
  warning: '#FFC107'
This can be easily changed. Simply pass a theme property to the Vue.use function. You can choose to modify all or only some of the theme properties, with the remaining inheriting from the default.
Vue.use(Vuetify, {
  theme: {
    primary: '#3f51b5',
    secondary: '#b0bec5',
    accent: '#8c9eff',
    error: '#b71c1c'
Under the hood, Vuetify will generate css classes based upon these values that will be accessible in the DOM. These classes will follow the same markup as other helper classes, primary or secondary--text for example.
These values will also be made available on the instance $vuetify object under the theme property. This allows you to dynamically modify your theme. Behind the scenes, Vuetify will regenerate and update your theme classes, seamlessly updating your application.
this.$vuetify.theme.primary = '#4caf50'