Compose는 머티리얼 디자인 구현을 제공한다. Material Theming을 기반으로 빌드 되는데 이를 맞춤 설정하면 앱을 빌드하는데 사용하는 구성요소에 자동으로 반영된다.

테마 정의

compose에서 테마 설정을 구현하는 핵심 요소중 하나는 MaterialTheme 컴포저블이다. 이 컴포저블을 Compose 계층 구조에 배치하면 그 안의 모든 구성요소의 색상, 유형 등 맞춤설정을 할 수 있다.

@Composable
fun MaterialTheme(
    colors: Colors,
    typography: Typography,
    shapes: Shapes,
    content: @Composable () -> Unit
) { ...

테마 만들기

앱의 스타일을 중앙 집중화 하려면 MaterialTheme를 래핑하고 구성하는 자체 컴포저블을 만드는 것이 좋다. 그렇게 하면 테마 맞춤설정을 한곳에서 지정하고 여러 화면 또는 preview등 여러 위치에서 쉽게 재사용할 수 있기 때문이다. 필요하면 여러 테마 컴포저블을 만들 수 있다.

색상

Compose의 색상은 androidx.compose.ui.graphics.Color 에 위치한 Color 클래스를 사용하여 정의 한다. 색상을 ULong으로 또는 별도의 색상 채널로 지정할 수 있는 생성자가 여러 개 있다.

<aside> 💡 참고:  색상 지정을 위한 일반적인 '#dd0d3c' 형식에서 변환하려면 '#'을 '0xff'로 대체한다.(Color(0xffdd0d3c)). 여기서 'ff'는 완전한 알파를 의미

</aside>

생상을 로컬에서 만들고 object 등에 보관 할수 있다.

Surface(color = Color.LightGray) {
  Text(
    text = "Hard coded colors don't respond to theme changes :(",
    textColor = Color(0xffff00ff)
  )
}

Color에는 다양한 알파/빨간색/녹색/파란색 값으로 새 색상을 만들 수 있는 copy와 같은 여러 유용한 메서드가 있다.

val red = Color.Gray.copy(alpha = 0.1f)