[Compose] - Design System 구축 - 2. ColorScheme 만들기

 

 

 

[안드로이드] - Compose Typography 만들기

 

이전 게시글에서 Compose로 Typography를 선언하는 방법에 대해서 알아보았습니다.

이번엔 ColorScheme을 선언하는 방법을 정리하였습니다.

 

1. Color 선언

DesignSystem > Color.kt

@Stable val Black = Color(0xFF000000)
@Stable val White = Color(0xFFFFFFFF)

@Stable val Gray1 = Color(0xFF171717)
@Stable val Gray2 = Color(0xFF737373)
@Stable val Gray3 = Color(0xFFC1C1C1)
@Stable val Gray4 = Color(0xFFECECEC)
@Stable val Gray5 = Color(0xFFF3F3F3)

@Stable val Purple1 = Color(0xFF593EEC)
@Stable val Purple2 = Color(0xFF7E71FF)
@Stable val Purple3 = Color(0xFFD5D4FF)
@Stable val Purple4 = Color(0xFFF2F3Ff)

@Stable val Yellow1 = Color(0xFFF7D198)

 

Color를 선언합니다.

Figma, Zeplin 등에서 #FFFFFF로 선언 되어있었다면 0xFFFFFFFF로 변경해주면 됩니다.

 

만약 Gradient 컬러가 있다면 아래와 같이 선언 가능합니다.

@Stable val Linear3 = Brush.linearGradient(
    colorStops = arrayOf(
        Pair(0.0f, Color(0xFF9DABFF)),
        Pair(0.39f, Color(0xFFC8CFFF)),
        Pair(1.0f, Color(0xFFA4FFFF))
    ),
)

 

2. Color 클래스 선언

DesignSystem > Color.kt

@Stable
class Colors(
    black: Color,
    white: Color,
    gray1: Color,
    gray2: Color,
    gray3: Color,
    gray4: Color,
    gray5: Color,
    purple1: Color,
    purple2: Color,
    purple3: Color,
    purple4: Color,
    yellow1: Color,
) {
    var black by mutableStateOf(black, structuralEqualityPolicy())
        internal set
	/* 생략 */
}

 

Color를 속성으로 선언하고 @Stable 어노테이션을 선언해줍니다.

 

 

3. 라이트/다크 모드 Color 선언

DesignSystem > Color.kt

fun lightColors(
    black: Color = Black,
    gray1: Color = Gray1,
    /.../
	/* 라이트 모드 색상 선언 */
): Colors {
    return Colors(
        black = black,
        /.../
    )
}

fun darkColors(
    black: Color = Black,
    darkgray1: Color = Gray1,
    /.../
	/* 다크 모드 색상 선언 */
): Colors {
    return Colors(
        black = black,
        /.../
    )
}

 

라이트 모드와 다크 모드에서 사용할 색상을 각각 선언해줍니다.

 

 

4. CompositionLocalProvider를 통한 로컬 값 전달

DesignSystem > Color.kt

internal val LocalColors = staticCompositionLocalOf { lightColors() }

 

DesignSystem > Theme.kt

@Composable
fun RunnectTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit,
) {
    // setContent에서 사용할 테마를 지정하는 함수
    // 여기서 화이트/다크 테마 대응 가능
    val colorScheme = remember(darkTheme) {
        if (darkTheme) darkColors() else lightColors()
    }

    CompositionLocalProvider(
        LocalColors provides colorScheme,
        LocalRunnectTypography provides RunnectTheme.typography,
    ) {
        MaterialTheme(
            content = content
        )
    }
}

 

ColorScheme을 완성 했으므로 위와 같이 Theme Composable을 완성해줍니다.

 

여기서 `CompositionLocalProvider`는 로컬 값을 설정하고, 그 값들을 하위 Composable에게 제공하는 역할을 합니다.

provides 키워드를 사용하여 `LocalColors`, LocalRunnectTypography` 등에 값을 설정할 수 있습니다.

internal val LocalColors = staticCompositionLocalOf { lightColors() }

 

`CompositionLocalProvider`를 통해 ColorScheme을 제공하기 위해 위와 같이 선언한 것 입니다.

하위 Composable에게 공통으로 전달해줘야할 값이 있다면 추가로 선언하여 사용하면 됩니다.

 

@Composable
fun ExampleComponent() {
    val colors = LocalColors.current
    val shapes = LocalShapes.current
    val typography = LocalTypography.current

    // colors, shapes, typography를 사용하여 UI 구성
}

 

일반적으로 `CompositionLocalProvider`를 사용하면 위와 같이 접근할 수 있습니다.

이렇게 접근한 값들은 UI를 구성하는 데 사용할 수 있습니다.

 

@Stable
object RunnectTheme {

    val colorScheme: Colors
        @Composable
        @ReadOnlyComposable
        get() = LocalColors.current

    val typography: RunnectTypography
        @Composable
        @ReadOnlyComposable
        get() = LocalRunnectTypography.current
}

 

이를 조금 더 편하게 접근하기 위해 Object 클래스를 선언해도 좋습니다.