Compose 내 테마 분석

Jetpack Compose의 테마는 여러 개의 하위 수준 구성과 관련 API로 이루어져 있습니다. 이러한 요소는 MaterialTheme의 소스 코드에서 확인할 수 있으며 맞춤 디자인 시스템에 적용할 수도 있습니다.

테마 시스템 클래스

일반적으로 테마는 공통된 시각적 개념과 동작 개념을 그룹화하는 여러 개의 하위 시스템으로 구성됩니다. 이러한 시스템은 테마 설정 값이 있는 클래스를 사용하여 모델링할 수 있습니다.

예를 들어 MaterialTheme에는 ColorScheme(색상 시스템), Typography(서체 시스템), Shapes(도형 시스템) 등이 포함됩니다.

@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
    /* ... */
)

/* ... */
ThemeAnatomySnippets.kt

테마 시스템 컴포지션 로컬

테마 시스템 클래스는 컴포지션 트리에 CompositionLocal 인스턴스 형태로 암시적으로 제공됩니다. 그러면 구성 가능한 함수에서 테마 설정 값을 정적으로 참조할 수 있습니다.

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 = ""
    )
}

/* ... */
ThemeAnatomySnippets.kt

테마 함수

테마 함수는 진입점이자 기본 API입니다. 이 함수는 로직에 필요한 경우 실제 값을 사용하여 테마 시스템 CompositionLocal(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
    )
}
ThemeAnatomySnippets.kt

테마 객체

테마 시스템에 액세스하는 방법은 편의성 속성이 있는 객체를 사용하는 것입니다. 일관성을 위해 객체 이름은 테마 함수와 동일하게 지정되는 경향이 있습니다. 편의성 속성은 현재 컴포지션 로컬을 가져오기만 합니다.

// 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
    /* ... */
}
ThemeAnatomySnippets.kt