[Android, Kotlin] compose custom theme 만들기

 

이번 포스팅은 지난 포스팅에서 말했다시피 커스텀 테마에 대한 간단 설명과 코드를 알려주도록 하겠다.

커스텀 테마를 왜 만들어야 하는지 궁금한 사람들이 있을 것 같아 간단히 설명하자면

대형 프로젝트를 하다 보면 color가 다양해질 수 있기에 기본적으로 android studio에서 제공하는 color palette가 부족할 수 있다. 그리고 디자이너가 정한 color명을 그대로 적용하기 힘들기 때문이다.

이럴 때에는 custom theme를 만드는 것을 고려해 볼 수 있다.

그래서 필자는 이번 대형 프로젝트에 대비해 커스텀 테마를 제작해 보기로 했다.

자 그럼 이제 코드로 필자가 custom theme를 만들었던 과정을 확인해 보자.

 

시작하기 전에!

첫 번째 단계는 theme 상태를 확인할 수 있는 enum class를 생성해 준다.

enum class Theme {
    LIGHT,
    DARK
}

 

1. color 정의하기

자신의 프로젝트 design system을 이용해 color를 정의해 보자.

val Black = Color(0xFF000000)
val White = Color(0xFFFFFFFF)
val Transparent = Color(0x00000000)

val Primary10Light = Color(0xFF6F7AEC)
val Primary20Light = Color(0xFFEEF0FD)
val Primary30Light = Color(0xFFC5CAF7)
val Neutral10Light = Color(0xFF292E3D)
val Neutral20Light = Color(0xFF656B80)
val Neutral30Light = Color(0xFFBBBBCC)
val Neutral40Light = Color(0xFFE2E2EE)
val Neutral50Light = Color(0xFFF2F2F4)
val BackGroundLight = Color(0xFFF7F7F9)
val CardBackGroundLight = Color(0xFFFDFDFD)
val ErrorLight = Color(0xFFD84D4D)
val PositiveLight = Color(0xFF2E8546)
val SubGreenLight = Color(0xFF9BDA93)
val SubYellowLight = Color(0xFFEEE170)
val SubRedLight = Color(0xFFF3A199)

val Primary10Dark = Color(0xFF5966E9)
val Primary20Dark = Color(0xFF1D2136)
val Primary30Dark = Color(0xFF24295D)
val Neutral10Dark = Color(0xFFCDCDD5)
val Neutral20Dark = Color(0xFF818198)
val Neutral30Dark = Color(0xFF626274)
val Neutral40Dark = Color(0xFF292930)
val Neutral50Dark = Color(0xFF1E1E26)
val BackGroundDark = Color(0xFF1F1E2B)
val CardBackGroundDark = Color(0xFF17161F)
val ErrorDark = Color(0xFFFF7D7D)
val PositiveDark = Color(0xFF5EFF8B)
val SubGreenDark = Color(0xFF79CE6F)
val SubYellowDark = Color(0xFFE9D844)
val SubRedDark = Color(0xFFEE786D)

필자의 경우에는 dark, light 구분해서 color를 정의했다. dark theme가 없는 경우 작성하지 않아도 되고, color의 구성도 여러분들의 design system을 이용해 자유롭게 custom 해보시길..(필자의 코드는 예시이다.)

 

그리고 color 객체를 정의하는 color palette class와 color 복사 update용 함수를 추가한다.

이후에 만들 typography와 다른 점은 copy와 update가 있다는 점이다. 이 두 함수를 만드는 이유는 필자의 theme는 dark/light로 계속해서 바뀌기 때문에 그 상태를 보존하기 위해 copy와 update 함수를 만들어 주었다.

