【Ionic v5】Colorsに色を追加してボタンに適用する

f:id:l08084:20200927151329p:plain

はじめに
環境
配色の追加
参考サイト

はじめに

f:id:l08084:20200927151907p:plain — Ionicには9つのデフォルトカラーがある

Ionicにはprimary, secondary...といったように9つのデフォルトカラーがあり、color属性を使用することで任意の色をIonicのコンポーネントに適用することができます。

今回の記事では、デフォルトカラー以外の色を使用するために、色をcolorに追加する方法を説明します。

環境

$ ionic infoコマンドの実行結果

$ ionic info

Ionic:

   Ionic CLI                     : 6.11.8 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.3.3
   @angular-devkit/build-angular : 0.1000.8
   @angular-devkit/schematics    : 10.0.8
   @angular/cli                  : 10.0.8
   @ionic/angular-toolkit        : 2.3.3

Capacitor:

   Capacitor CLI   : 2.4.1
   @capacitor/core : 2.4.1

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.13.1 (/usr/local/bin/node)
   npm    : 5.6.0
   OS     : macOS Catalina

配色の追加

今回は、Twitterのログインボタンを作るために、Twitterカラー(#00acee)をIonicの配色に追加します。

Step1: レイヤードスタイルの作成

まず、New Color Creatorを使用して、追加したい色のレイヤードスタイルを作成します。

f:id:l08084:20200927170241p:plain — New Color Creator

新色Twitter色を作成しました。

New Color Creatorで作成したレイヤードスタイル

:root {
  --ion-color-twitter: #00acee;
  --ion-color-twitter-rgb: 0,172,238;
  --ion-color-twitter-contrast: #000000;
  --ion-color-twitter-contrast-rgb: 0,0,0;
  --ion-color-twitter-shade: #0097d1;
  --ion-color-twitter-tint: #1ab4f0;
}

.ion-color-twitter {
  --ion-color-base: var(--ion-color-twitter);
  --ion-color-base-rgb: var(--ion-color-twitter-rgb);
  --ion-color-contrast: var(--ion-color-twitter-contrast);
  --ion-color-contrast-rgb: var(--ion-color-twitter-contrast-rgb);
  --ion-color-shade: var(--ion-color-twitter-shade);
  --ion-color-tint: var(--ion-color-twitter-tint);
}

ボタンのラベルとアイコンを黒ではなく白にしたいので、--ion-color-twitter-contrastと--ion-color-twitter-contrast-rgbを黒から白にします。

New Color Creatorで作成したレイヤードスタイル(修正版)

:root {
  --ion-color-twitter: #00acee;
  --ion-color-twitter-rgb: 0, 172, 238;
  --ion-color-twitter-contrast: #ffffff;
  --ion-color-twitter-contrast-rgb: 255, 255, 255;
  --ion-color-twitter-shade: #0097d1;
  --ion-color-twitter-tint: #1ab4f0;
}

.ion-color-twitter {
  --ion-color-base: var(--ion-color-twitter);
  --ion-color-base-rgb: var(--ion-color-twitter-rgb);
  --ion-color-contrast: var(--ion-color-twitter-contrast);
  --ion-color-contrast-rgb: var(--ion-color-twitter-contrast-rgb);
  --ion-color-shade: var(--ion-color-twitter-shade);
  --ion-color-tint: var(--ion-color-twitter-tint);
}

Step2: SCSSファイルにレイヤードスタイルを追加

続いて、作成したレイヤードスタイルをSCSSファイルに転記していきます。

まず、variables.scssファイルの:root内部にレイヤードスタイルの上部を転記します。

src\theme\variables.scss

  --ion-color-twitter: #00acee;
  --ion-color-twitter-rgb: 0, 172, 238;
  --ion-color-twitter-contrast: #ffffff;
  --ion-color-twitter-contrast-rgb: 255, 255, 255;
  --ion-color-twitter-shade: #0097d1;
  --ion-color-twitter-tint: #1ab4f0;

次に、global.scssにレイヤードスタイルの下部を転記します。

src/global.scss

.ion-color-twitter {
    --ion-color-base: var(--ion-color-twitter);
    --ion-color-base-rgb: var(--ion-color-twitter-rgb);
    --ion-color-contrast: var(--ion-color-twitter-contrast);
    --ion-color-contrast-rgb: var(--ion-color-twitter-contrast-rgb);
    --ion-color-shade: var(--ion-color-twitter-shade);
    --ion-color-tint: var(--ion-color-twitter-tint);
}

Step3: ボタン作成

Step1とStep2で配色の追加は完了したので、追加した色を使用して、Twitterのログインボタンを作成します。

      <ion-button color="twitter" class="login-button">
        <ion-icon class="sns-icon" name="logo-twitter"></ion-icon>Twitterでログイン
      </ion-button>