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

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

<img width="1424" alt="スクリーンショット 2020-04-25 15.06.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496565/9076cf55-c0c5-801b-f5b4-2cdff3aac7c0.png">

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

```vuejs

<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"`と指定するだけで、適切なカラーが指定できるようになりました。
コードを読んだときの意図もわかりやすくなりました。

```diff

<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>
```

<img width="1424" alt="スクリーンショット 2020-04-25 15.27.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496565/a885d887-eba3-d455-dc85-95a6d14e7528.png">

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

<img width="1424" alt="スクリーンショット 2020-04-25 15.32.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/496565/dee02930-c809-3d99-9685-54cc1ebcf087.png">

`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](https://vuetifyjs.com/ja/customization/theme/)
[【保存版】Facebook、Twitter、インスタ…主要SNSのフォント、カラー総まとめ](https://www.webprofessional.jp/fonts-colors-used-facebook-twitter-google/)