class Colors(
    primary10: Color,
    primary20: Color,
    primary30: Color,
    neutral10: Color,
    neutral20: Color,
    neutral30: Color,
    neutral40: Color,
    neutral50: Color,
    background: Color,
    cardBackground: Color,
    error: Color,
    positive: Color,
    subGreen: Color,
    subYellow: Color,
    subRed: Color
) {
    var primary10 by mutableStateOf(primary10)
        private set
    var primary20 by mutableStateOf(primary20)
        private set
    var primary30 by mutableStateOf(primary30)
        private set

    var neutral10 by mutableStateOf(neutral10)
        private set
    var neutral20 by mutableStateOf(neutral20)
        private set
    var neutral30 by mutableStateOf(neutral30)
        private set
    var neutral40 by mutableStateOf(neutral40)
        private set
    var neutral50 by mutableStateOf(neutral50)
        private set

    var background by mutableStateOf(background)
        private set
    var cardBackground by mutableStateOf(cardBackground)
        private set

    var error by mutableStateOf(error)
        private set
    var positive by mutableStateOf(positive)
        private set

    var subGreen by mutableStateOf(subGreen)
        private set
    var subYellow by mutableStateOf(subYellow)
        private set

    var subRed by mutableStateOf(subRed)
        private set

    fun update(colors: Colors) {
        this.primary10 = colors.primary10
        this.primary20 = colors.primary20
        this.primary30 = colors.primary30
        this.neutral10 = colors.neutral10
        this.neutral20 = colors.neutral20
        this.neutral30 = colors.neutral30
        this.neutral40 = colors.neutral40
        this.neutral50 = colors.neutral50
        this.background = colors.background
        this.cardBackground = colors.cardBackground
        this.subGreen = colors.subGreen
        this.subYellow = colors.subYellow
        this.subRed = colors.subRed
        this.error = colors.error
        this.positive = colors.positive
    }

    fun copy() = Colors(
        primary10 = primary10,
        primary20 = primary20,
        primary30 = primary30,
        neutral10 = neutral10,
        neutral20 = neutral20,
        neutral30 = neutral30,
        neutral40 = neutral40,
        neutral50 = neutral50,
        background = background,
        cardBackground = cardBackground,
        error = error,
        positive = positive,
        subGreen = subGreen,
        subYellow = subYellow,
        subRed = subRed
    )
}

 

 

2. typography 만들기

그다음에는 font를 적용한 typography를 만들어 주겠다.

val suitFont = FontFamily(
    Font(R.font.suit_bold, FontWeight.Bold),
    Font(R.font.suit_medium, FontWeight.Medium),
    Font(R.font.suit_semi_bold, FontWeight.SemiBold)
)

object Typography {

    @Stable
    val h1 = TextStyle(
        fontFamily = suitFont,
        fontSize = 48.sp,
        fontWeight = FontWeight.Bold
    )

    @Stable
    val h2 = TextStyle(
        fontFamily = suitFont,
        fontSize = 32.sp,
        fontWeight = FontWeight.Bold
    )

    @Stable
    val h3 = TextStyle(
        fontFamily = suitFont,
        fontSize = 24.sp,
        fontWeight = FontWeight.Bold
    )

    @Stable
    val h4 = TextStyle(
        fontFamily = suitFont,
        fontSize = 20.sp,
        fontWeight = FontWeight.Bold
    )

    @Stable
    val subTitle1 = TextStyle(
        fontFamily = suitFont,
        fontSize = 18.sp,
        fontWeight = FontWeight.Bold
    )

    @Stable
    val subTitle2 = TextStyle(
        fontFamily = suitFont,
        fontSize = 16.sp,
        fontWeight = FontWeight.Bold
    )

    @Stable
    val subTitle3 = TextStyle(
        fontFamily = suitFont,
        fontSize = 18.sp,
        fontWeight = FontWeight.Medium
    )

    @Stable
    val smallTitle = TextStyle(
        fontFamily = suitFont,
        fontSize = 14.sp,
        fontWeight = FontWeight.SemiBold
    )

    @Stable
    val body = TextStyle(
        fontFamily = suitFont,
        fontSize = 16.sp,
        fontWeight = FontWeight.Medium,
        lineHeight = 1.5f.sp
    )

    @Stable
    val body2 = TextStyle(
        fontFamily = suitFont,
        fontSize = 14.sp,
        fontWeight = FontWeight.Medium
    )

    @Stable
    val caption = TextStyle(
        fontFamily = suitFont,
        fontSize = 12.sp,
        fontWeight = FontWeight.Medium
    )
}

internal val LocalTypography = staticCompositionLocalOf { Typography }

fontfamily와 font object를 생성하고 localTypography는 staticCompositionLocalOf을 이용해 특정 composable까지 접근을 허용할 수 있다.(사실 staticCompositionLocalOf은 제대로 이해하지 못해서 제대로 설명을 드릴 수가 없을 것 같아서 필자가 참고한 블로그 주소를 보내주도록 하겠다.)

https://www.charlezz.com/?p=46403 

Compose의 CompositionLocal 이해하기 | 찰스의 안드로이드

 

3. theme 만들기

color와 typography를 만들었으니 이제는 테마를 만들어보자.

먼저 이전에 만들어둔 color Palette를 이용해 color를 만들어 준다.

private val darkColors = Colors(
    primary10 = Primary10Dark,
    primary20 = Primary20Dark,
    primary30 = Primary30Dark,
    neutral10 = Neutral10Dark,
    neutral20 = Neutral20Dark,
    neutral30 = Neutral30Dark,
    neutral40 = Neutral40Dark,
    neutral50 = Neutral50Dark,
    background = BackGroundDark,
    cardBackground = CardBackGroundDark,
    subGreen = SubGreenDark,
    subYellow = SubYellowDark,
    subRed = SubRedDark,
    error = ErrorDark,
    positive = PositiveDark
)

