{"id":45699,"date":"2021-11-19T19:43:44","date_gmt":"2021-11-19T10:43:44","guid":{"rendered":"https:\/\/www.charlezz.com\/?p=45699"},"modified":"2021-11-19T19:43:46","modified_gmt":"2021-11-19T10:43:46","slug":"jetpack-compose-theming-%ec%83%89%ec%83%81-%ec%9e%91%ec%97%85","status":"publish","type":"post","link":"https:\/\/charlezz.com\/?p=45699","title":{"rendered":"Jetpack Compose theming &#8211; \uc0c9\uc0c1 \uc791\uc5c5"},"content":{"rendered":"\n<p>\uc774\uc804 \ub2e8\uacc4\uc5d0\uc11c\ub294 \uc571\uc758 \uc0c9\uc0c1, \uc11c\uccb4 \uc2a4\ud0c0\uc77c \ubc0f \ubaa8\uc591\uc744 \uc124\uc815\ud558\uae30 \uc704\ud574 \uace0\uc720\ud55c \ud14c\ub9c8\ub97c \ub9cc\ub4dc\ub294 \ubc29\ubc95\uc744 \uc0b4\ud3b4\ubcf4\uc558\ub2e4. \ubaa8\ub4e0 Material \ucef4\ud3ec\ub10c\ud2b8\ub294 \uc774\ub7ec\ud55c \ucee4\uc2a4\ud130\ub9c8\uc774\uc9d5\uc744 \ucc3d\uc870\uc801\uc73c\ub85c \uc0ac\uc6a9\ud55c\ub2e4. \uc608\ub97c \ub4e4\uc5b4 FloatingActionButton \ucef4\ud3ec\uc800\ube14\uc740 \uae30\ubcf8\uc801\uc73c\ub85c \ud14c\ub9c8\uc758 \ubcf4\uc870(secondary) \uc0c9\uc0c1\uc744 \uc0ac\uc6a9\ud558\uc9c0\ub9cc, \uc774 \ub9e4\uac1c\ubcc0\uc218\uc5d0 \ub2e4\ub978 \uac12\uc744 \uc9c0\uc815\ud558\uc5ec \ub2e4\ub978 \uc0c9\uc0c1\uc744 \uc124\uc815\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@Composable<br>fun FloatingActionButton(<br>&nbsp; backgroundColor: Color = MaterialTheme.colors.secondary,<br>&nbsp; ...<br>) {<\/code><\/pre>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><strong>Note<\/strong>: \uba38\ud2f0\ub9ac\uc5bc \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub294 \ud14c\ub9c8 \uc0c9\uc0c1\uc744 \ud655\uc778\ud558\ub294 \uac83\uc740 \ucef4\ud3ec\ub10c\ud2b8\uc758 \uae30\ubcf8 \ub9e4\uac1c\ubcc0\uc218\ub85c \uc9c0\uc815\ub418\uae30 \ub54c\ubb38\uc5d0 View\uc640 \ube44\uad50\ud558\uba74 Compose\uc5d0\uc11c\ub294 \ud06c\uac8c \ub2e8\uc21c\ud558\ub2e4\uace0 \ubcfc \uc218 \uc788\ub2e4. <a href=\"https:\/\/www.jetbrains.com\/help\/idea\/navigating-through-the-source-code.html#go_to_declaration\">Component&#8217;s declaration<\/a>\uc73c\ub85c \uc774\ub3d9\ud558\uc5ec \uc774\ub97c \uc27d\uac8c \ud655\uc778\ud560 \uc218 \uc788\ub2e4.<\/p><\/blockquote>\n\n\n\n<p>\ud56d\uc0c1 \uae30\ubcf8 \uc124\uc815\uc744 \uc0ac\uc6a9\ud558\uace0 \uc2f6\uc9c0\ub294 \uc54a\uc744\uac83\uc774\ub2e4. \uc774 \uc139\uc158\uc5d0\uc11c\ub294 \uc571\uc5d0\uc11c \uc0c9\uc0c1 \uc791\uc5c5\ud558\ub294 \ubc29\ubc95\uc744 \ubcf4\uc5ec\uc900\ub2e4.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Raw \uc0c9\uc0c1<\/h2>\n\n\n\n<p>\uc55e\uc11c \ubcf4\uc558\ub4ef, \ucef4\ud3ec\uc988\ub294 Color \ud074\ub798\uc2a4\ub97c \uc81c\uacf5\ud55c\ub2e4. \uc774\uac83\ub4e4\uc744 \ub85c\uceec\ub85c \uc0dd\uc131\ud558\uace0 \uac1d\uccb4\ub4f1\uc5d0 \ubcf4\uad00\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Surface(color = Color.LightGray) {<br>&nbsp; Text(<br>&nbsp; &nbsp; text = \"Hard coded colors don't respond to theme changes :(\"<br>&nbsp; &nbsp; textColor = Color(0xffff00ff)<br>&nbsp; )<br>}<\/code><\/pre>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><strong>Note<\/strong>:\uc0c9\uc0c1 \uc815\uc758\ub97c \uc815\uc801\uc73c\ub85c \uc120\uc5b8\ud560 \ub54c\ub294 \ub77c\uc774\ud2b8\/\ub2e4\ud06c \ud14c\ub9c8\uc640 \uac19\uc740 \ub2e4\uc591\ud55c \ud14c\ub9c8\ub97c \uc9c0\uc6d0\ud558\ub294 \uac83\uc774 \ub354 \uc5b4\ub835\uac70\ub098 \ubd88\uac00\ub2a5\ud558\ubbc0\ub85c \uc8fc\uc758\ud558\uc790. \uadf8\ub7ec\ub098 \uc911\uc694\ud55c <a href=\"https:\/\/material.io\/design\/color\/dark-theme.html#ui-application\">\ube0c\ub79c\ub4dc \uc0c9\uc0c1<\/a>\uacfc \uac19\uc740 \ub77c\uc774\ud2b8\/\ub2e4\ud06c \ud14c\ub9c8\uc5d0\uc11c \ub3d9\uc77c\ud55c \uc0c9\uc0c1\uc744 \uc0ac\uc6a9\ud574\uc57c \ud558\ub294 \uc77c\ubd80 \uc0c1\ud669\uc5d0 \ub300\ud574\uc11c\ub294 <em><a href=\"https:\/\/material.io\/design\/color\/dark-theme.html#ui-application\">\uba38\ud2f0\ub9ac\uc5bc \uac00\uc774\ub4dc<\/a><\/em>\uc5d0\uc11c \uc124\uba85\ud574\uc8fc\uace0 \uc788\ub2e4.<\/p><\/blockquote>\n\n\n\n<p>Color\uc5d0\ub294 \ub2e4\ub978 \ud22c\uba85\ub3c4\/\ube68\uac04\uc0c9\/\ub179\uc0c9\/\ud30c\ub791\uc0c9 \uac12\uc73c\ub85c \uc0c8 \uc0c9\uc0c1\uc744 \uc0dd\uc131\ud560 \uc218 \uc788\ub294 copy\uc640 \uac19\uc740 \uc720\uc6a9\ud55c \uba54\uc11c\ub4dc\ub4e4\uc774 \uc788\ub2e4.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\ud14c\ub9c8 \uc0c9\uc0c1<\/h2>\n\n\n\n<p>\ubcf4\ub2e4 \uc720\uc5f0\ud55c \uc811\uadfc \ubc29\uc2dd\uc740 \ud14c\ub9c8\ub85c\ubd80\ud130 \uc0c9\uc0c1\uc744 \uac00\uc838\uc624\ub294 \uac83\uc774\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Surface(color = MaterialTheme.colors.primary)<\/code><\/pre>\n\n\n\n<p>\uc5ec\uae30\uc5d0\uc11c\ub294 colors \uc18d\uc131\uc774 MaterialTheme \uad6c\uc131 \uc694\uc18c\uc5d0 \uc124\uc815\ub41c Colors\ub97c \ubc18\ud658\ud558\ub294 MaterialTheme \uac1d\uccb4\ub97c \uc0ac\uc6a9\ud558\uace0 \uc788\ub2e4. \uc989, \ud14c\ub9c8\uc5d0 \ub2e4\uc591\ud55c \uceec\ub7ec\uc14b\uc744 \uc81c\uacf5\ud558\uae30\ub9cc \ud558\uba74, \ub2e4\uc591\ud55c \ubaa8\uc591\uacfc \ub290\ub08c\uc744 \uc9c0\uc6d0\ud560 \uc218 \uc788\uc73c\uba70, \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ucf54\ub4dc\ub97c \uac74\ub4dc\ub9b4 \ud544\uc694\uac00 \uc5c6\ub2e4. \uc608\ub97c \ub4e4\uc5b4 AppBar\ub294 \uae30\ubcf8(primary) \uc0c9\uc0c1\uc744 \uc0ac\uc6a9\ud558\uace0 \ud654\uba74 \ubc30\uacbd\uc740 surface\ub97c \uc0ac\uc6a9\ud55c\ub2e4. \ud14c\ub9c8 \uc0c9\uc0c1 \ubcc0\uacbd\uc740 \uc774\ub7ec\ud55c \ucef4\ud3ec\uc800\ube14\uc5d0 \ubc18\uc601\ub429\ub2c8\ub2e4.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/developer.android.com\/codelabs\/jetpack-compose-theming\/img\/e042098f0d035638.png?hl=ko\" alt=\"e042098f0d035638.png\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/developer.android.com\/codelabs\/jetpack-compose-theming\/img\/3dfb0d1134625efc.png?hl=ko\" alt=\"3dfb0d1134625efc.png\"\/><figcaption>\uc6b0\ub9ac \ud14c\ub9c8\uc758 \uac01 \uc0c9\uc0c1\uc740 Color \uc778\uc2a4\ud134\uc2a4\ub4e4\ub85c, \uc6b0\ub9ac\ub294 \ub610\ud55c \uc27d\uac8c copy \uba54\uc11c\ub4dc\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc0c9\uc0c1\uc744 \ud30c\uc0dd\uc2dc\ud0ac \uc218 \uc788\ub2e4.<\/figcaption><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>val derivedColor = MaterialTheme.colors.onSurface.copy(alpha = 0.1f)<\/code><\/pre>\n\n\n\n<p>\uc5ec\uae30\uc11c\ub294 \ubd88\ud22c\uba85\ub3c4\uac00 10%\uc778 onSurface \uc0c9\uc0c1\uc758 \ubcf5\uc0ac\ubcf8\uc744 \ub9cc\ub4e4\uace0 \uc788\ub2e4. \uc774 \uc811\uadfc \ubc29\uc2dd\uc740 \ud558\ub4dc \ucf54\ub529\ub41c \uc815\uc801\uc778 \uc0c9\uc0c1\uc774 \uc544\ub2cc \ub2e4\ub978 \ud14c\ub9c8\uc5d0\uc11c \uc0c9\uc0c1\uc774 \uc791\ub3d9\ud558\ub3c4\ub85d \ud55c\ub2e4.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Surface &amp; Content \uc0c9\uc0c1<\/h2>\n\n\n\n<p>\ub9ce\uc740 \ucef4\ud3ec\ub10c\ud2b8\ub4e4\uc774 color \ubc0f contentColors\ub97c \uc30d\uc73c\ub85c \uc218\uc6a9\ud55c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Surface(<br>&nbsp; color: Color = MaterialTheme.colors.surface,<br>&nbsp; contentColor: Color = contentColorFor(color),<br>&nbsp; ...<br><br>TopAppBar(<br>&nbsp; backgroundColor: Color = MaterialTheme.colors.primarySurface,<br>&nbsp; contentColor: Color = contentColorFor(backgroundColor),<br>&nbsp; ...<\/code><\/pre>\n\n\n\n<p>\uc774\ub97c \ud1b5\ud574 \ucef4\ud3ec\uc800\ube14\uc758 \uc0c9\uc0c1\uc744 \uc124\uc815\ud560 \uc218 \uc788\uc744 \ubfd0\ub9cc \uc544\ub2c8\ub77c &#8220;\ucf58\ud150\uce20&#8221;, \uc989 \uadf8 \uc548\uc5d0 \uc788\ub294 \ucef4\ud3ec\uc800\ube14\uc758 \uae30\ubcf8 \uc0c9\uc0c1\uc744 \uc81c\uacf5\ud560 \uc218 \uc788\ub2e4. \ub9ce\uc740 \ucef4\ud3ec\uc800\ube14\ub4e4\uc740 \uae30\ubcf8\uc801\uc73c\ub85c \uc774 \ucf58\ud150\uce20 \uc0c9\uc0c1\uc744 \uc0ac\uc6a9\ud55c\ub2e4(\uc608\ub97c\ub4e4\uba74  Text \uc0c9\uc0c1 \ub610\ub294 Icon tint). contentColorFor \uba54\uc18c\ub4dc\ub294 \ubaa8\ub4e0 \ud14c\ub9c8 \uc0c9\uc0c1\uc5d0 \ub300\ud574 \uc801\uc808\ud55c &#8220;on&#8221; \uc0c9\uc0c1\uc744 \uac00\uc838\uc628\ub2e4(\uc608\ub97c \ub4e4\uc5b4, primary \ubc30\uacbd\uc0c9\uc744 \uc9c0\uc815\ud558\uba74, onPrimary\ub97c content color\ub85c\uc368 \ubc18\ud658\ud55c\ub2e4.) \ud14c\ub9c8\uac00 \uc544\ub2cc \ubc30\uacbd\uc0c9\uc744 \uc124\uc815\ud588\ub2e4\uba74, \uac10\uac01\uc801\uc778 \ucf58\ud150\uce20 \uc0c9\uc0c1\uc744 \uc9c1\uc811 \uc81c\uacf5\ud574\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Surface(color = MaterialTheme.colors.primary) {<br>&nbsp; Text(...) \/\/ default text color is 'onPrimary'<br>}<br>Surface(color = MaterialTheme.colors.error) {<br>&nbsp; Icon(...) \/\/ default tint is 'onError'<br>}<\/code><\/pre>\n\n\n\n<p>LocalContentColor CompositionLocal\uc744 \uc0ac\uc6a9\ud558\uc5ec \ud604\uc7ac \ubc30\uacbd\uacfc \ub300\uc870\ub418\ub294 \uc0c9\uc0c1\uc744 \uac00\uc838\uc62c \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>BottomNavigationItem(<br>&nbsp; unselectedContentColor = LocalContentColor.current ...<\/code><\/pre>\n\n\n\n<p>\uc5b4\ub5a0\ud55c \uc694\uc18c\uc758 \uc0c9\uc0c1\uc744 \uc124\uc815\ud560 \ub54c, \uc801\uc808\ud55c \ucf58\ud150\uce20 \uc0c9\uc0c1 CompositionLocal \uac12\uc744 \uc124\uc815\ud558\ubbc0\ub85c Surface\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc774 \uc791\uc5c5\uc744 \uc218\ud589\ud558\ub294 \uac83\uc774 \uc88b\ub2e4. \uc801\uc808\ud55c \ucf58\ud150\uce20 \uc0c9\uc0c1\uc744 \uc124\uc815\ud558\uc9c0 \uc54a\ub294 \ubc29\uc2dd\uc778, Modifier.background\ub97c \uc9c1\uc811 \ud638\ucd9c\ud558\ub294 \uac83\uc5d0 \uc720\uc758\ud558\uc790.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>-Row(Modifier.background(MaterialTheme.colors.primary)) {<br>+Surface(color = MaterialTheme.colors.primary) {<br>+ &nbsp;Row(<br>...<\/code><\/pre>\n\n\n\n<p>\ud604\uc7ac Header \ucef4\ud3ec\ub10c\ud2b8\uc5d0\ub294 \ud56d\uc0c1 Color.LightGray \ubc30\uacbd\uc744 \uac16\uace0 \uc788\ub2e4. \uc774\uac83\uc740 \ub77c\uc774\ud2b8(\ubc1d\uc740) \ud14c\ub9c8\uc5d0\uc11c \uad1c\ucc2e\uc544 \ubcf4\uc774\uc9c0\ub9cc, \ub2e4\ud06c(\uc5b4\ub450\uc6b4) \ud14c\ub9c8\uc758 \ubc30\uacbd\uacfc \ub192\uc740 \ub300\ube44\ub97c \ubcf4\uc778\ub2e4. \ub610\ud55c \ud2b9\uc815 \ud14d\uc2a4\ud2b8 \uc0c9\uc0c1\uc744 \uc9c0\uc815\ud558\uc9c0 \uc54a\uc73c\ubbc0\ub85c, \ubc30\uacbd\uacfc \ub300\uc870\ub418\uc9c0 \uc54a\uc744 \uc218 \uc788\ub294 \ud604\uc7ac \ucf58\ud150\uce20 \uc0c9\uc0c1\uc744 \uc0c1\uc18d\ud55c\ub2e4.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/developer.android.com\/codelabs\/jetpack-compose-theming\/img\/f80956b5e213d88e.png?hl=ko\" alt=\"f80956b5e213d88e.png\"\/><\/figure>\n\n\n\n<p>Home.kt\uc5d0 \uc788\ub294 Header \ucef4\ud3ec\uc800\ube14\uc5d0\uc11c \uc774 \ubd80\ubd84\uc744 \uc218\uc815\ud558\ub3c4\ub85d \ud558\uc790. \ud558\ub4dc\ucf54\ub529\ub41c \uc9c0\uc815\ud55c \uc0c9\uc0c1\uc758 background Modifier\ub97c \uc81c\uac70\ud55c\ub2e4. \ub300\uc2e0\uc5d0 Surface\ub85c Text\ub97c \uac10\uc2f8, \ud14c\ub9c8\uac00 \uc81c\uacf5\ud558\ub294 \uc0c9\uc0c1 \ubc0f primar\uc5d0 \uc815\uc758\ub41c \ucf58\ud150\uce20 \uc0c9\uc0c1\uc744 \uc0ac\uc6a9\ud558\ub3c4\ub85d \ud55c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>+ Surface(<br>+ &nbsp; color = MaterialTheme.colors.onSurface.copy(alpha = 0.1f),<br>+ &nbsp; contentColor = MaterialTheme.colors.primary,<br>+ &nbsp; modifier = modifier<br>+ ) {<br>&nbsp; Text(<br>&nbsp; &nbsp; text = text,<br>&nbsp; &nbsp; modifier = Modifier<br>&nbsp; &nbsp; &nbsp; .fillMaxWidth()<br>- &nbsp; &nbsp; .background(Color.LightGray)<br>&nbsp; &nbsp; &nbsp; .padding(horizontal = 16.dp, vertical = 8.dp)<br>&nbsp; )<br>+ }<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Content Alpha<\/h2>\n\n\n\n<p>\ub54c\ub54c\ub85c \uc6b0\ub9ac\ub294 \ub0b4\uc6a9\uc744 \uac15\uc870\ud558\uac70\ub098 \ub610\ub294 \uac15\uc870\ud558\uc9c0 \uc54a\ub294 \ubc29\ubc95\uc744 \ud1b5\ud574 \uc5b4\ub5a0\ud55c \uc911\uc694\uc131\uc744 \uc804\ub2ec\ud558\uace0, \uc2dc\uac01\uc801\uc778 \uacc4\uce35 \uad6c\uc870\ub97c \uc81c\uacf5\ud55c\ub2e4. \uba38\ud2f0\ub9ac\uc5bc \ub514\uc790\uc778\uc740 \uc774\ub7ec\ud55c \ub2e4\uc591\ud55c \uc911\uc694\ub3c4 \uc218\uc900\uc744 \uc804\ub2ec\ud558\uae30 \uc704\ud574 \ub2e4\uc591\ud55c \ubd88\ud22c\uba85\ub3c4 \ub808\ubca8\uc744 \uc0ac\uc6a9\ud558\uae30\ub97c \uad8c\uc7a5\ud558\uace0 \uc788\ub2e4.<\/p>\n\n\n\n<p>Jetpack Compose\ub294 \uc774\ub97c LocalContentAlpha\ub77c\ub294 \uac83\uc744 \ud1b5\ud574 \uad6c\ud604\ud55c\ub2e4. CompositionLocal\uc5d0 \ub300\ud55c \uac12\uc744 \uc81c\uacf5\ud558\uc5ec \uacc4\uce35\uc5d0 \ub300\ud55c \ucf58\ud150\uce20 \ud22c\uba85\ub3c4\ub97c \uc9c0\uc815\ud560 \uc218 \uc788\ub2e4. \ud558\uc704 \ucef4\ud3ec\uc800\ube14\ub4e4\uc740 \uc774 \uac12\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4. \uc608\ub97c \ub4e4\uba74 \uae30\ubcf8\uc801\uc778 Text \ubc0f Icon\uc740 \uc870\uc815\ub41c LocalContentColor\uc758 \uc870\ud569\uc744 \uc0ac\uc6a9\ud558\uc5ec LocalContentAlpha\ub97c \uc0ac\uc6a9\ud55c\ub2e4. \uba38\ud2f0\ub9ac\uc5bc \uba87\uac00\uc9c0 \ud45c\uc900 \ud22c\uba85\ub3c4 \uac12\uc744 \uc815\uc758\ud558\uace0 \uc788\ub2e4(high, medium, disabled). \uc774\uac83\ub4e4\uc740 ContentAlpha \uac1d\uccb4\uc5d0 \ubaa8\ub378\ub9c1 \ub418\uc5b4\uc788\ub2e4. MaterialTheme\uc774 \uae30\ubcf8\uc801\uc73c\ub85c LocalContentAlpha\uc758 ContentAlpha.high\ub97c \uc0ac\uc6a9\ud55c\ub2e4\ub294 \uac83\uc744 \uc54c\uc544\ub450\uc790.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ \uae30\ubcf8\uc801\uc73c\ub85c Icon &amp; Text \ub458\ub2e4 LocalContentColor &amp; LocalContentAlpha \uc870\ud569\uc744 \uc0ac\uc6a9\ud55c\ub2e4.\n\/\/ \ucf58\ud150\ud2b8 \ud22c\uba85\ub3c4\ub97c \ub2e4\ub974\uac8c \ud558\uc5ec \ucf58\ud150\ud2b8\ub97c \uac15\uc870\uc2dc\ud0a4\uc9c0 \uc54a\ub3c4\ub85d \ud55c\ub2e4.\nCompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {\n&nbsp; &nbsp; Text(...)\n}\nCompositionLocalProvider(LocalContentAlpha provides ContentAlpha.disabled) {\n&nbsp; &nbsp; Icon(...)\n&nbsp; &nbsp; Text(...)\n}<\/code><\/pre>\n\n\n\n<p>\uc774\ub97c \ud1b5\ud574 \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc911\uc694\uc131\uc744 \uc27d\uace0 \uc77c\uad00\ub418\uac8c \uc804\ub2ec\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<p>\ucd94\ucc9c \uac8c\uc2dc\ubb3c(featured post)\uc758 \uc815\ubcf4 \uacc4\uce35 \uad6c\uc870\ub97c \uba85\ud655\ud788 \ud558\uae30 \uc704\ud574 \ucf58\ud150\uce20 \uc54c\ud30c\ub97c \uc0ac\uc6a9\ud560 \uac83\uc774\ub2e4. Home.kt\uc758 PostMetadata \ucef4\ud3ec\uc800\ube14\uc5d0\uc11c \uba54\ud0c0\ub370\uc774\ud130 midium\uc744 \uac15\uc870\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>+ CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {<br>&nbsp; Text(<br>&nbsp; &nbsp; text = text,<br>&nbsp; &nbsp; modifier = modifier<br>&nbsp; )<br>+ }<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/developer.android.com\/codelabs\/jetpack-compose-theming\/img\/5f24fbfac3932c26.png?hl=ko\" alt=\"5f24fbfac3932c26.png\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">\ub2e4\ud06c \ud14c\ub9c8<\/h2>\n\n\n\n<p>\uc6b0\ub9ac\uac00 \ubcf4\uc558\ub4ef\uc774 \ucef4\ud3ec\uc988\uc5d0\uc11c \ub2e4\ud06c \ud14c\ub9c8\ub97c \uad6c\ud604\ud558\ub824\uba74, \ud14c\ub9c8\ub97c \ud1b5\ud574 \ub2e4\uc591\ud55c \uc0c9\uc0c1 \uc138\ud2b8\uc640 \ucffc\ub9ac \uc0c9\uc0c1\uc744 \uc81c\uacf5\ud558\uae30\ub9cc \ud558\uba74 \ub41c\ub2e4. \uba87 \uac00\uc9c0 \uc608\uc678\uc0ac\ud56d\uc774 \uc788\ub2e4.<\/p>\n\n\n\n<p>\ub2e4\uc74c\uacfc \uac19\uc774 \ub77c\uc774\ud2b8 \ud14c\ub9c8\uc5d0\uc11c \uc2e4\ud589\uc911\uc778\uc9c0 \ud655\uc778\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>val isLightTheme = MaterialTheme.colors.isLight<\/code><\/pre>\n\n\n\n<p>\uc774 \uac12\uc740 lightColors \/ darkColors \ube4c\ub354 \ud568\uc218\uc5d0 \uc758\ud574 \uc124\uc815\ub41c\ub2e4.<\/p>\n\n\n\n<p>\uba38\ud2f0\ub9ac\uc5bc\uc5d0 \ub2e4\ud06c\ud14c\ub9c8\uc5d0\uc11c \ub192\uc740 elevation\uc744 \uac16\ub294 surface\ub294 <a href=\"https:\/\/material.io\/design\/color\/dark-theme.html#properties\">elevation overlays<\/a>\uc5d0 \uc601\ud5a5\uc744 \ubc1b\ub294\ub2e4(\ubc30\uacbd\uc774 \ubc1d\uc544\uc9d0). \uc774\ub294 \ub2e4\ud06c \uceec\ub7ec \ud314\ub808\ud2b8\ub97c \uc0ac\uc6a9\ud560 \ub54c \uc790\ub3d9\uc73c\ub85c \uad6c\ud604\ub41c\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Surface(<br>&nbsp; elevation = 2.dp,<br>&nbsp; color = MaterialTheme.colors.surface, \/\/ color will be adjusted for elevation<br>&nbsp; ...<\/code><\/pre>\n\n\n\n<p>\uc6b0\ub9ac\ub294 TopAppBar\uc640 Card \ucef4\ud3ec\ub10c\ud2b8 \uc0ac\uc6a9\ud558\uace0 \uc788\ub294 \uc6b0\ub9ac \uc571\uc5d0\uc11c \uc774\ub7ec\ud55c \uac83\ub4e4\uc774 \uc790\ub3d9\uc73c\ub85c \ub3d9\uc791\ud558\ub294 \uac83\uc744 \ubcfc \uc218 \uc788\ub2e4. \uae30\ubcf8\uc801\uc73c\ub85c 4dp \ubc0f 1dp elevation\uc774 \uc788\uc73c\ubbc0\ub85c \uc774 elevation\uc744 \ub354 \uc798 \uc804\ub2ec\ud558\uae30 \uc704\ud574 \ubc30\uacbd\uc774 \ub2e4\ud06c \ud14c\ub9c8\uc5d0\uc11c \uc790\ub3d9\uc73c\ub85c \ubc1d\uc544\uc9c4\ub2e4.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" loading=\"lazy\" width=\"1024\" height=\"743\" src=\"https:\/\/www.charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-jetpack-compose-theming-cd3869170d47055e-1024x743.png\" alt=\"\" class=\"wp-image-45700\" srcset=\"https:\/\/charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-jetpack-compose-theming-cd3869170d47055e-1024x743.png 1024w, https:\/\/charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-jetpack-compose-theming-cd3869170d47055e-300x218.png 300w, https:\/\/charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-jetpack-compose-theming-cd3869170d47055e-768x558.png 768w, https:\/\/charlezz.com\/wordpress\/wp-content\/uploads\/2021\/11\/www.charlezz.com-jetpack-compose-theming-cd3869170d47055e.png 1080w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\uba38\ud2f0\ub9ac\uc5bc \ub514\uc790\uc778\uc740 \ub2e4\ud06c \ud14c\ub9c8\uc5d0\uc11c \ubc1d\uc740 \uc0c9\uc0c1\uc758 \ub113\uc740 \uc601\uc5ed\uc744 \uad6c\uc131\ud558\ub294 \uac83\uc740 \ud53c\ud558\ub294 \uac83\uc774 \uc88b\ub2e4. \uc77c\ubc18\uc801\uc778 \ud328\ud134\uc740 \ub77c\uc774\ud2b8 \ud14c\ub9c8\uc758 container primary \uc0c9\uc0c1\uacfc \ub2e4\ud06c \ud14c\ub9c8\uc758 surface \uc0c9\uc0c1\uc744 \uc9c0\uc815\ud558\ub294 \uac83\uc774\ub2e4. \ub9ce\uc740 \ucef4\ud3ec\ub10c\ud2b8\uac00 \uae30\ubcf8\uc801\uc73c\ub85c \uc774\ub7ec\ud55c \uc804\ub7b5\uc744 \uc0ac\uc6a9\ud55c\ub2e4. \uc608\ub97c\ub4e4\uc5b4 App Bar \ubc0f Bottom Navigation\uc774 \uc788\ub2e4. \uc774\ub97c \uc27d\uac8c \uad6c\ud604\ud558\uae30 \ud558\uae30 \uc704\ud574 Colors\ub294 \uc815\ud655\ud788 \uc774 \ub3d9\uc791\uc744 \uc81c\uacf5\ud558\ub294 primarySurface \uc0c9\uc0c1\uc744 \uc81c\uacf5\ud558\uba70, \uc774\ub7ec\ud55c \ucef4\ud3ec\ub10c\ud2b8\ub4e4\uc740 \uae30\ubcf8\uc73c\ub85c \uc0ac\uc6a9\ud55c\ub2e4.<\/p>\n\n\n\n<p>\uc6b0\ub9ac \uc571\uc740 \ud604\uc7ac AppBar\ub97c \uae30\ubcf8 \uc0c9\uc0c1\uc73c\ub85c \uc124\uc815\ud558\uace0 \uc788\ub2e4. \uc774 \uc9c0\uce68\uc5d0 \ub530\ub77c \uc774\ub97c primarySurface\ub85c \uc804\ud658\ud558\uac70\ub098 \uae30\ubcf8\uac12\uc778 \uc774 \ub9e4\uac1c\ubcc0\uc218\ub97c \uc81c\uac70\ud558\uba74 \ub41c\ub2e4. AppBar \ucef4\ud3ec\uc800\ube14\uc5d0\uc11c TopAppBar\uc758 backgroundColor \ub9e4\uac1c\ubcc0\uc218\ub97c \ubcc0\uacbd\ud558\uc790.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>@Composable<br>private fun AppBar() {<br>&nbsp; TopAppBar(<br>&nbsp; &nbsp; ...<br>- &nbsp; backgroundColor = MaterialTheme.colors.primary<br>+ &nbsp; backgroundColor = MaterialTheme.colors.primarySurface<br>&nbsp; )<br>}<\/code><\/pre>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\uc774\uc804 \ub2e8\uacc4\uc5d0\uc11c\ub294 \uc571\uc758 \uc0c9\uc0c1, \uc11c\uccb4 \uc2a4\ud0c0\uc77c \ubc0f \ubaa8\uc591\uc744 \uc124\uc815\ud558\uae30 \uc704\ud574 \uace0\uc720\ud55c \ud14c\ub9c8\ub97c \ub9cc\ub4dc\ub294 \ubc29\ubc95\uc744 \uc0b4\ud3b4\ubcf4\uc558\ub2e4. \ubaa8\ub4e0 Material \ucef4\ud3ec\ub10c\ud2b8\ub294 \uc774\ub7ec\ud55c \ucee4\uc2a4\ud130\ub9c8\uc774\uc9d5\uc744 \ucc3d\uc870\uc801\uc73c\ub85c \uc0ac\uc6a9\ud55c\ub2e4. \uc608\ub97c \ub4e4\uc5b4 FloatingActionButton \ucef4\ud3ec\uc800\ube14\uc740 \uae30\ubcf8\uc801\uc73c\ub85c \ud14c\ub9c8\uc758 \ubcf4\uc870(secondary) \uc0c9\uc0c1\uc744 \uc0ac\uc6a9\ud558\uc9c0\ub9cc, \uc774 \ub9e4\uac1c\ubcc0\uc218\uc5d0 \ub2e4\ub978 \uac12\uc744 \uc9c0\uc815\ud558\uc5ec \ub2e4\ub978 \uc0c9\uc0c1\uc744 \uc124\uc815\ud560 \uc218 \uc788\ub2e4. Note: \uba38\ud2f0\ub9ac\uc5bc \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \uc0ac\uc6a9\ud558\ub294 \ud14c\ub9c8 \uc0c9\uc0c1\uc744 \ud655\uc778\ud558\ub294 \uac83\uc740 \ucef4\ud3ec\ub10c\ud2b8\uc758 [&hellip;]<\/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\/45699"}],"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=45699"}],"version-history":[{"count":2,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45699\/revisions"}],"predecessor-version":[{"id":45714,"href":"https:\/\/charlezz.com\/index.php?rest_route=\/wp\/v2\/posts\/45699\/revisions\/45714"}],"wp:attachment":[{"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=45699"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=45699"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/charlezz.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=45699"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}