# Colors

# Classes

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

Text colors also support darken and lighten variants using text--{lighten|darken}-{n}

# 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 Vue from 'vue'
import Vuetify from 'vuetify/lib'

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

Vue.use(Vuetify)

export default new Vuetify({
  theme: {
    themes: {
      light: {
        primary: colors.red.darken1, // #E53935
        secondary: colors.red.lighten4, // #FFCDD2
        accent: colors.indigo.base, // #3F51B5
      },
    },
  },
})

# Sass color pack

While convenient, the color pack increases the CSS export size by ~30kb. Some projects may only require the default provided classes that are created at run-time from the Vuetify bootstrap. To disable this 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