private val lightColors = Colors(
    primary10 = Primary10Light,
    primary20 = Primary20Light,
    primary30 = Primary30Light,
    neutral10 = Neutral10Light,
    neutral20 = Neutral20Light,
    neutral30 = Neutral30Light,
    neutral40 = Neutral40Light,
    neutral50 = Neutral50Light,
    background = BackGroundLight,
    cardBackground = CardBackGroundLight,
    subGreen = SubGreenLight,
    subYellow = SubYellowLight,
    subRed = SubRedLight,
    error = ErrorLight,
    positive = PositiveLight
)

또한 typography 때와 같이 color 상태를 저장하는 staticCompositionLocalOf 변수를 만들어 준다.

private val LocalColorProvider = staticCompositionLocalOf { DotoriLightColors }

 

다음으로 테마를 제공하는 함수를 만들어 보겠다.

@Composable
private fun ThemeLocalProvider(
    colors: DotoriColors,
    typography: DotoriTypography,
    content: @Composable () -> Unit
) {
    val colorPalette = remember { colors.copy() }

    colorPalette.update(dotoriColors = colors)
    CompositionLocalProvider(
        LocalColorProvider provides colorPalette,
        LocalTypography provides typography,
        content = content
    )
}

private val Theme.colors: Colors
    get() = when(this) {
        Theme.DARK -> DarkColors
        Theme.LIGHT -> LightColors
    }

color는 light/dark로 바뀌기 때문에 color의 상태를 저장하고 colors가 바뀌면 remember에서도 변경되게 만들었고, compositionLocalProvider로 color와 typography를 제공했다.

colors 변수는 theme 상태에 따라 위에서 제작한 color palette를 적용해 주는 부분이다.

 

마지막 단계는 개발자가 직접 사용할 theme를 생성해 주는 과정이다.

object Theme {
    val colors: Colors
        @Composable
        get() = LocalColorProvider.current

    val typography: Typography
        @Composable
        get() = LocalTypography.current

    var theme by mutableStateOf(Theme.LIGHT)

    fun isSystemIsDarkTheme(): Boolean {
        return dotoriTheme == Theme.DARK
    }
}

@Composable
fun Theme(
    theme: Theme = Theme.theme,
    typography: Typography = Theme.typography,
    content: @Composable () -> Unit
) {
    ThemeLocalProvider(
        colors = theme.colors,
        typography = typography,
        content = content
    )
}

object의 theme는 사용자가 color와 typography를 적용할 때 사용될 것이다.

color와 typography의 현재 상태를 가져온다. 또한 현재 테마가 dark theme인지도 검사하는 함수도 생성했다.(이 함수는 없어도 된다. 필요한 분들만 만드시길)

composable function theme는 android studio project를 처음 생성할 때 사용하는 AppNameTheme {}와 같은 역할이다.

theme와 typography param을 정의해 놓았기에 사용할 때 굳이 param을 정의하라고 오류가 발생하지 않을 것이다.

 

4. 사용해 보기

이제 테마를 만들었으니 사용해 보자.

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            Theme {
            	// ui component
            }
        }
    }
}

이전에 생성한 Theme composable function을 이용해 테마를 적용할 수 있다.

color와 typography를 적용하는 방법은 다음과 같다.

Column(
    modifier = Modifier
        .fillMaxSize()
        .background(Theme.colors.background)	// color 사용
) {
	Text(
        modifier = Modifier.fillMaxWidth(),
        text = "theme typography",
        style = Theme.typography.body,			// typographuy 사용
        textAlign = TextAlign.Center,
        color = DotoriTheme.colors.neutral10
    )
}

이전에 만든 theme object class를 이용해 정의한 color와 typography를 사용할 수 있다.

 

정리

• 테마를 만드는 것은 처음이라 어려웠던 점이 많았는데, 다른 블로그와 youtube 영상을 참고했었는데 기억이 나지 않는다. 죄송합니다 :(
• custom theme를 제작하면서 대형 프로젝트에서 쓸모가 많을 것이라고 생각했고, 색의 변환(dark/light)과 typography가 변경된 모습을 처음 봤을 때에는 엄청 기뻐했었다.(이래서 내가 코딩을 끊을 수가 없다 ㅎㅎ)
• 아직도 이해가 완전히 되지 않아서 코드의 부가 설명을 해주시거나 더 효율이 좋은 코드를 아시는 분은 댓글로 알려주시면 좋은 공부가 될 것 같습니다. 감사합니다 >:D

 

참고한 블로그

https://velog.io/@vov3616/Compose-Custom-Theme-%EB%A7%8C%EB%93%A4%EA%B8%B0

[Compose] Custom Theme 만들기