[Ionic 5] Global 전체배경,글자 기본색상값 적용하기

# 개요

무엇이든지, 공통적인 값들은 global로 적용한 뒤에 작업하는 것이 중복 작업을 줄일 수 있을 것이다.

기본적으로, primary~light 값이나 custom 색상을 적용했다면, 별다른 적용 필요는 없다.

segment, toolbar 처럼 완전 고정인 색상은 global로 지정하고, 나머지는 다르게 적용한다.

background-color 나 ion-text-color는 전체적으로 영향을 주므로, 단순 색상이 아닌 step color를 사용하여, dark theme 시에도 영향이 없게 하여야한다. 

앱의 전체적인 배경색(하얀색 속성값), 앱의 전체적인 글자색(검정색 속성값)을 지정하는 용도로 사용되는 것이 대부분이다.

# 배경 색상 & 글자 색상

--ion-background-color Background color of the entire app

--ion-background-color-rgb Background color of the entire app, rgb format

--ion-text-color Text color of the entire app

--ion-text-color-rgb Text color of the entire app, rgb format

# 팝오버시, 뒤 overlay 색상

--ion-backdrop-color Color of the Backdrop component

--ion-backdrop-opacity Opacity of the Backdrop component

--ion-overlay-background-color Background color of the overlays

# 가장자리선 색상

--ion-border-color Border color

--ion-box-shadow-color Box shadow color

# ion-tab-bar 관련 색상

--ion-tab-bar-background Background of the Tab Bar

--ion-tab-bar-background-focused Background of the focused Tab Bar

--ion-tab-bar-border-color Border color of the Tab Bar

--ion-tab-bar-color Color of the Tab Bar

--ion-tab-bar-color-selected Color of the selected Tab Button

# ion-toolbar, ion-segment 관련 색상

--ion-toolbar-background Background of the Toolbar

--ion-toolbar-border-color Border color of the Toolbar

--ion-toolbar-color Color of the components in the Toolbar

--ion-toolbar-segment-color Color of the Segment Buttons in the Toolbar

--ion-toolbar-segment-color-checked Color of the checked Segment Buttons in the Toolbar

--ion-toolbar-segment-background Background of the Segment Buttons in the Toolbar

--ion-toolbar-segment-background-checked Background of the Segment Buttons in the Toolbar

--ion-toolbar-segment-indicator-color Color of the Segment Button indicator in the Toolbar

# ion-item 관련

--ion-item-background : Background of the Item

--ion-item-border-color : Border color of the Item

--ion-item-color         : Color of the components in the Item

--ion-placeholder-color : Color of the placeholder in Inputs

# 주의 사항

- 앱의 전체적인 기본 배경 색상을 지정하려면 background-color

- 앱의 전체적인 글자 색상을 지정하려면 text-color인데 보통 동시에 변경한다.

만약 배경 색상을 #f2f2f2, 글자색상을 #404040 로 줄 수 있다.

ionic 기본값은 #ffffff, #000000이다. 그리고 step color를 정의해주어야, 테마 변경시 글자가 잘 안보이게되는 문제를 해결해 준다.

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

2. 원하는 기본 배경(하양)과, 글자색상(검정) 선택 아래의 css variable 값을 theme/variable.scss 내에 붙여넣기

:root { --ion-background-color: #dddddd; --ion-background-color-rgb: 221,221,221; --ion-text-color: #000000; --ion-text-color-rgb: 0,0,0; --ion-color-step-50: #d2d2d2; --ion-color-step-100: #c7c7c7; --ion-color-step-150: #bcbcbc; --ion-color-step-200: #b1b1b1; --ion-color-step-250: #a6a6a6; --ion-color-step-300: #9b9b9b; --ion-color-step-350: #909090; --ion-color-step-400: #858585; --ion-color-step-450: #7a7a7a; --ion-color-step-500: #6f6f6f; --ion-color-step-550: #636363; --ion-color-step-600: #585858; --ion-color-step-650: #4d4d4d; --ion-color-step-700: #424242; --ion-color-step-750: #373737; --ion-color-step-800: #2c2c2c; --ion-color-step-850: #212121; --ion-color-step-900: #161616; --ion-color-step-950: #0b0b0b; }