色彩

开箱即用，您可以通过 sass 和 javascript 访问 Material Design spec 中的所有颜色。 这些值可通过 color class 系统在样式表，组件文件和实际组件中使用。

类

规范中的每种色彩都会被转换为 background 和 text 变量以便在应用程序中通过一个类进行样式化，比如：<div class="red"> 或者 <span class="red--text">。这些类的色彩定义在 here。

template

<template>
  <div class="purple darken-2 text-center">
    <span class="white--text">Lorem ipsum</span>
  </div>
</template>

文本色彩还可以使用 text--{lighten|darken}-{n} 来支持 darken 和 lighten 变量

template

<template>
  <div>
    Lorem ipsum dolor sit amet, <strong class="red--text text--lighten-1">inciderint</strong> definitionem est ea, explicari prodesset eam id. Mazim doctus vix an. <span class="indigo--text text--darken-2">Amet causae probatus nec ex</span>.
  </div>
</template>

Javascript 色彩包

Vuetify 也有一个可选的色彩包，您可以在您的应用程序中导入和使用。这也可以用来帮助定义您的应用程序的主题。

// 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 色彩包

虽然方便，但是色彩包增加了约 ~30kb 的大小的输出文件。有些项目可能只需要 Vuetify 在运行时引导创建的那些默认提供的类。要禁用此功能，你将不得不 手动 导入并构建 sass 主文件。这将需要 Sass loader 和应该 .sass/.scss 文件条目。

// src/sass/main.scss
$color-pack: false;
@import '~vuetify/src/styles/main.sass';

你创建的 main.sass 文件将需要包含在您的项目中。

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

你必须 必须 配置你的 webpack 设置为使用 sass。如果你使用的是 预制模板，这已经为你完成了。

这也可以在您的 App.vue 主文件中完成。请记住，根据您的项目设置，这 将 增加每次更新输入文件时的构建时间，因为 sass 文件将会被重新生成。

<style lang="sass">
  $color-pack: false;
  @import '~vuetify/src/styles/main.sass';
</style>

Material 色彩表

下面是按基色分组的 Material design 调色板列表