Material 3 Design 테마 이용법

Surface 색상 옵션명 및 설명

색상 옵션명	역할 및 사용 목적
surface	카드, 시트, 모달과 같은 컴포넌트의 배경 색상으로 사용됩니다.
onSurface	surface 위에 배치된 텍스트나 아이콘의 색상입니다. 가시성과 접근성을 보장합니다.
surfaceVariant	surface의 변형 색상으로, 보조적인 배경 색상으로 사용됩니다.
onSurfaceVariant	surfaceVariant 위에 배치된 텍스트나 아이콘의 색상입니다.
surfaceTint	surface 색상의 틴트(투명도) 변형으로, 강조나 포커스된 영역을 나타내는 데 사용됩니다.
surfaceDim	낮은 밝기의 surface 색상으로, 덜 중요한 영역에 사용됩니다.
surfaceBright	높은 밝기의 surface 색상으로, 중요한 영역이나 강조해야 하는 부분에 사용됩니다.
surfaceContainerLowest	가장 낮은 레벨의 컨테이너 배경 색상으로 사용됩니다.
surfaceContainerLow	낮은 레벨의 컨테이너 배경 색상으로 사용됩니다.
surfaceContainer	기본 컨테이너 배경 색상으로 사용됩니다.
surfaceContainerHigh	높은 레벨의 컨테이너 배경 색상으로 사용됩니다.
surfaceContainerHighest	가장 높은 레벨의 컨테이너 배경 색상으로 사용됩니다.

UI 요소와 색상 적용 예시

UI 요소	배경 색상	텍스트/아이콘 색상	설명
네비게이션 바	surface	onSurface	네비게이션 바의 배경 색상은 surface, 텍스트와 아이콘은 onSurface 색상을 사용하여 가독성을 확보합니다.
Elevated button	primary	onPrimary	버튼의 배경 색상은 primary, 텍스트와 아이콘은 onPrimary 색상을 사용하여 강조합니다.
카드	surface	onSurface	카드 컴포넌트의 배경 색상은 surface, 내부 텍스트와 아이콘은 onSurface 색상을 사용합니다.
다이얼로그	surface	onSurface	다이얼로그의 배경 색상은 surface, 텍스트와 아이콘은 onSurface 색상을 사용합니다.
앱 바	surface	onSurface	앱 바의 배경 색상은 surface, 텍스트와 아이콘은 onSurface 색상을 사용하여 일관된 테마를 유지합니다.
플로팅 액션 버튼	secondary	onSecondary	버튼의 배경 색상은 secondary, 텍스트와 아이콘은 onSecondary 색상을 사용합니다.
스낵바	inverseSurface	onInverseSurface	스낵바의 배경 색상은 inverseSurface, 텍스트와 아이콘은 onInverseSurface 색상을 사용합니다.
탭 바	surface	onSurface	탭 바의 배경 색상은 surface, 텍스트와 아이콘은 onSurface 색상을 사용하여 가독성을 높입니다.
중요한 알림 배너	surfaceBright	onSurface	중요한 알림 배너의 배경 색상은 surfaceBright, 텍스트와 아이콘은 onSurface 색상을 사용합니다.
보조적 정보 배너	surfaceDim	onSurface	보조적 정보 배너의 배경 색상은 surfaceDim, 텍스트와 아이콘은 onSurface 색상을 사용합니다.
낮은 우선 순위 카드	surfaceContainerLowest	onSurface	낮은 우선 순위 카드의 배경 색상은 surfaceContainerLowest, 텍스트와 아이콘은 onSurface 색상을 사용합니다.
보통 우선 순위 카드	surfaceContainer	onSurface	보통 우선 순위 카드의 배경 색상은 surfaceContainer, 텍스트와 아이콘은 onSurface 색상을 사용합니다.
높은 우선 순위 카드	surfaceContainerHighest	onSurface	높은 우선 순위 카드의 배경 색상은 surfaceContainerHighest, 텍스트와 아이콘은 onSurface 색상을 사용합니다.

이 표를 통해 surface 관련 모든 색상 옵션과 그 사용 목적을 쉽게 이해할 수 있습니다. 각 UI 요소에 적절한 색상을 적용하여 일관된 디자인과 가독성을 유지할 수 있습니다.

surface:
onSurface:
surfaceVariant:
onSurfaceVariant:
surfaceTint:
surfaceDim: 
surfaceBright: 
surfaceContainerLowest:
surfaceContainerLow: 
surfaceContainer: 
surfaceContainerHigh:
surfaceContainerHighest: