【Vuetify】フォントカラー(color)とdarken・lightenを指定する方法

こんにちは、Ryohei（@ityryohei）です！

本記事では、Vuetifyでフォントカラーとdarkenとlightenで色の明暗を指定する方法をご紹介しています。

上記の疑問にお答えします。

では、解説していきます。

Vuetifyで使用できる色

Vuetifyはマテリアルデザインの仕様に沿ったUIフレームワークです。そのためマテリアルカラーを使用することができます。実際の色は下記のリンク先で確認できます。

フォントカラーを変更は予め用意されているclassを指定するだけです。色の明暗も変更できますので、併せてご紹介できればと思います！

フォントカラーを変更する

フォントカラーの変更は、色を変更したい要素のclass属性に下記を指定することで実現できます。

text--{color}

{color}の部分には前項でご紹介したリンク先のマテリアルカラー名（redやblue等）を指定します。そうすることで簡単にフォントカラーを変更することができます。

下記は実際にフォントカラーを変更する例です。フォントカラーをマテリアルカラーの赤に変更しています。

<p class="red--text">Into the Program</p> 

少ない記述でやりたいことができるのはフレームワークの長所ですね。強調表示する場合はビビッドな色を使うことが多いため、新しくスタイルを定義する必要がないので助かります。

これでフォントカラーを変更することができました。続いて色の明暗を指定する方法をご紹介します。

フォントカラーの明暗を指定する

冒頭でご紹介したリンク先に記載されているマテリアルカラー一覧には、各色に対して明暗が5段階ずつ設けられています。明るい色はlighten、暗い色はdarkenと表示されています。Vuetifyではこれらの色も使用することができ、フォントカラーと同様に予めclassが用意されています。

明暗の指定方法はとても簡単で、下記のように明るさ暗さと値を指定するだけです。

text--{lighten|darken}-{value}

実際に要素に指定する場合はフォントカラーも一緒に指定します。それぞれの使用例は下記の通り。

Lighten Color

<p class="red--text text--lighten-1">Into the Program</p> 

Darken Color

<p class="red--text text--darken-1">Into the Program</p> 

これでフォントカラーと明暗を指定することができます。めちゃ楽ですね！

最後に

最近案件でVuetifyを使用させてもらっていますが…まじで良きです！グリッドシステムもわかりやすいし、余白関連も直感的に指定することができます。何より複数人で扱っても品質に大きな差がでないのが魅力ですよね。しばらくはお世話になりそうな予感！Vuetify系の記事も増やしていければと思います！

以上、Vuetifyでフォントカラーとdarken・lightenを指定する方法のご紹介でした！