MaterialTheme<\/code><\/a> \ucef4\ud3ec\uc800\ube14 \ud568\uc218\ub2e4. \uc774 \ucef4\ud3ec\uc800\ube14\uc744 \ucef4\ud3ec\uc988 \uacc4\uce35\uc5d0 \ubc30\uce58\ud558\uba74 \uadf8 \uc548\uc758 \ubaa8\ub4e0 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \ub300\ud55c \uc0c9\uc0c1, \uc720\ud615 \ubc0f \ubaa8\uc591\uc5d0 \ub300\ud55c \ucee4\uc2a4\ud130\ub9c8\uc774\uc9d5\uc744 \ud560 \uc218 \uc788\ub2e4. \uc774 \ucef4\ud3ec\uc800\ube14\uc774 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc5d0\uc11c \uc815\uc758\ub418\ub294 \ubc29\ubc95\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n@Composable
fun MaterialTheme(
colors: Colors,
typography: Typography,
shapes: Shapes,
content: @Composable () -> Unit
) { ...<\/code><\/pre>\n\n\n\n\ub098\uc911\uc5d0 \uc0c9\uc0c1, \ud0c0\uc774\ud3ec\uadf8\ub798\ud53c \ubc0f \ubaa8\uc591 \uc18d\uc131\uc744 \ub178\ucd9c\ud558\ub294 MaterialTheme \uac1d\uccb4\ub97c \uc0ac\uc6a9\ud558\uc5ec, \uc774 \ucef4\ud3ec\uc800\ube14\uc5d0 \uc804\ub2ec\ub41c \ub9e4\uac1c\ubcc0\uc218\ub97c \uac1c\uc120\ud560 \uc218 \uc788\ub2e4. \ub098\uc911\uc5d0 \uac01\uac01\uc5d0 \ub300\ud574 \uc790\uc138\ud788 \uc0b4\ud3b4\ubcf4\uc790.<\/p>\n\n\n\n
Home.kt\ub97c \uc5f4\uace0 Home \ucef4\ud3ec\uc800\ube14 \ud568\uc218\ub85c \uc774\ub3d9\ud55c\ub2e4. \uc774\uac83\uc740 \uc571\uc758 \uc8fc\uc694\ud55c \uc9c4\uc785\uc810\uc774\ub2e4. MaterialTheme\ub97c \uc120\uc5b8\ud558\ub294 \ub3d9\uc548, \ub9e4\uac1c\ubcc0\uc218\ub97c \uc9c0\uc815\ud558\uc9c0 \uc54a\uc73c\ubbc0\ub85c \uae30\ubcf8 “baseline” \uc2a4\ud0c0\uc77c\uc774 \uc801\uc6a9\ub41c\ub2e4.<\/p>\n\n\n\n
@Composable
fun Home() {
...
MaterialTheme {
Scaffold(...<\/code><\/pre>\n\n\n\n\uc571\uc758 \ud14c\ub9c8\ub97c \uad6c\ud604\ud558\uae30 \uc704\ud574 \uc0c9\uc0c1, \uc720\ud615 \ubc0f \ubaa8\uc591 \ub9e4\uac1c\ubcc0\uc218\ub97c \uc0dd\uc131\ud574\ubcf4\uc790.<\/p>\n\n\n\n
\ud14c\ub9c8 \ub9cc\ub4e4\uae30<\/h2>\n\n\n\n
\uc2a4\ud0c0\uc77c\ucf54\ub4dc\ub97c \uc911\uc559 \uc9d1\uc911\ud654\ud558\uc5ec \uad00\ub9ac\ud558\ub824\uba74, MaterialTheme\ub97c \ub798\ud551\ud558\uace0 \uad6c\uc131\ud558\ub294 \uc790\uc2e0\ub9cc\uc758 \ucef4\ud3ec\uc800\ube14\uc744 \ub9cc\ub4dc\ub294 \uac83\uc774 \uc88b\ub2e4. \uc774\ub807\uac8c \ud558\uba74 \ucee4\uc2a4\ud140 \ud14c\ub9c8 \uc9c0\uc815\ud560 \uc218 \uc788\ub294 \ub2e8\uc77c \uc704\uce58\ub97c \uc81c\uacf5\ud558\uace0, \uc5ec\ub7ec\uacf3\uc5d0\uc11c \uc27d\uac8c \uc7ac\uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
com.codelab.theming.ui.start.theme \ud328\ud0a4\uc9c0\uc5d0\uc11c Theme.kt\ub77c\ub294 \uc0c8 \ud30c\uc77c\uc744 \ub9cc\ub4e0\ub2e4. \ub2e4\ub978 \ucef4\ud3ec\uc800\ube14\uc744 \ucf58\ud150\uce20\ub85c \ubc1b\uc544\ub4e4\uc774\uace0 MaterialTheme\ub97c \ub798\ud551\ud558\ub294 JetnewsTheme\ub77c\ub294 \uc0c8\ub85c\uc6b4 \ucef4\ud3ec\uc800\ube14 \ud568\uc218\ub97c \ucd94\uac00\ud55c\ub2e4.<\/p>\n\n\n\n
@Composable
fun JetnewsTheme(content: @Composable () -> Unit) {
MaterialTheme(content = content)
}<\/code><\/pre>\n\n\n\n\uc774\uc81c Home.kt\ub85c \ub3cc\uc544\uc640 MaterialTheme\ub97c JetnewsTheme\ub85c \uad50\uccb4\ud55c\ub2e4.<\/p>\n\n\n\n
- MaterialTheme {
+ JetnewsTheme {
...<\/code><\/pre>\n\n\n\nNote:<\/strong> com.codelab.theming.ui.finish<\/strong>.theme.JetnewsTheme\uac00 \uc544\ub2cc com.codelab.theming.ui.start<\/strong>.theme.JetnewsTheme\ub97c \uac00\uc838\uc624\ub3c4\ub85d \uc720\uc758\ud558\uc790.<\/p><\/blockquote>\n\n\n\n@Preview<\/code> \ud654\uba74 \uc5d0\uc11c\ub294 \uc544\uc9c1 \ubcc0\uacbd \uc0ac\ud56d\uc744 \uc54c\uc218\uac00 \uc5c6\ub2e4. \ubbf8\ub9ac\ubcf4\uae30\uac00 \uc0c8\ub85c\uc6b4 \ud14c\ub9c8\ub97c \uc0ac\uc6a9\ud558\ub3c4\ub85d PostItemPreview<\/code> \ubc0f FeaturedPostPreview<\/code>\ub97c \uc5c5\ub370\uc774\ud2b8\ud558\uc5ec \uc0c8\ub85c\uc6b4 JetnewsTheme<\/code>\uc774 \ucf58\ud150\uce20\ub97c \ub798\ud551\ud558\uace0, \ubbf8\ub9ac\ubcf4\uae30\uc5d0\uc11c \uc0c8\ub85c\uc6b4 \ud14c\ub9c8\ub97c \uc0ac\uc6a9\ud558\ub3c4\ub85d \ud55c\ub2e4.<\/p>\n\n\n\n@Preview(\"Featured Post\")
@Composable
private fun FeaturedPostPreview() {
val post = remember { PostRepo.getFeaturedPost() }
+ JetnewsTheme {
FeaturedPost(post = post)
+ }
}<\/code><\/pre>\n\n\n\nNote:<\/strong>\u00a0Android Studio\uc758 \ucef4\ud3ec\uc988 \ud504\ub85c\uc81d\ud2b8 \ud15c\ud50c\ub9bf\uc740 \uc774 \uad6c\uc870\ub97c \uc790\ub3d9\uc73c\ub85c \uc0dd\uc131\ud558\uc9c0\ub9cc, \uc6b0\ub9ac\ub294 \uac1c\ub150\uc744 \uc774\ud574\ud558\uae30 \uc704\ud574\uc11c \ucc98\uc74c\ubd80\ud130 \uad6c\ucd95\ud574\ubcf4\uace0 \uc788\ub2e4.<\/p><\/blockquote>\n\n\n\nColors<\/h2>\n\n\n\n
\ub2e4\uc74c\uc740 \uc571\uc5d0\uc11c \uad6c\ud604\ud558\ub824\ub294 \uc0c9\uc0c1 \ud314\ub808\ud2b8\uc785\ub2c8\ub2e4. \uc6b0\uc120\uc740 \ub77c\uc774\ud2b8 \ud14c\ub9c8\uc6a9 \ud314\ub808\ud2b8\ub97c \uad6c\ud604\ud558\uace0, \ub3cc\uc544\uc640 \ub2e4\ud06c \ud14c\ub9c8\ub97c \uace7 \uc9c0\uc6d0\ud560 \uac83\uc774\ub2e4.<\/p>\n\n\n\n![\"16a0a3d57f49b71d.png\"\/](\"https:\/\/developer.android.com\/codelabs\/jetpack-compose-theming\/img\/16a0a3d57f49b71d.png?hl=ko\")
<\/figure>\n\n\n\nCompose\uc758 \uc0c9\uc0c1\uc740 Color<\/code><\/a>\ud074\ub798\uc2a4\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc815\uc758\ub41c\ub2e4. \uc0c9\uc0c1\uc744 ULong \ub610\ub294 \uc0c9\uc0c1 \ucc44\ub110\uc744 \ubd84\ub9ac\ud558\uc5ec \uc9c0\uc815\ud560 \uc218 \uc788\ub294 \uc5ec\ub7ec \uc0dd\uc131\uc790\uac00 \uc788\ub2e4.<\/p>\n\n\n\nNote:<\/strong> \uc0c9\uc0c1 \uc9c0\uc815\uc744 \uc704\ud574 \uc77c\ubc18\uc801\uc778 ‘#dd0d3c’ \ud615\uc2dd\uc73c\ub85c \ubd80\ud130 \ubcc0\ud658\ud558\ub824\uba74 ‘#’\uc744 ‘0xff’, \uc989 Color(0xffdd0d3c)\ub85c \ubc14\uafb8\uc790. \uc5ec\uae30\uc11c ‘ff’\ub294 alpha\ucc44\ub110\uac12\uc774\uba70, \uc644\uc804\ud788 \ubd88\ud22c\uba85\ud568\uc744 \uc758\ubbf8\ud55c\ub2e4.<\/p><\/blockquote>\n\n\n\ntheme \ud328\ud0a4\uc9c0\uc5d0 \uc0c8 \ud30c\uc77c Color.kt<\/code>\uc744 \ub9cc\ub4e0\ub2e4. \uc774 \ud30c\uc77c\uc758 \ucd5c\uc0c1\uc704 \uacf5\uc6a9 \uc18d\uc131\uc73c\ub85c \ub2e4\uc74c \uc0c9\uc0c1\uc744 \ucd94\uac00\ud55c\ub2e4.<\/p>\n\n\n\nval Red700 = Color(0xffdd0d3c)
val Red800 = Color(0xffd00036)
val Red900 = Color(0xffc20029)<\/code><\/pre>\n\n\n\nNote :<\/strong> \uc0c9\uc0c1\uc744 \uc815\uc758 \ud560 \ub54c, \uc0c9\uc0c1\uc758 \uc774\ub984\uc744 “\uc758\ubbf8\ub860\uc801\uc778 \uac83\ubcf4\ub2e4” \uc0c9\uc0c1 \uac12\uc744 \uae30\uc900\uc73c\ub85c\ud55c \uc0c9\uc0c1 \uc774\ub984\uc744 <\/em>“\uadf8\ub300\ub85c” \uc0ac\uc6a9\ud558\uc5ec \uc774\ub984\uc744 \uc9d3\ub294\ub2e4. \uc608\ub97c\ub4e4\uc5b4 Red500<\/code>\uc774\ub77c\uace0 \uc9d3\uc9c0 primary<\/code>\ub77c\uace0 \uc9d3\uc9c0 \uc54a\ub294\ub2e4. \uc774\ub97c \ud1b5\ud574 \uc5ec\ub7ec \ud14c\ub9c8\ub97c \uc815\uc758\ud560 \uc218 \uc788\ub2e4. \uc608\ub97c \ub4e4\uc5b4 \ub2e4\ub978 \uc0c9\uc0c1\uc744 \ub2e4\ud06c\ud14c\ub9c8\uc758 primary<\/code>\ub85c \uc0ac\uc6a9\ud558\uac70\ub098 \ud654\uba74\uc0c1\uc5d0\uc11c \ub2e4\ub974\uac8c \uc2a4\ud0c0\uc77c\ub9c1 \ub420 \uc218 \uc788\ub2e4.<\/p><\/blockquote>\n\n\n\nNote:<\/strong> Compose\uc758 \uc0c9\uc0c1 \uc720\ud615\uc744 android.graphics.Color<\/code>\ub85c \uac00\uc838 \uc624\uc9c0 \uc54a\ub3c4\ub85d \uc8fc\uc758\ud558\uc790. <\/em>androidx.compose.ui.graphics.Color<\/code>\ub85c \uac00\uc838\uc640\uc57c\ud55c\ub2e4.<\/p><\/blockquote>\n\n\n\n\uc774\uc81c \uc571 \uc0c9\uc0c1\uc744 \uc815\uc758\ud588\uc73c\ubbc0\ub85c MaterialTheme\uc5d0 \ud544\uc694\ud55c Colors \uac1d\uccb4\ub85c \ud568\uaed8 \uac00\uc838\uc640\uc11c Material\uc758 \uba85\uba85\ub41c \uc0c9\uc0c1\uc5d0 \ud2b9\uc815 \uc0c9\uc0c1\uc744 \ud560\ub2f9\ud558\uc790. Theme.kt\ub85c \ub2e4\uc2dc \ub3cc\uc544\uc640 \ub2e4\uc74c\uc758 \ub0b4\uc6a9\uc744 \ucd94\uac00\ud558\uc790.<\/p>\n\n\n\n
private val LightColors = lightColors(
primary = Red700,
primaryVariant = Red900,
onPrimary = Color.White,
secondary = Red700,
secondaryVariant = Red900,
onSecondary = Color.White,
error = Red800
)<\/code><\/pre>\n\n\n\n\uc5ec\uae30\uc11c lightColors \ud568\uc218\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc0c9\uc0c1\uc744 \ub9cc\ub4e0\ub2e4. \uc774\ub294 \ud569\ub9ac\uc801\uc778 \uae30\ubcf8\uac12\uc744 \uc81c\uacf5\ud558\ubbc0\ub85c \uba38\ud2f0\ub9ac\uc5bc \uc0c9\uc0c1 \ud314\ub808\ud2b8\ub97c \uad6c\uc131\ud558\ub294 \ubaa8\ub4e0 \uc0c9\uc0c1\uc744 \uc9c0\uc815\ud560 \ud544\uc694\uac00 \uc5c6\ub2e4. \uc608\ub97c \ub4e4\uc5b4 \uc6b0\ub9ac\ub294 background \uc0c9\uc0c1\uc744 \uc9c0\uc815\ud558\uc9c0 \uc54a\uc558\uace0 \ub610\ub294 \ub9ce\uc740 ‘on’ \uc0c9\uc0c1\uc744 \uc9c0\uc815\ud558\uc9c0 \uc54a\uc558\ub2e4. \uc774 \uacbd\uc6b0 \uae30\ubcf8\uac12\uc744 \uc0ac\uc6a9\ud55c\ub2e4.<\/p>\n\n\n\n
Note<\/strong>: \ube0c\ub79c\ub4dc\uc5d0 \ubcc4\ub3c4\uc758 \uae30\ubcf8 \uc0c9\uc0c1(primary)\uacfc \ubcf4\uc870 \uc0c9\uc0c1(secondary)\uc774 \uc5c6\ub294 \uacbd\uc6b0 \ub458 \ub2e4 \ub3d9\uc77c\ud55c \uc0c9\uc0c1\uc744 \uc81c\uacf5\ud558\ub294 \uac83\uc774 \uc88b\ub2e4.<\/p><\/blockquote>\n\n\n\n\uc774\uc81c \uc571\uc5d0\uc11c \uc774 \uc0c9\uc0c1\uc744 \uc0ac\uc6a9\ud574 \ubcf4\uc790. JetnewsTheme<\/code> \ucef4\ud3ec\uc800\ube14\uc744 \uc5c5\ub370\uc774\ud2b8 \ud558\uc5ec \uc0c8\ub85c\uc6b4 Colors\ub97c \uc0ac\uc6a9\ud558\uc790.<\/p>\n\n\n\n@Composable
fun JetnewsTheme(content: @Composable () -> Unit) {
MaterialTheme(
+ colors = LightColors,
content = content
)
}<\/code><\/pre>\n\n\n\nHome.kt<\/code> \uc744 \uc5f4\uace0 \ubbf8\ub9ac\ubcf4\uae30\ub97c \uc0c8\ub85c\uace0\uce58\uc790. TopAppBar<\/code>\uc640 \uac19\uc740 \ucef4\ud3ec\ub10c\ud2b8\ub0b4\uc5d0\uc11c \ubc18\uc601\ub41c \uc0c8\ub85c\uc6b4 \uc0c9\uc0c1 \uc2a4\ud0b4\uc744 \ud655\uc778\ud558\uc790.<\/p>\n\n\n\n\ud0c0\uc774\ud3ec\uadf8\ub798\ud53c<\/h2>\n\n\n\n
\ub2e4\uc74c\uc740 \uc571\uc5d0\uc11c \uad6c\ud604\ud558\ub824\ub294 \uae00\uc790 \ud06c\uae30\ub2e4.<\/p>\n\n\n\n![\"985064b5f0dbd8bd.png\"\/](\"https:\/\/developer.android.com\/codelabs\/jetpack-compose-theming\/img\/985064b5f0dbd8bd.png?hl=ko\")
<\/figure>\n\n\n\nCompose\uc5d0\uc11c TextStyle<\/code><\/a>\uac1d\uccb4\ub97c \uc815\uc758\ud558\uc5ec, \uc77c\ubd80 \ud14d\uc2a4\ud2b8\uc758 \uc2a4\ud0c0\uc77c\uc744 \uc9c0\uc815\ud558\ub294 \ub370 \ud544\uc694\ud55c \uc815\ubcf4\ub97c \uc815\uc758 \ud560 \uc218 \uc788\ub2e4. TextStyle\uc758 \uc18d\uc131\ub4e4 \uc911 \uc77c\ubd80\ub4e4\uc744 \uc0b4\ud3b4\ubcf4\ub3c4\ub85d \ud558\uc790.<\/p>\n\n\n\ndata class TextStyle(
val color: Color = Color.Unset,
val fontSize: TextUnit = TextUnit.Inherit,
val fontWeight: FontWeight? = null,
val fontStyle: FontStyle? = null,
val fontFamily: FontFamily? = null,
val letterSpacing: TextUnit = TextUnit.Inherit,
val background: Color = Color.Unset,
val textAlign: TextAlign? = null,
val textDirection: TextDirection? = null,
val lineHeight: TextUnit = TextUnit.Inherit,
...
)<\/code><\/pre>\n\n\n\n\uc6b0\ub9ac\uac00 \uc6d0\ud558\ub294 \uc81c\ubaa9\uc6a9 \ud3f0\ud2b8\ub294 Montserrat<\/a>\ub97c \uc0ac\uc6a9\ud558\uace0 \ubcf8\ubb38\uc6a9 \ud14d\uc2a4\ud2b8\ub294 Domine<\/a> \uc744 \uc0ac\uc6a9\ud55c\ub2e4. \uad00\ub828 \ud3f0\ud2b8 \ud30c\uc77c\uc740 \uc774\ubbf8 \ud504\ub85c\uc81d\ud2b8 \ud3f4\ub354\uc5d0 res\/fonts<\/code>\uc5d0 \ucd94\uac00\ub418\uc5b4 \uc788\ub2e4.<\/p>\n\n\n\nNote:<\/strong> \ubd88\ud589\ud788\ub3c4 \ucef4\ud3ec\uc988\ub294 \ud604\uc7ac Android\uc758 Downloadable Fonts<\/a> \uae30\ub2a5\uc740 \uc9c0\uc6d0\ud558\uace0 \uc788\uc9c0 \uc54a\ub2e4.<\/p><\/blockquote>\n\n\n\n theme<\/code> \ud328\ud0a4\uc9c0\uc5d0 \uc0c8 \ud30c\uc77c Typography.kt<\/code>\uc744 \ub9cc\ub4e0\ub2e4. \uba3c\uc800 FontFamily<\/code><\/a>\ub4e4(\uac01 Font<\/code><\/a>\uc758 \uc11c\ub85c \ub2e4\ub978 \uac00\uc911\uce58\ub97c \uacb0\ud569\ud568)\uc744 \uc815\uc758\ud574\ubcf4\uc790.<\/p>\n\n\n\nprivate val Montserrat = FontFamily(
Font(R.font.montserrat_regular),
Font(R.font.montserrat_medium, FontWeight.W500),
Font(R.font.montserrat_semibold, FontWeight.W600)
)
private val Domine = FontFamily(
Font(R.font.domine_regular),
Font(R.font.domine_bold, FontWeight.Bold)
)<\/code><\/pre>\n\n\n\n\uc774\uc81c MaterialTheme\uc774 \ud5c8\uc6a9\ud558\ub294 Typography \uac1d\uccb4\ub97c \ub9cc\ub4e4\uace0, \ud06c\uae30\ubcc4\ub85c \uac01 \uc758\ubbf8\ub860\uc801\uc778 \uc2a4\ud0c0\uc77c\uc5d0 \ub300\ud574 TextStyles\ub97c \uc9c0\uc815\ud55c\ub2e4.<\/p>\n\n\n\n
val JetnewsTypography = Typography(
h4 = TextStyle(
fontFamily = Montserrat,
fontWeight = FontWeight.W600,
fontSize = 30.sp
),
h5 = TextStyle(
fontFamily = Montserrat,
fontWeight = FontWeight.W600,
fontSize = 24.sp
),
h6 = TextStyle(
fontFamily = Montserrat,
fontWeight = FontWeight.W600,
fontSize = 20.sp
),
subtitle1 = TextStyle(
fontFamily = Montserrat,
fontWeight = FontWeight.W600,
fontSize = 16.sp
),
subtitle2 = TextStyle(
fontFamily = Montserrat,
fontWeight = FontWeight.W500,
fontSize = 14.sp
),
body1 = TextStyle(
fontFamily = Domine,
fontWeight = FontWeight.Normal,
fontSize = 16.sp
),
body2 = TextStyle(
fontFamily = Montserrat,
fontSize = 14.sp
),
button = TextStyle(
fontFamily = Montserrat,
fontWeight = FontWeight.W500,
fontSize = 14.sp
),
caption = TextStyle(
fontFamily = Montserrat,
fontWeight = FontWeight.Normal,
fontSize = 12.sp
),
overline = TextStyle(
fontFamily = Montserrat,
fontWeight = FontWeight.W500,
fontSize = 12.sp
)
)<\/code><\/pre>\n\n\n\nTheme.kt\ub97c \uc5f4\uace0 JetnewsTheme \ucef4\ud3ec\uc800\ube14\uc744 \uc5c5\ub370\uc774\ud2b8\ud558\uc5ec \uc0c8\ub85c\uc6b4 Typography\ub97c \uc0ac\uc6a9\ud558\uc790.<\/p>\n\n\n\n
@Composable
fun JetnewsTheme(content: @Composable () -> Unit) {
MaterialTheme(
colors = LightColors,
+ typography = JetnewsTypography,
content = content
)
}<\/code><\/pre>\n\n\n\nHome.kt<\/code> \uc5f4\uace0 \ubbf8\ub9ac\ubcf4\uae30\ub97c \uc0c8\ub85c\uace0\uce68\ud558\uc5ec \uc0c8\ub85c\uc6b4 \ud0c0\uc774\ud3ec\uadf8\ub798\ud53c\uac00 \uc801\uc6a9\ub418\ub294\uc9c0 \ud655\uc778\ud558\uc790.<\/p>\n\n\n\n\ubaa8\uc591<\/h2>\n\n\n\n
\uc571\uc5d0\uc11c shape\uc744 \uc0ac\uc6a9\ud558\uc5ec \ube0c\ub79c\ub4dc\ub97c \ud45c\ud604\ud558\uace0 \uc2f6\ub2e4. \uc6b0\ub9ac\ub294 \uc5ec\ub7ec \uc694\uc18c\uc5d0 \ubaa8\uc11c\ub9ac\uac00 \uc798\ub9b0 \ubaa8\uc591\uc744 \uc0ac\uc6a9\ud558\ub824\uace0 \ud55c\ub2e4.<\/p>\n\n\n\n![\"ebcdf2fb3364f0d3.png\"\/](\"https:\/\/developer.android.com\/codelabs\/jetpack-compose-theming\/img\/ebcdf2fb3364f0d3.png?hl=ko\")
<\/figure>\n\n\n\n\ucef4\ud3ec\uc988\ub294 \ub2f9\uc2e0\uc774 \uc815\uc758\ud55c shape theme\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 RoundedCornerShape<\/code><\/a>\ubc0f CutCornerShape<\/code><\/a>\ud074\ub798\uc2a4\ub97c \uc81c\uacf5\ud55c\ub2e4.<\/p>\n\n\n\ntheme<\/code> \ud328\ud0a4\uc9c0\uc5d0 \uc0c8 \ud30c\uc77c Shape.kt<\/code>\uc744 \ub9cc\ub4e4\uace0 \ub2e4\uc74c\uc744 \ucd94\uac00\ud55c\ub2e4.<\/p>\n\n\n\nval JetnewsShapes = Shapes(
small = CutCornerShape(topStart = 8.dp),
medium = CutCornerShape(topStart = 24.dp),
large = RoundedCornerShape(8.dp)
)<\/code><\/pre>\n\n\n\nTheme.kt\ub97c \uc5f4\uace0 JetnewTheme \ucef4\ud3ec\uc800\ube14\uc744 \uc5c5\ub370\uc774\ud2b8\ud558\uc5ec Shapes\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub3c4\ub85d \ud55c\ub2e4.<\/p>\n\n\n\n
@Composable\nfun JetnewsTheme(content: @Composable () -> Unit) {\n MaterialTheme(\n colors = LightColors,\n typography = JetnewsTypography,\n+ shapes = JetnewsShapes,\n content = content\n )\n}<\/code><\/pre>\n\n\n\nHome.kt\ub97c \uc5f4\uace0 \ubbf8\ub9ac\ubcf4\uae30\ub97c \uc0c8\ub85c\uace0\uce68\ud558\uc5ec, \ucd94\ucc9c \uac8c\uc2dc\ubb3c\uc744 \ud45c\uc2dc\ud558\ub294 \uce74\ub4dc\uac00 \uc0c8\ub85c \uc801\uc6a9\ub41c \ubaa8\uc591 \ud14c\ub9c8\ub97c \uc5b4\ub5bb\uac8c \ubc18\uc601\ud558\ub294\uc9c0 \ud655\uc778\ud558\uc790.<\/p>\n\n\n\n
\ub2e4\ud06c \ud14c\ub9c8<\/h2>\n\n\n\n
\uc571\uc5d0\uc11c \ub2e4\ud06c \ud14c\ub9c8<\/a> \ub97c \uc9c0\uc6d0\ud558\uba74 \uc571\uc774 \uc0ac\uc6a9\uc790\uc758 \uae30\uae30(Android 10\ubd80\ud130 \uc804\uc5ed\uc801\uc73c\ub85c \uc801\uc6a9\ub418\ub294 \ub2e4\ud06c \ud14c\ub9c8 \ud1a0\uae00\uc774 \uc788\uc74c)\uc5d0 \ub354 \uc798 \ud1b5\ud569\ub420 \ubfd0\ub9cc \uc544\ub2c8\ub77c \uc804\ub825 \uc0ac\uc6a9\ub7c9\uc744 \uc904\uc774\uace0 \uc811\uadfc\uc131 \uc694\uad6c \uc0ac\ud56d\uc744 \uc9c0\uc6d0\ud560 \uc218 \uc788\ub2e4. Material\uc740 \ub2e4\ud06c \ud14c\ub9c8 \uc0dd\uc131\uc5d0 \ub300\ud55c \ub514\uc790\uc778 \uc9c0\uce68<\/a>\uc744 \uc81c\uacf5\ud55c\ub2e4. \ub2e4\uc74c\uc740 \ub2e4\ud06c \ud14c\ub9c8\uc5d0 \ub300\ud574 \uad6c\ud604\ud558\ub824\ub294 \ub300\uccb4 \uc0c9\uc0c1 \ud314\ub808\ud2b8\ub2e4.<\/p>\n\n\n\n![\"2523f19026837a19.png\"\/](\"https:\/\/developer.android.com\/codelabs\/jetpack-compose-theming\/img\/2523f19026837a19.png?hl=ko\")
<\/figure>\n\n\n\nColor.kt<\/code> \uc5f4\uace0, \ub2e4\uc74c \uc0c9\uc0c1\uc744 \ucd94\uac00\ud558\uc790.<\/p>\n\n\n\nval Red200 = Color(0xfff297a2)
val Red300 = Color(0xffea6d7e)<\/code><\/pre>\n\n\n\n\uc774\uc81c Theme.kt<\/code>\uc744 \uc5f4\uace0 \ub2e4\uc74c\uc744 \ucd94\uac00\ud558\uc790.<\/p>\n\n\n\nprivate val DarkColors = darkColors(
primary = Red300,
primaryVariant = Red700,
onPrimary = Color.Black,
secondary = Red300,
onSecondary = Color.Black,
error = Red200
)<\/code><\/pre>\n\n\n\n\uc774\uc81c JetnewsTheme<\/code>\uc744 \uc5c5\ub370\uc774\ud2b8 \ud558\uc790<\/p>\n\n\n\n@Composable
fun JetnewsTheme(
+ darkTheme: Boolean = isSystemInDarkTheme(),
content: @Composable () -> Unit
) {
MaterialTheme(
+ colors = if (darkTheme) DarkColors else LightColors,
typography = JetnewsTypography,
shapes = JetnewsShapes,
content = content
)
}<\/code><\/pre>\n\n\n\n\uc5ec\uae30\uc5d0 \ub2e4\ud06c \ud14c\ub9c8\ub97c \uc0ac\uc6a9\ud560\uc9c0 \uc5ec\ubd80\uc5d0 \ub300\ud55c \uc0c8 \ub9e4\uac1c\ubcc0\uc218\ub97c \ucd94\uac00\ud588\uc73c\uba70, \uae30\ubcf8\uc801\uc73c\ub85c \uae30\uae30\uc758 \ub2e4\ud06c\ud14c\ub9c8 \uc0c1\ud0dc\ub97c \ucffc\ub9ac\ud558\ub3c4\ub85d \uc124\uc815\ud588\ub2e4. \uc774\uac83\uc740 \uc6b0\ub9ac\uc5d0\uac8c \uc88b\uc740 \uae30\ubcf8\uac12\uc744 \uc81c\uacf5\ud558\uc9c0\ub9cc, \ud2b9\uc815 \ud654\uba74\uc774 \ud56d\uc0c1\/\uc808\ub300 \uc5b4\ub461\uc9c0 \uc54a\uac8c \ud558\uac70\ub098 \uc5b4\ub450\uc6b4 \ud14c\ub9c8 @Preview\ub97c \ub9cc\ub4e4\ub824\ub294 \uacbd\uc6b0 \uc5ec\uc804\ud788 \uc7ac\uc815\uc758 \ud558\uae30 \uc27d\ub2e4.<\/p>\n\n\n\n
Home.kt\ub97c \uc5f4\uace0 \uc5b4\ub450\uc6b4 \ud14c\ub9c8\ub85c \ud45c\uc2dc\ud558\ub294 FeaturedPost \ucef4\ud3ec\uc800\ube14\uc5d0 \ub300\ud55c \uc0c8\ub85c\uc6b4 \ubbf8\ub9ac \ubcf4\uae30\ub97c \ub9cc\ub4e4\uc790.<\/p>\n\n\n\n
@Preview(\"Featured Post \u2022 Dark\")
@Composable
private fun FeaturedPostDarkPreview() {
val post = remember { PostRepo.getFeaturedPost() }
JetnewsTheme(darkTheme = true) {
FeaturedPost(post = post)
}
}<\/code><\/pre>\n\n\n\n\ub2e4\ud06c \ud14c\ub9c8 \ubbf8\ub9ac\ubcf4\uae30\ub97c \ubcf4\ub824\uba74 \ubbf8\ub9ac\ubcf4\uae30 \ucc3d\uc744 \uc0c8\ub85c\uace0\uce68\ud558\uc790.<\/p>\n\n\n\n![\"84f93b209ce4fd46.png\"\/](\"https:\/\/developer.android.com\/codelabs\/jetpack-compose-theming\/img\/84f93b209ce4fd46.png?hl=ko\")
<\/figure>\n","protected":false},"excerpt":{"rendered":"\uba38\ud2f0\ub9ac\uc5bc \ud14c\ub9c8 Jetpack Compose\uc5d0\uc11c \ud14c\ub9c8\ub97c \uad6c\ud604\ud558\uae30 \uc704\ud55c \ud575\uc2ec \uc694\uc18c\ub294 MaterialTheme \ucef4\ud3ec\uc800\ube14 \ud568\uc218\ub2e4. \uc774 \ucef4\ud3ec\uc800\ube14\uc744 \ucef4\ud3ec\uc988 \uacc4\uce35\uc5d0 \ubc30\uce58\ud558\uba74 \uadf8 \uc548\uc758 \ubaa8\ub4e0 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \ub300\ud55c \uc0c9\uc0c1, \uc720\ud615 \ubc0f \ubaa8\uc591\uc5d0 \ub300\ud55c \ucee4\uc2a4\ud130\ub9c8\uc774\uc9d5\uc744 \ud560 \uc218 \uc788\ub2e4. \uc774 \ucef4\ud3ec\uc800\ube14\uc774 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc5d0\uc11c \uc815\uc758\ub418\ub294 \ubc29\ubc95\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4. \ub098\uc911\uc5d0 \uc0c9\uc0c1, \ud0c0\uc774\ud3ec\uadf8\ub798\ud53c \ubc0f \ubaa8\uc591 \uc18d\uc131\uc744 \ub178\ucd9c\ud558\ub294 MaterialTheme \uac1d\uccb4\ub97c \uc0ac\uc6a9\ud558\uc5ec, \uc774 \ucef4\ud3ec\uc800\ube14\uc5d0 \uc804\ub2ec\ub41c \ub9e4\uac1c\ubcc0\uc218\ub97c \uac1c\uc120\ud560 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[38],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45695"}],"collection":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=45695"}],"version-history":[{"count":2,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45695\/revisions"}],"predecessor-version":[{"id":45713,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45695\/revisions\/45713"}],"wp:attachment":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=45695"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=45695"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=45695"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}