This is the Vuetify 3 documentation, examples and information may be broken or outdated.

Colors

Out of the box you get access to all colors in the Material Design specification through sass and javascript. These values can be used within your style sheets, your component files and on actual components via the color prop.

Classes

Each color from the specification gets converted to a background and text variant for styling within your application through a class, e.g. <div class="bg-red"> or <span class="text-red">. These class colors are defined here.

color/classes.vue

Text colors also support darken and lighten variants

color/text-classes.vue

Javascript color pack

Vuetify has an optional javascript color pack that you can import and use within your application. This can also be used to help define your application’s theme.

src/plugins/vuetify.js
import { createVuetify } from 'vuetify'

import colors from 'vuetify/lib/util/colors'

export default createVuetify({
  theme: {
    themes: {
      light: {
        dark: false,
        colors: {
          primary: colors.red.darken1, // #E53935
          secondary: colors.red.lighten4, // #FFCDD2
          ...
        }
      },
    },
  },
})

Sass color pack

While convenient, the color pack increases the CSS export size by ~30kb. Some projects may only require the classes that are created at run-time from the Vuetify theme system. To disable the color pack feature, you will have to manually import and build the main sass file. This will require a Sass loader and a .sass/.scss file entry.

src/sass/main.scss
$color-pack: false;

@import '~vuetify/src/styles/main.sass';

Your created main.sass file will then need to be included in your project.

src/index.js
import './src/sass/main.scss'
// OR
require('./src/sass/main.scss')

This can also be done within your main App.vue file. Keep in mind, depending on your project setup, this will increase build times as every time your entry file is updated, the Sass files will be re-generated.

<style lang="sass">
  $color-pack: false;

  @import '~vuetify/src/styles/main.sass';
</style>

Material colors

Below is a list of the Material design color palette grouped by primary color

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.