# Colors

# クラス

MD仕様の各色は、backgroundとtextバリアントのバリアントに変換され、アプリケーション内でのスタイリングのために、例えば <div class="red"> や <span class="red--text"> のようにクラスを介して使用されます。 These class colors are defined here.

テキストの色は、darken と lighten のバリアントを text--{lighten|darken}-{n} でサポートしています。

# Javascriptカラーパック

Vuetifyには、アプリケーション内でインポートおよび使用できるオプションのjavascriptカラーパックがあります。 アプリケーションのテーマを定義するのに役立ちます。

// 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 カラーパック

カラーパックは便利ですが、エクスポートされたCSSのサイズを30kbほど増やします。 プロジェクトによっては、Vuetify bootstrap 実行時に作成されるデフォルトのクラスしか必要でない場合があります。 この機能を無効にするには、メインの sass ファイルを 手動で import し、ビルドする必要があります。 これには 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')

これはメインの App.vue ファイル内でも設定できます。 プロジェクトの設定によっては、エントリファイルが更新されるたびにSassファイルが再生成されるため、ビルド時間が_長くなる_ことに注意してください。

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

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

# マテリアルカラー

以下は、原色ごとにグループ化されたマテリアルデザインのカラーパレットの一覧です。