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 option in the theme service.

content_copy

When you designate a component as light or dark, all of its children will inherit and apply the same unless otherwise specified. You can manually turn dark on and off by changing this.$vuetify.theme.dark to true or false.

Customizing

By default, Vuetify has a standard theme applied for all components.

content_copy

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.

content_copy

You can also use the pre-defined material colors.

content_copy

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.

content_copy

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.

content_copy

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

content_copy

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

content_copy

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.

content_copy

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.

content_copy

Custom Properties

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

content_copy
content_copy

CSP Nonce

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

content_copy
content_copy

Modifying SASS variables

Starting with version 2.0, Vuetify is built using SASS/SCSS. Using the data option in your vue.config.js, we can also pass in custom variables. A list of available variables is located in each components' folder. In order to build the SASS file, you will need to configure your application to support SASS and Fibers.

SCSS is used for variable files to support maps using indented syntax.

Setup vue.config.js

In the command line, run:

content_copy

This will setup the dependencies needed to import and parse SASS/SCSS files. Once installed, create a folder called sass in your src directory (or appropriate assets directory) with a file named main.scss. Keep in mind many of the Vuetify variables are using SASS Lists and must be updated with map-merge as demonstrated below:

content_copy

Now setup your vue.config.js file to load the file through the data option of the sass loader:

content_copy

The next time you run yarn run serve, vue-cli will inject the variables file and your changes will be represented in your application.

If you are requiring the Vuetify stylesheet by a <link> tag in your index file, remove it.

Under the hood, the new variables will be hoisted to the top of the compiled styles and used to override the default behavior.

Edit this page | language on Github