Ionic4로 색상 추가

추가

Ionic Japan UserGroup보다 일본어 번역이 나왔으므로 이것을 읽으면 좋다!

고급 사용자 정의

개요

Ionic4에서 색상을 추가하는 방법입니다.
Ionic3과 방법이 바뀌었기 때문에 메모.

Ionic3에서는?

variable.scss의 colors에 추가하면 OK였습니다.

/theme/variable.scss

$colors: (
  primary:    #488aff
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  twitter:    #00aced
);

$colors에 추가하면 Ionic 구성 요소에서 사용할 수 있습니다.

<button ion-button color="twitter">Twitterでログイン</button>

Ionic4에서는 이렇게 씁니다.

클래스에 추가하면 사용할 수 있게 됩니다. 클래스 이름은 ".ion-color-{COLOR}"형식입니다.
예를 들면 다음은 트위터 컬러를 추가한다면 했던 것처럼 씁니다.

app.scss

.ion-color-twitter {
  --ion-color-base: #00aced;
  --ion-color-base-rgb: 0, 172, 237;
  --ion-color-contrast: #ffffff;
  --ion-color-contrast-rgb: 255, 255, 255;
  --ion-color-shade: #0097d1;
  --ion-color-tint: #1ab4ef;
}

color의 사양 방법은 Ionic3와 같다!

<ion-button color="twitter">Twitterでログイン</ion-button>

base 또는 contrast로 쓰는 양이 너무 많습니다! 라고 생각했다면 공식 문서의 Color Generator를 이용합시다.
메인의 색을 지정하면 좋은 느낌의 CSS를 토해 줍니다.
h tps // 이오니 cf 라메를 rk. 코 m / 드 cs / 테 민 g / 코 r 게네라와 r

요약

기술 방법이 바뀌어도 공식적으로 generator 준비되어 있고 Ionic은 DX 높네요!