Material Theme Color System

안드로이드 그리고 플러터를 공부하면서 MaterialTheme을 자주 접하게 된다. 그리고 기 설정된 색을 주로 사용하면서 Primary onSurface 등 다양한 색 구성을 접하게된다. 막연하게 사용했었지만 그 용도를 정확히 파악하고 제대로된 사용처를 파악하여 완성도 있는 앱을 만들고자 정리해둔다.

---

Primary color

Primary Color는 앱의 스크린 그리고 컴포넌트에서 가장 빈번하게 사용하는 색이다

일반적으로 appbar에 색이 primary color가 되는 경우가 많습니다. 그리고 primary color에서 더 어두운 색이 systembar 색으로 결정된다.이를 primary varient라고 합니다.

Secondary color

secondary color는 앱 내에서 특별히 강조하고 싶은 컴포넌트에 적용합니다. secondary color를 도입하는 것은 자율입니다. 만약 secondary color를 지정하지 않았다면 primary color를 이용해 강조해도 관계 없습니다.

secondary color는 일반적으로

• 플로팅 액션버튼
• 스위치 체크박스 라디오버튼과 같은 선택 엘레멘트
• 선택한 텍스트를 강조
• progress bar
• 헤드라인, 링크

에 사용됩니다.

Surface, background and error colors

먼저, ② surface color는 card sheet menu와 같이 특정 컴포넌트이 배경으로 사용되는 경우가 많습니다. 왼쪽 그림에서는 card 컴포넌트가 존재하고 card의 배경색으로서 surface를 사용한 경우입니다.

 

그리고 ① background color는 스크롤이 가능한 컨텐츠들의 배경색으로 사용되는 경우가 많습니다.

 

③ erorr color는 말 그대로 오류가 발생했을때 나타나는 색 입니다.

 

 

 

"On" Colors

일반적으로 "On" color들은 글자의 색으로 사용되는 경우가 많습니다. 예를 들어 onSurface의 경우 Surface색이 사용된 컴포넌트의 색을 나타낼 때 사용됩니다. 이는 OnBackground, OnPrimary 등 역시 마찬가지의 규칙이 적용됩니다. 당연하게도 위의 예시의 background 색이 하얀색 #FFFFFF 이라면 onBackground의 색은 #000000 검정의 색을 두는 것이 일반적입니다.

---

위의 예제 및 기본 바탕되는 지식은 모두 material.io 사이트에서 발췌한 내용들입니다. 또한 이러한 규칙은 권고사항일 뿐이지 반드시 지켜야 할 필요는 없습니다.