【Vuetify】これだけ見れば済む色の設定方法まとめ

概要

Vuetifyでの色の指定方法は様々あります。コンポーネントのテーマ色・背景色・文字色などによって、指定方法が異なることがあります。細かい所を忘れがちなので、この記事を見れば全て思い出せるようにまとめます。

プロジェクト全体で一貫性を持って、適切に色の指定を運用すると、メンテナンス性・可読性がかなり上がるのでおすすめです。

TL;DR

忘れやすい文字による指定方法だけまとめると以下

<!-- コンポーネントテーマカラー -->
<!-- テーマカラーとVuetifyカラーリストがいける -->
<v-btn color="primary">...</v-btn> 
<v-btn color="red darken-1">...</v-btn> 
<v-btn color="mycolor lighten-1">...</v-btn> 
<!-- VuetifyカラーリストにないCSSのカラー名はNG（以下同様） -->
<v-btn color="whitesmoke">...</v-btn> 

<!-- 背景色 -->
<!-- テーマカラーとVuetifyカラーリストがいける -->
<v-btn class="primary">...</v-btn> 
<v-btn class="red darken-1">...</v-btn> 
<v-btn class="mycolor lighten-1">...</v-btn> 

<!-- 文字色 -->
<!-- テーマカラーとVuetifyカラーリストがいける -->
<v-btn class="primary--text">...</v-btn>
<v-btn class="red--text text--darken-1">...</v-btn>
<v-btn class="mycolor--text text--lighten-1">...</v-btn>

<!-- styleに直接書く（インラインとブロックいずれも同様） -->
<!-- テーマカラーのみ、濃淡標準は-baseが必要 -->
<v-btn style="color: var(--v-primary-base);">...</v-btn> 
<v-btn style="color: var(--v-mycolor-lighten1);">...</v-btn> 
<!-- これだけVuetifyカラーリストはNG -->
<v-btn style="color: var(--v-red-lighten1);">...</v-btn> 

事前知識

Vuetifyの色について

Vuetifyでは元から色に名前がついています。
redだと赤で、red lighten-1だと1段階明るい赤、という具合にです。
これらをうまく利用するのがオススメです。

色リストはこちら：
https://vuetifyjs.com/en/styles/colors/#sass-color-pack

テーマカラーについて

独自に色に名前をつけて、プロジェクト全体で使用することができます。
例えば background: #6200EE と設定しておけば、プロジェクト内のCSSなどでbackgroundと記述することで#6200EEの色を設定できます。このような色をテーマと呼び、すべてのテーマカラーについてlightモードとdarkモードそれぞれ別々に色を設定できます（同じ色でも大丈夫です）。

プロジェクトを作成したらデフォルトでprimary, secondary, accent, error, warning, info, success の7つのテーマカラーが用意されています。

各色は、次のようにして自由に書き換えられますし、新たに追加もできます。
特に上書きしなかったデフォルトのテーマカラーは、デフォルトの値が採用されます。

指定方法は次の２パターンのみ

• Vuetify色リストから呼び出し（colors.色.濃淡度）
• Hex形式

vuetify.js

import Vue from "vue";
import Vuetify, { colors } from 'vuetify/lib';

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    themes: {
      light: {
        primary: "#ff0000",
        secondary: colors.green,
        accent: colors.red.darken3,
        error: colors.red,
        warning: colors.yellow,
        info: colors.grey,
        success: "#795548",
        mycolor: "#e0e0e0",
      },
      dark: {
        primary: "#ff0000"
        secondary: colors.green,
      },
    },
  },
});

テンプレート内での色の指定方法

テンプレート内で実際に色を指定したいときの指定方法を、各場合において紹介します。
コーディング中に困ったら上から順に試していくと求める部分の色指定ができたりします。

1. UIコンポーネント

VuetifyのUIコンポーネントを利用している場合、color=でコンポーネントのカラーを設定できることがあります。

<!-- OK -->
<v-btn color="red">...</v-btn> <!-- 赤色-->
<v-btn color="red lighten-1">...</v-btn> <!-- 一段階明るい赤 -->
<v-btn color="mycolor darken-1">...</v-btn> <!-- 独自テーマもいける -->

