Compose Docs | Anatomy of a theme in Compose

Compose 내 테마 분석  |  Jetpack Compose  |  Android Developers

젯팩 컴포즈의 테마는 여러 하위 수준 구성 요소와 관련 API로 구성됩니다. 이러한 구성 요소는 MaterialTheme의 소스 코드에서 확인할 수 있으며 사용자 정의 디자인 시스템에서도 적용할 수 있습니다.

Theme system classes

테마는 일반적으로 공통된 시각적 및 행동 개념을 그룹화하는 여러 시스템으로 구성됩니다. 이러한 시스템은 테마 값을 가진 클래스로 모델링할 수 있습니다.
예를 들어 MaterialTheme에는 색상(색상 시스템), 타이포그래피(타이포그래피 시스템) 및 모양(모양 시스템)이 포함됩니다.

@Immutable
data class ColorSystem(
    val color: Color,
    val gradient: List<Color>
    /* ... */
)

@Immutable
data class TypographySystem(
    val fontFamily: FontFamily,
    val textStyle: TextStyle
)
/* ... */

@Immutable
data class CustomSystem(
    val value1: Int,
    val value2: String
    /* ... */
)

/* ... */

Theme system composition locals

테마 시스템 클래스는 컴포지션 트리에 CompositionLocal 인스턴스로 암시적으로 제공됩니다. 이를 통해 컴포저블 함수에서 테마 값을 정적으로 참조할 수 있습니다.
CompositionLocal에 대해 자세히 알아보려면 로컬 범위의 데이터로 컴포지션 로컬 가이드에서 확인하세요.

val LocalColorSystem = staticCompositionLocalOf {
    ColorSystem(
        color = Color.Unspecified,
        gradient = emptyList()
    )
}

val LocalTypographySystem = staticCompositionLocalOf {
    TypographySystem(
        fontFamily = FontFamily.Default,
        textStyle = TextStyle.Default
    )
}

val LocalCustomSystem = staticCompositionLocalOf {
    CustomSystem(
        value1 = 0,
        value2 = ""
    )
}

/* ... */

Theme function

테마 함수는 진입점이자 기본 API입니다. 이 함수는 필요한 로직에 따라 실제 값을 사용하여 테마 시스템 CompositionLocals의 인스턴스를 구성하며, CompositionLocalProvider를 통해 컴포지션 트리에 제공됩니다. content 매개변수를 사용하면 중첩된 컴포저블이 계층 구조를 기준으로 테마 값에 액세스할 수 있습니다.

@Composable
fun Theme(
    /* ... */
    content: @Composable () -> Unit
) {
    val colorSystem = ColorSystem(
        color = Color(0xFF3DDC84),
        gradient = listOf(Color.White, Color(0xFFD7EFFF))
    )
    val typographySystem = TypographySystem(
        fontFamily = FontFamily.Monospace,
        textStyle = TextStyle(fontSize = 18.sp)
    )
    val customSystem = CustomSystem(
        value1 = 1000,
        value2 = "Custom system"
    )
    /* ... */
    CompositionLocalProvider(
        LocalColorSystem provides colorSystem,
        LocalTypographySystem provides typographySystem,
        LocalCustomSystem provides customSystem,
        /* ... */
        content = content
    )
}

Theme object

테마 시스템에 액세스하는 것은 편의 속성이 있는 객체를 통해 이루어집니다. 일관성을 위해 객체의 이름은 테마 함수와 동일하게 지정하는 경향이 있습니다. 프로퍼티는 단순히 현재 구성을 로컬로 가져옵니다.

// Use with eg. Theme.colorSystem.color
object Theme {
    val colorSystem: ColorSystem
        @Composable
        get() = LocalColorSystem.current
    val typographySystem: TypographySystem
        @Composable
        get() = LocalTypographySystem.current
    val customSystem: CustomSystem
        @Composable
        get() = LocalCustomSystem.current
    /* ... */
}