[Ionic 5] Main Color 색상 정의하기

# 개요

Ionic 상에서는 css에 색상을 지정해도 좋지만, primary, secondary, dark, success 와 같은 색상을 global로 지정한 후에, ionic 태그에 간편하게 color="(색상값)" 형식으로 사용한다. 

When there is no color set on the button it uses the primary color by default.

어떠한 색상도 버튼에 대해 설정이 되어 있지 않으면, 기본적으로 primary color로 지정된 값에 따라 스타일링 되게 된다.

# 실제 ionic 태그상에서 사용 예제

<ion-button>Default</ion-button>

<ion-button color="primary">Primary</ion-button>

<ion-button color="secondary">Secondary</ion-button>

<ion-button color="tertiary">Tertiary</ion-button>

<ion-button color="success">Success</ion-button>

<ion-button color="warning">Warning</ion-button>

<ion-button color="danger">Danger</ion-button>

<ion-button color="light">Light</ion-button>

<ion-button color="medium">Medium</ion-button>

<ion-button color="dark">Dark</ion-button>

# 기본 색상 변경하기

Each color consists of the following properties: a base, contrast, shade, and tint. The base and contrast colors also require a rgb property which is the same color, just in rgb format.

각각의 색상은 base, contrast, shade, tint 와 같은 속성을 가진다. 버튼 마다 색상에 대한 대비값을 요구할 수 있다.

여기서 base와 contrast는 각각 동일한 색상이지만, 두가지 형식을 요구한다.

- #ffffff 형식의 HEX 색상값

- 괄호가 없는 Red정수값, Green 정수값, Blue 정수값 형태

이유는 일부 브라우저에서는 아직 HEX 형태의 스타일을 처리하지 못하는 경우가 있기 때문이라고 한다.

:root {

  --ion-color-secondary: #006600;  //secondary 색상을 변경할 경우, 아래의 값들은 사이트의 도움을 받는다.

  --ion-color-secondary-rgb: 0,102,0; //Base - Red,Green,Blue 정수값 형태로 제공

  --ion-color-secondary-contrast: #ffffff;

  --ion-color-secondary-contrast-rgb: 255,255,255;

  --ion-color-secondary-shade: #005a00;

  --ion-color-secondary-tint: #1a751a;

}

# 기본 색상 변경하기(실전)

1. https://ionicframework.com/docs/theming/color-generator 접속

2. 일괄로 기본 색상 설정 후 생성된 css 태그를 글로벌 변수 파일인(theme/variable.scss) root 내에 덮어씌우기 한다.

# 새로운 글로벌 색상체계 적용하기

Colors can be added for use throughout an application by setting the color property on an Ionic component

새로운 이름의 색상값을 정의하면 Ionic Component 상에서, color="색상이름" 형식으로 적용이 가능하다.

The class must be written in the format .ion-color-{COLOR} where {COLOR} is the name of the color to add

root 상에 색상을 적용할 뿐만 아니라. .ion-color-{COLOR} 형태로 최종 정의해주어야, ion-(component) 상에서 color 값으로 사용가능하다.

//today, #69bb7b로 생성할 경우 결과 예시

:root {

  --ion-color-today: #69bb7b;

  --ion-color-today-rgb: 105,187,123;

  --ion-color-today-contrast: #000000;

  --ion-color-today-contrast-rgb: 0,0,0;

  --ion-color-today-shade: #5ca56c;

  --ion-color-today-tint: #78c288;

}

.ion-color-today {  //.ion-color-{COLOR} 형식

  --ion-color-base: var(--ion-color-today);

  --ion-color-base-rgb: var(--ion-color-today-rgb);

  --ion-color-contrast: var(--ion-color-today-contrast);

  --ion-color-contrast-rgb: var(--ion-color-today-contrast-rgb);

  --ion-color-shade: var(--ion-color-today-shade);

  --ion-color-tint: var(--ion-color-today-tint);

}

# 새로운 글로벌 색상체계 적용하기(실전)

1. https://ionicframework.com/docs/theming/colors#new-color-creator 접속

2. 해당 사이트에서, 색상 이름과 색상값을 지정하고 생성된 theme/variable.scss 내에 scss 태그를 root에 붙여넣기 한다.

# 사용 예시

<ion-button color="today">Favorite</ion-button> //ionic 컴포넌트에서 color directive 값으로 사용가능

div {

  background: var(--ion-color-today);                  //일반 컴포넌트나 페이지 상의 css 상에서 불러와서 사용가능 : var(--ion-color-(색상값)) 형식 사용

  color: var(--ion-color-today-contrast);

  color: rgba(var(--ion-color-today-contrast), .5) /* 투명값 적용! */

}

# 참고 정보

--(스타일 이름) 형태는 단순히, css 문서 상에서 값을 적용한다기 보다는, 임시로 정의하는 것 뿐이고,

해당 스타일 값을 적용하려면 var(--스타일명); 형태로 사용해주어야 한다.

# 출처

- https://ionicframework.com/docs/theming/colors#adding-colors