Compose Custom Color 설정하기

woobin·2023년 1월 5일
0

Jetpack Compose

목록 보기
1/4

디자이너와 작업하다보면 색상, 폰트, 기본 컴포넌트들을 모아놓고 사용해야하는 경우가 있습니다.
그 중 오늘은 색상을 모아놓고 사용하는 방법을 소개하고자 합니다.


정의하기

새로 kotlin 파일을 만들어 사용해도 되지만 저는 Compose 프로젝트를 생성하면 기본적으로 생성되는 ui/theme/color.kt에 아래와 같이 정의해두었습니다.

// Primary
val Primary_Red_600 = Color(0xFFFC776E)
val Primary_Red_500 = Color(0xFFFF918A)
val Primary_Red_400 = Color(0xFFFFAAA5)
val Primary_Red_300 = Color(0xFFFFC8C5)
val Primary_Red_200 = Color(0xFFFFDFDD)
val Primary_Red_100 = Color(0xFFFFECEB)

// Secondary
val Diary_Green_600 = Color(0xFF31C99D)
val Diary_Green_500 = Color(0xFF59D4B1)
val Diary_Green_400 = Color(0xFF81D9BF)
val Diary_Green_300 = Color(0xFF9BE0CC)
val Diary_Green_200 = Color(0xFFC1EDE0)
val Diary_Green_100 = Color(0xFFDDF5EF)

val Primary_Blue_600 = Color(0xFF4DA9EE)
val Primary_Blue_500 = Color(0xFF6AB8F3)
val Primary_Blue_400 = Color(0xFF80C2F4)
val Primary_Blue_300 = Color(0xFF90C9F4)
val Primary_Blue_200 = Color(0xFFADD9FB)
val Primary_Blue_100 = Color(0xFFDBEFFF)

사용하기

Composable에서 사용할때에는 아래처럼 사용합니다.

@Composable
fun ColorText(content: String) {
    Text (
        text = content,
        color = Primary_Red_600
    )
}

마치며 🦊

오늘은 디자이너와 개발할 때 유용한 색상을 모아두고 사용하는 방법을 알아보았습니다.
별거 없는 것 같지만 같은 색상을 매번 새로 Hex코드를 작성해가며 개발하는것 보다는 위의 방법으로 편하게 사용하는것이 좋은 것 같습니다.

다음에는 폰트를 모아두고 사용하는 방법을 포스팅하도록 하도록 하겠습니다.

혹시나 잘못된 부분이나 부족한 부분이 있다면 댓글로 알려주시면 열심히 배우겠습니다.
읽어주셔서 감사합니다.

0개의 댓글