【Vuetify】ブランドアイコン(Twitter, Facebook...)のカラーテーマを設定

はじめに

font awesomenのブランドアイコンを使用しようするとき、色を指定しないと以下のようにみすぼらしい感じになってしまいます。

次のように、カラーコードを指定することで一応解決はできますた、ハードコーディングするのはわかりづらいし考えもの

<template>
  <v-container fluid>
    <v-row>
      <v-col md=3 cols=12>
        <v-btn 
          text
          :href="link"
          target="_blank"
        >
          <v-icon left color="#211F1F">fab fa-github</v-icon>
          <span>Github</span>
        </v-btn>
      </v-col>
      <v-col md=3 cols=12>
        <v-btn 
          text
          :href="link"
          target="_blank"
        >
          <v-icon left color="#1DA1F2">fab fa-twitter</v-icon>
          <span>Twitter</span>
        </v-btn>
      </v-col>
    </v-row>
  </v-container>
</template>

そこで、Vuetifyに独自のカラーテーマを設定してcolor="twitter"のように設定します。

Vuetify.jsの設定

vue add vuetifyでVuetifyをインストールした場合src/plugins/vutify.jsがあるはずなので、これを修正していきます。

src/plugins/vuetify.js

import '@fortawesome/fontawesome-free/css/all.css'
import '@fortawesome/fontawesome-free-brands'
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
})

Vuetifyにカラーテーマを設定するには、themeプロパティをVuetifyコンストラクタに渡すだけです。このとき、primaty、successやerrorなどの標準テーマが指定されなかった場合、デフォルトのものが使用できます。

src/plugins/vuetify.js

import '@fortawesome/fontawesome-free/css/all.css'
import '@fortawesome/fontawesome-free-brands'
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  theme: {
    themes: {
      light: {
        github: '#211F1F',
        facebook: '#3B5998',
        twitter: '#1DA1F2',
        qiita: '#4cb10d'
      },
    }
  }
})

これで、color="github"やcolor="twitter"と指定するだけで、適切なカラーが指定できるようになりました。
コードを読んだときの意図もわかりやすくなりました。

<template>
  <v-container fluid>
    <v-row>
      <v-col md=3 cols=12>
        <v-btn 
          text
          :href="link"
          target="_blank"
        >
-          <v-icon left color="#211F1F">fab fa-github</v-icon>
+          <v-icon left color="github">fab fa-github</v-icon>
          <span>Github</span>
        </v-btn>
      </v-col>
      <v-col md=3 cols=12>
        <v-btn 
          text
          :href="link"
          target="_blank"
        >
-          <v-icon left color="#1DA1F2">fab fa-twitter</v-icon>
+          <v-icon left color="twitter">fab fa-twitter</v-icon>
          <span>Twitter</span>
        </v-btn>
      </v-col>
    </v-row>
  </v-container>
</template>

ダークテーマ用のカラーを設定する

themeプロパティには、lightようのプロパティしか渡していないため、ダークテーマを適用したときにこのままではカラーが正しく設定されません。

darkプロパティにも同じものを渡してあげます

src/plugins/vuetify.js

import '@fortawesome/fontawesome-free/css/all.css'
import '@fortawesome/fontawesome-free-brands'
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  theme: {
    themes: {
      light: {
        github: '#211F1F',
        facebook: '#3B5998',
        twitter: '#1DA1F2',
        qiita: '#4cb10d'
      },
      dark: {
        github: '#211F1F',
        facebook: '#3B5998',
        twitter: '#1DA1F2',
        qiita: '#4cb10d'
      },
    }
  }
})

DRY原則を守るため、修正しましょう。ついでに、ダークテーマを適用したときにGithubのアイコンが見えなくなってしまうのでダークテーマ適用ときには白色になるようにします。

src/plugins/vuetify.js

import '@fortawesome/fontawesome-free/css/all.css'
import '@fortawesome/fontawesome-free-brands'
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
<img width="1424" alt="スクリーンショット 2020-04-25 15.39.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496565/7c6653dd-16a3-f165-8a92-34c2edee8ba7.png">

Vue.use(Vuetify)

const brands = {
  github: '#211F1F',
  facebook: '#3B5998',
  twitter: '#1DA1F2',
  qiita: '#4cb10d'
}

export default new Vuetify({
  theme: {
    themes: {
      light: brands,
      dark: {
        ...brands,
        github: '#fff' // スプレッド演算子で渡した後に上書き
      }
    }
  }
})

これで正しく反映されました！

参考

テーマ — Vuetify.js
【保存版】Facebook、Twitter、インスタ…主要SNSのフォント、カラー総まとめ