<!-- NG -->
<v-btn color="#66002E">...</v-btn> <!-- Hex等は使えない -->
<v-btn color="lightgrey">...</v-btn> <!-- CSSのカラーネームは使えない -->

この指定方法はコンポーネントがcolor=""に対応してる場合のみ使えて、しかも設計されてる部分の色しか変わらない（例えばv-btnでは背景色が変わるのみ）。
このやり方で思うように色を指定できなかったら2番以降を試しましょう。

2. 背景色 -- classで指定

背景色を変えたい場合、次のようにclass指定でいける場合が多いです。

<!-- OK -->
<v-btn class="red">...</v-btn> <!-- 赤色-->
<v-btn class="red lighten-1">...</v-btn> <!-- 一段階明るい赤 -->
<v-btn class="mycolor darken-1">...</v-btn> <!-- 独自テーマもいける -->

<!-- NG -->
<v-btn class="#66002E">...</v-btn> <!-- Hex等は使えない -->
<v-btn class="lightgrey">...</v-btn> <!-- CSSのカラーネームは使えない -->

3. 文字色 -- classで指定

文字色を変えたい場合、次のようにclass指定でいける場合が多いです

<!-- OK -->
<v-btn class="red--text">...</v-btn> <!-- 赤色-->
<v-btn class="red--text text--lighten-1">...</v-btn> <!-- 一段階明るい赤 -->
<v-btn class="mycolor--text text--darken-1">...</v-btn> <!-- 独自テーマもいける -->

<!-- NG -->
<v-btn class="#66002E--text">...</v-btn> <!-- Hex等は使えない -->
<v-btn class="lightgrey--text">...</v-btn> <!-- CSSのカラーネームは使えない -->

急にちょっとややこしくなる。なんで色指定は--textなのに濃淡度指定はtext--なんや

4. 最後の手段 -- styleに書く

2と3のやり方で色指定できなかったら、styleに書くしかないですが、この場合もテーマカラーが使えます。

<!-- OK -->
<v-btn style="color: var(--v-primary-base);">...</v-btn> <!-- primary -->
<v-btn style="color: var(--v-mycolor-lighten1);">...</v-btn> <!-- 独自テーマもいける -->
<v-btn style="color: #6200EE;">...</v-btn> <!-- 通常のCSSの指定方法は当然いける -->

<!-- NG -->
<v-btn style="color: var(--v-primary);">...</v-btn> <!-- baseがないとだめなので注意 -->
<v-btn style="color: var(--v-red-base)">...</v-btn> <!-- Vuetifyのカラーネームが無理になる -->

Vuetifyのカラーネームが無理になり、濃淡設定しない場合-baseをつけないといけません。

ただしこれを使えるようにするには次のようにcustomePropertiesをtrueにする必要があります。

{vuetify.js}

//...略
export default new Vuetify({
  theme: {
    themes: {
      light: {
        primary: '#FF7F51',
        // ...
      }
    },
    options: {
      customProperties: true
    }
  }
});

styleで指定する場合も可能な限り文字（テーマカラー）を使ったほうがいいです。可読性が上がりますし、色を変えたいときのメンテナンス性が上がります。

まとめ

結論、Vuetifyの色指定周りは便利ですがちょっとややこしいですよね。

一貫性が生じるように、開発チームで色の指定方法はルールを決めておいたほうがいいかなと思います。

個人的おすすめ運用方法は下記です。

• プロジェクト内で頻繁に使う色はテーマカラーを設定して、可能な限り名前使って指定する
• 頻繁に使わない色は、class="red lighten-1"のようにVuetifyで用意されてるカラーネームを使って可読性上げる
• どうしてもこだわりたいけどテーマカラー設定するほどじゃない色は、Hex形式等も許容

他皆さんのおすすめ運用方法や、抜けてる指定方法あったらコメント欄からぜひ教えてくださいm(_ _)m

最後に

最後まで読んで頂きありがとうございました！

Twitterもやってます。プログラミングやテクノロジー関連広く話題にするのでよかったらフォローお願いします！@isasenth