カラー - マテリアライズ

素材設計のベースカラーに基づいたカラーパレットを次に示します。これらの各カラーはベースカラークラスとオプションのライトンまたはダークンクラスで定義されています。

背景色を適用するには、色名と明暗をクラスとして要素に追加するだけです。

これは、teal lighten-2 クラスを指定したカードパネルです。


  <div class="card-panel teal lighten-2">This is a card panel with a teal lighten-2 class</div>

テキストカラーを適用するには、次のようにカラークラスに-textを追加します。

これは、dark blue のテキストを含むカードパネルです。


  <div class="card-panel">
    <span class="blue-text text-darken-2">This is a card panel with dark blue text</span>
  </div>

背景色の場合、以下の例のようにクラスを拡張するだけで色を適用できます。


  .ilike-blue-container {
    @extend .blue, .lighten-4;
  }

テキストカラーを変更する場合、以下の例のようにクラスを拡張するだけで適用できます。


  .ilike-blue-container {
    @extend .blue-text, .text-lighten-4;
  }