Theme

Easily change the colors of your application programmatically. Rebuild the default stylesheet and customize various aspects of the framework for your particular needs. If you are looking for the Theme Generator, please navigate here.

Theme generator

Discover and generate new color themes for your Vuetify applications using our Theme Generator tool.

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 and is supported by majority of components. By default, your application will use the light theme, but this can be easily overwritten by adding the dark prop.

<v-app dark>
...
</v-app>

When you designate a component as light or dark, all of its children will inherit and apply the same unless otherwise specified. Due to CSS specificity, there are certain combinations that might prompt you to manually assign the theme for nested children. This is most likely to occur when using the dark theme.

Customizing

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

You can also use the pre-defined material colors.

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

Vue.use(Vuetify, {
  theme: {
    primary: colors.purple,
    secondary: colors.grey.darken1,
    accent: colors.shades.black,
    error: colors.red.accent3
  }
})

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. If you supply an entire color object (as in colors.purple above), the lighten/darken variations will be used directly instead of being generated.

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'

Custom theme variants

While Vuetify automatically generates lighten and darken variants for theme colors, you may want to control this yourself. Simply pass a theme object that contains the variants that you wish to modify. Anything not provided will still be generated for you.

// src/theme.js
import colors from 'vuetify/es5/util/colors'

export default {
  primary: {
    base: colors.purple.base,
    darken1: colors.purple.darken2
  },
  secondary: colors.indigo,
  // All keys will generate theme styles,
  // Here we add a custom `tertiary` color
  tertiary: colors.pink.base
}

You can now import your custom theme object and apply it to Vuetify

// src/index.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import theme from './theme'

Vue.use(Vuetify, { theme })

Below is a full list of the overwritable keys on the theme object:

interface ParsedThemeItem {
  base: string
  lighten5: string
  lighten4: string
  lighten3: string
  lighten2: string
  lighten1: string
  darken1: string
  darken2: string
  darken3: string
  darken4: string

  [name: string]: string
}

Options

Vuetify generates theme styles at run-time for SPA's and server side for SSR applications. The generated styles will be placed in a <style> tag with the id of vuetify-theme-stylesheet.

Minification

For SSR applications, you can pass a callback function to $vuetify.options.minifyTheme to reduce the initial page size. When using this option, it is recommended to also use themeCache.

Vue.use(Vuetify, {
  options: {
    minifyTheme: function (css) {
      return process.env.NODE_ENV === 'production'
        ? css.replace(/[\s|\r\n|\r|\n]/g, '')
        : css
    }
  }
})

Caching

A custom caching object can be provided (works in tandem with minifyTheme) to increase SSR efficiency. The object must contain a get and a set method. Below is an example using LRU cache.

const themeCache = LRU({
  max: 10,
  maxAge: 1000 * 60 * 60 // 1 hour
})

Vue.use(Vuetify, {
  options: {
    themeCache
  }
})

Custom Properties

Enabling customProperties will also generate a css variable for each theme color, which you can then use in your components' <style> blocks.

Vue.use(Vuetify, {
  options: {
    customProperties: true
  }
})
<style scoped>
  .something {
    color: var(--v-primary-base)
    background-color: var(--v-accent-lighten2)
  }
</style>

CSP Nonce

Pages with the script-src CSP rule enabled may require a nonce to be specified for embedded style tags.

Content-Security-Policy: script-src 'self' 'nonce-dQw4w9WgXcQ'
Vue.use(Vuetify, {
  options: {
    cspNonce: 'dQw4w9WgXcQ'
  }
})

Modifying Stylus variables

Vuetify is built on top of stylus. Similar to scss, you can change variables and re-compile the style files. A list of available variables is located here. In order to build the stylus file, you will need to configure your application to support stylus. If you are using vue-cli 3 or one of the pre-made templates available on the Quick Start guide, you can skip the next section.

Setup stylus-loader with Webpack

In the command line, run:

$ npm i stylus stylus-loader style-loader css-loader --save-dev
// or
$ yarn add -D stylus stylus-loader style-loader css-loader

This will install the dependencies needed to import and parse stylus files. Once installed, open your webpack config and add a rule for stylus. For SSR based applications, ensure that the import is in your main client-entry.

module: {
  rules: [
    {
      test: /\.styl$/,
      loader: ['style-loader', 'css-loader', 'stylus-loader']
    }
  ]
}

Create a folder called stylus in your src directory (or appropriate assets directory) with a file named main.styl. This will serve as the entry point to import and rebuild the default Vuetify styles. Once created, open the .styl file and add this entry.

// main.styl
@import '~vuetify/src/stylus/main'

Keep in mind that the relative location of node_modules may differ in your project so adjust accordingly. It is recommended that the import be located in your main application index.js or client-entry.js file. DO NOT import your main.styl inside of a component. This will cause performance issues and drastically slow down HMR (hot module reloading).

// app.js
import './stylus/main.styl'

After you have decided on your import location, if you are requiring the Vuetify stylesheet by a <link> tag in your index file, remove it. Restart your build processes and re-open your project. You should see all of the styles working correctly.

Changing values

Now that stylus is configured, you can set default values for the stylus variables that you wish to change. These must be declared before the import and will automatically override the Vuetify defaults.

@import '~vuetify/src/stylus/settings/_variables'
 
$material-light.background = #FFF
$body-font-family = 'Open Sans'
$alert-font-size = 18px
 
@import '~vuetify/src/stylus/main'
// Or for a-la-carte:
@import '~vuetify/src/stylus/app'