{"id":836,"date":"2023-10-31T18:05:25","date_gmt":"2023-10-31T15:05:25","guid":{"rendered":"https:\/\/barisuslucan.com\/en\/?p=836"},"modified":"2023-10-31T18:05:26","modified_gmt":"2023-10-31T15:05:26","slug":"color-schemes-in-material-design-3-for-jetpack-compose","status":"publish","type":"post","link":"https:\/\/barisuslucan.com\/en\/kotlin\/color-schemes-in-material-design-3-for-jetpack-compose\/","title":{"rendered":"Color Schemes in Material Design 3 for Jetpack Compose"},"content":{"rendered":"

Material Design 3 represents the most recent iteration of Google’s Material Design, which serves as a comprehensive user interface design system employed in Android and various other Google products. Material Design 3 introduces fresh color schemes, typography, and shapes to enhance the visual appeal and overall dynamic nature of the design.<\/p>\n

In this article, we will discuss color schemes for a Material Design 3 Jetpack Compose project.<\/p>\n

In Jetpack Compose, there are three files located within the theme folder. These are \u201cColor.kt<\/strong>\u201d, \u201cTheme.kt<\/strong>\u201d, and \u201cType.kt<\/strong>\u201d, respectively. In the Color file, you can set your colors. In the Theme file, you can set the main theme of the application. In the Type file, you can set your text styles and fonts.<\/p>\n

\u00a0<\/p>\n\n\n

<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
@Composable<\/span><\/span>\nfun<\/span> <\/span>TestTheme<\/span>(<\/span><\/span>\n    darkTheme: Boolean <\/span>=<\/span> <\/span>isSystemInDarkTheme<\/span>(),<\/span><\/span>\n    <\/span>\/\/ Dynamic color is available on Android 12+<\/span><\/span>\n    dynamicColor: Boolean <\/span>=<\/span> <\/span>false<\/span>,<\/span><\/span>\n    content: @Composable () <\/span>-><\/span> Unit<\/span><\/span>\n) {<\/span><\/span>\n    <\/span>val<\/span> colorScheme <\/span>=<\/span> <\/span>when<\/span> {<\/span><\/span>\n        dynamicColor <\/span>&&<\/span> Build.VERSION.SDK_INT <\/span>>=<\/span> Build.VERSION_CODES.S <\/span>-><\/span> {<\/span><\/span>\n            <\/span>val<\/span> context <\/span>=<\/span> LocalContext.current<\/span><\/span>\n            <\/span>if<\/span> (darkTheme) <\/span>dynamicDarkColorScheme<\/span>(context) <\/span>else<\/span> <\/span>dynamicLightColorScheme<\/span>(context)<\/span><\/span>\n        }<\/span><\/span>\n<\/span>\n        darkTheme <\/span>-><\/span> DarkColorScheme<\/span><\/span>\n        <\/span>else<\/span> <\/span>-><\/span> LightColorScheme<\/span><\/span>\n    }<\/span><\/span>\n    <\/span>val<\/span> view <\/span>=<\/span> LocalView.current<\/span><\/span>\n    <\/span>if<\/span> (<\/span>!<\/span>view.isInEditMode) {<\/span><\/span>\n        <\/span>SideEffect<\/span> {<\/span><\/span>\n            <\/span>val<\/span> window <\/span>=<\/span> (view.context <\/span>as<\/span> Activity).window<\/span><\/span>\n            window.statusBarColor <\/span>=<\/span> colorScheme.primary.<\/span>toArgb<\/span>()<\/span><\/span>\n            WindowCompat.<\/span>getInsetsController<\/span>(window, view).isAppearanceLightStatusBars <\/span>=<\/span> darkTheme<\/span><\/span>\n        }<\/span><\/span>\n    }<\/span><\/span>\n<\/span>\n    <\/span>MaterialTheme<\/span>(<\/span><\/span>\n        colorScheme <\/span>=<\/span> colorScheme,<\/span><\/span>\n        typography <\/span>=<\/span> Typography,<\/span><\/span>\n        content <\/span>=<\/span> content<\/span><\/span>\n    )<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n

In Jetpack Compose, you can no longer directly modify the style (theme configuration) that you define for an activity and in the AndroidManifest file. Jetpack Compose includes the above theme file codes by default. Here, it generates colors with artificial intelligence based on the colors you define with dynamic color. For example, unless you change it, your navigation bar\u2019s color will change by creating a new color based on the primary color you defined. Here, if you wish, you can disable dynamicColor by setting it to false. Additionally, if you want your theme to be only a dark or light theme, you can easily edit it from this file. In color schemes, there are many color types:<\/p>\n
\u2022 primary:<\/strong> The main color of your application.
\u2022 onPrimary:<\/strong> The color of text and other elements placed on the primary color.
\u2022 primaryContainer:<\/strong> A color that contrasts with the primary color.
\u2022 onPrimaryContainer:<\/strong> The color of text and other elements placed on the primaryContainer color.
\u2022 inversePrimary:<\/strong> The inverse of the primary color.secondary: The secondary color of your application.
\u2022 onSecondary:<\/strong> The color of text and other elements placed on the secondary color.
\u2022 secondaryContainer:<\/strong> A color that contrasts with the secondary color.
\u2022 onSecondaryContainer:<\/strong> The color of text and other elements placed on the secondaryContainer color.
\u2022 tertiary:<\/strong> The tertiary color of your application.
\u2022 onTertiary:<\/strong> The color of text and other elements placed on the tertiary color.
\u2022 tertiaryContainer:<\/strong> A color that contrasts with the tertiary color.
\u2022 onTertiaryContainer:<\/strong> The color of text and other elements placed on the tertiaryContainer color.
\u2022 background:<\/strong> The background color of your application.
\u2022 onBackground:<\/strong> The color of text and other elements placed on the background color.
\u2022 surface:<\/strong> The surface color of your application.
\u2022 onSurface:<\/strong> The color of text and other elements placed on the surface color.
\u2022 surfaceVariant:<\/strong> A variant of the surface color.
\u2022 onSurfaceVariant:<\/strong> The color of text and other elements placed on the surfaceVariant color.
\u2022 surfaceTint:<\/strong> A tint that can be applied to the surface color.
\u2022 inverseSurface:<\/strong> The inverse of the surface color.
\u2022 inverseOnSurface:<\/strong> The color of text and other elements placed on the inverseSurface color.
\u2022 error:<\/strong> The color used for error messages.
\u2022 onError:<\/strong> The color of text and other elements placed on the error color.
\u2022 errorContainer:<\/strong> A color that contrasts with the error color.
\u2022 onErrorContainer:<\/strong> The color of text and other elements placed on the errorContainer color.
\u2022 outline:<\/strong> The color used for outlines.
\u2022 outlineVariant:<\/strong> A variant of the outline color.
\u2022 scrim:<\/strong> A color used to darken background elements.<\/p>\n
\n
\n
\n
\n
Thanks to the above color types we can easily integrate both dark and light themes into our application. For example, let\u2019s define sample colors in the Color.kt file.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
val<\/span> primaryLight <\/span>=<\/span> <\/span>Color<\/span>(<\/span>0xFF007ACC<\/span>)<\/span><\/span>\nval<\/span> onPrimaryLight <\/span>=<\/span> <\/span>Color<\/span>(<\/span>0xFFFFFFFF<\/span>)<\/span><\/span>\nval<\/span> secondaryLight <\/span>=<\/span> <\/span>Color<\/span>(<\/span>0xFF4CAF50<\/span>)<\/span><\/span>\nval<\/span> onSecondaryLight <\/span>=<\/span> <\/span>Color<\/span>(<\/span>0xFFFFFFFF<\/span>)<\/span><\/span>\nval<\/span> tertiaryLight <\/span>=<\/span> <\/span>Color<\/span>(<\/span>0xFFFFC107<\/span>)<\/span><\/span>\nval<\/span> onTertiaryLight <\/span>=<\/span> <\/span>Color<\/span>(<\/span>0xFF000000<\/span>)<\/span><\/span>\nval<\/span> backgroundLight <\/span>=<\/span> <\/span>Color<\/span>(<\/span>0xFFF5F5F5<\/span>)<\/span><\/span>\nval<\/span> onBackgroundLight <\/span>=<\/span> <\/span>Color<\/span>(<\/span>0xFF000000<\/span>)<\/span><\/span>\nval<\/span> surfaceLight <\/span>=<\/span> <\/span>Color<\/span>(<\/span>0xFFFFFFFF<\/span>)<\/span><\/span>\nval<\/span> onSurfaceLight <\/span>=<\/span> <\/span>Color<\/span>(<\/span>0xFF000000<\/span>)<\/span><\/span>\nval<\/span> errorLight <\/span>=<\/span> <\/span>Color<\/span>(<\/span>0xFFFF0000<\/span>)<\/span><\/span>\nval<\/span> onErrorLight <\/span>=<\/span> <\/span>Color<\/span>(<\/span>0xFFFFFFFF<\/span>)<\/span><\/span>\nval<\/span> errorContainerLight <\/span>=<\/span> <\/span>Color<\/span>(<\/span>0xFF6200EA<\/span>)<\/span><\/span>\nval<\/span> onErrorContainerLight <\/span>=<\/span> <\/span>Color<\/span>(<\/span>0xFFFFFFFF<\/span>)<\/span><\/span>\nval<\/span> outlineLight <\/span>=<\/span> <\/span>Color<\/span>(<\/span>0xFF9E9E9E<\/span>)<\/span><\/span>\nval<\/span> outlineVariantLight <\/span>=<\/span> <\/span>Color<\/span>(<\/span>0xFFBDBDBD<\/span>)<\/span><\/span>\nval<\/span> scrimLight <\/span>=<\/span> <\/span>Color<\/span>(<\/span>0xFF000000<\/span>)<\/span><\/span>\n<\/span>\nval<\/span> primaryDark <\/span>=<\/span> <\/span>Color<\/span>(<\/span>0xFF2962FF<\/span>)<\/span><\/span>\nval<\/span> onPrimaryDark <\/span>=<\/span> <\/span>Color<\/span>(<\/span>0xFFFFFFFF<\/span>)<\/span><\/span>\nval<\/span> secondaryDark <\/span>=<\/span> <\/span>Color<\/span>(<\/span>0xFF8BC34A<\/span>)<\/span><\/span>\nval<\/span> onSecondaryDark <\/span>=<\/span> <\/span>Color<\/span>(<\/span>0xFFFFFFFF<\/span>)<\/span><\/span>\nval<\/span> tertiaryDark <\/span>=<\/span> <\/span>Color<\/span>(<\/span>0xFFE91E63<\/span>)<\/span><\/span>\nval<\/span> onTertiaryDark <\/span>=<\/span> <\/span>Color<\/span>(<\/span>0xFF000000<\/span>)<\/span><\/span>\nval<\/span> backgroundDark <\/span>=<\/span> <\/span>Color<\/span>(<\/span>0xFF121212<\/span>)<\/span><\/span>\nval<\/span> onBackgroundDark <\/span>=<\/span> <\/span>Color<\/span>(<\/span>0xFFFFFFFF<\/span>)<\/span><\/span>\nval<\/span> surfaceDark <\/span>=<\/span> <\/span>Color<\/span>(<\/span>0xFF262626<\/span>)<\/span><\/span>\nval<\/span> onSurfaceDark <\/span>=<\/span> <\/span>Color<\/span>(<\/span>0xFFFFFFFF<\/span>)<\/span><\/span>\nval<\/span> errorDark <\/span>=<\/span> <\/span>Color<\/span>(<\/span>0xFFFF0000<\/span>)<\/span><\/span>\nval<\/span> onErrorDark <\/span>=<\/span> <\/span>Color<\/span>(<\/span>0xFFFFFFFF<\/span>)<\/span><\/span>\nval<\/span> errorContainerDark <\/span>=<\/span> <\/span>Color<\/span>(<\/span>0xFF8A4B08<\/span>)<\/span><\/span>\nval<\/span> onErrorContainerDark <\/span>=<\/span> <\/span>Color<\/span>(<\/span>0xFFFFFFFF<\/span>)<\/span><\/span>\nval<\/span> outlineDark <\/span>=<\/span> <\/span>Color<\/span>(<\/span>0xFF757575<\/span>)<\/span><\/span>\nval<\/span> outlineVariantDark <\/span>=<\/span> <\/span>Color<\/span>(<\/span>0xFF616161<\/span>)<\/span><\/span>\nval<\/span> scrimDark <\/span>=<\/span> <\/span>Color<\/span>(<\/span>0xFF000000<\/span>)<\/span><\/span><\/code><\/pre><\/div>\n\n\n

Furthermore, let’s integrate these colors into the color schemes.<\/p>\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
private<\/span> <\/span>val<\/span> DarkColorScheme <\/span>=<\/span> <\/span>darkColorScheme<\/span>(<\/span><\/span>\n    primary <\/span>=<\/span> primaryDark,<\/span><\/span>\n    onPrimary <\/span>=<\/span> onPrimaryDark,<\/span><\/span>\n    secondary <\/span>=<\/span> secondaryDark,<\/span><\/span>\n    onSecondary <\/span>=<\/span> onSecondaryDark,<\/span><\/span>\n    tertiary <\/span>=<\/span> tertiaryDark,<\/span><\/span>\n    onTertiary <\/span>=<\/span> onTertiaryDark,<\/span><\/span>\n    background <\/span>=<\/span> backgroundDark,<\/span><\/span>\n    onBackground <\/span>=<\/span> onBackgroundDark,<\/span><\/span>\n    surface <\/span>=<\/span> surfaceDark,<\/span><\/span>\n    onSurface <\/span>=<\/span> onSurfaceDark,<\/span><\/span>\n    error <\/span>=<\/span> errorDark,<\/span><\/span>\n    onError <\/span>=<\/span> onErrorDark,<\/span><\/span>\n    errorContainer <\/span>=<\/span> errorContainerDark,<\/span><\/span>\n    onErrorContainer <\/span>=<\/span> onErrorContainerDark,<\/span><\/span>\n    outline <\/span>=<\/span> outlineDark,<\/span><\/span>\n    outlineVariant <\/span>=<\/span> outlineVariantDark,<\/span><\/span>\n    scrim <\/span>=<\/span> scrimDark<\/span><\/span>\n)<\/span><\/span>\n<\/span>\nprivate<\/span> <\/span>val<\/span> LightColorScheme <\/span>=<\/span> <\/span>lightColorScheme<\/span>(<\/span><\/span>\n    primary <\/span>=<\/span> primaryLight,<\/span><\/span>\n    onPrimary <\/span>=<\/span> onPrimaryLight,<\/span><\/span>\n    secondary <\/span>=<\/span> secondaryLight,<\/span><\/span>\n    onSecondary <\/span>=<\/span> onSecondaryLight,<\/span><\/span>\n    tertiary <\/span>=<\/span> tertiaryLight,<\/span><\/span>\n    onTertiary <\/span>=<\/span> onTertiaryLight,<\/span><\/span>\n    background <\/span>=<\/span> backgroundLight,<\/span><\/span>\n    onBackground <\/span>=<\/span> onBackgroundLight,<\/span><\/span>\n    surface <\/span>=<\/span> surfaceLight,<\/span><\/span>\n    onSurface <\/span>=<\/span> onSurfaceLight,<\/span><\/span>\n    error <\/span>=<\/span> errorLight,<\/span><\/span>\n    onError <\/span>=<\/span> onErrorLight,<\/span><\/span>\n    errorContainer <\/span>=<\/span> errorContainerLight,<\/span><\/span>\n    onErrorContainer <\/span>=<\/span> onErrorContainerLight,<\/span><\/span>\n    outline <\/span>=<\/span> outlineLight,<\/span><\/span>\n    outlineVariant <\/span>=<\/span> outlineVariantLight,<\/span><\/span>\n    scrim <\/span>=<\/span> scrimLight<\/span><\/span>\n)<\/span><\/span><\/code><\/pre><\/div>\n\n\n

Suppose you have defined a blue color for the dark theme and a red color for the light theme as the primary color. In that case, all buttons will be blue for the dark theme and red for the light theme. However, let\u2019s say you want to use the color you defined for tertiary as the button color. In this situation, you can change the color as follows.<\/p>\n\n\n
<\/circle><\/circle><\/circle><\/g><\/svg><\/span><\/path><\/path><\/svg><\/span>
@OptIn(ExperimentalMaterial3Api::<\/span>class<\/span>)<\/span><\/span>\n@Composable<\/span><\/span>\n@NonRestartableComposable<\/span><\/span>\nfun<\/span> <\/span>CustomButtons<\/span>() {<\/span><\/span>\n    <\/span>Scaffold<\/span> { paddingValues <\/span>-><\/span><\/span>\n        <\/span>Column<\/span>(<\/span><\/span>\n            modifier <\/span>=<\/span> Modifier<\/span><\/span>\n                .<\/span>fillMaxSize<\/span>()<\/span><\/span>\n                .<\/span>padding<\/span>(paddingValues),<\/span><\/span>\n            verticalArrangement <\/span>=<\/span> Arrangement.SpaceEvenly,<\/span><\/span>\n            horizontalAlignment <\/span>=<\/span> Alignment.CenterHorizontally<\/span><\/span>\n        ) {<\/span><\/span>\n            <\/span>Button<\/span>(<\/span><\/span>\n                onClick <\/span>=<\/span> { <\/span>\/*TODO*\/<\/span> },<\/span><\/span>\n            ) {<\/span><\/span>\n                <\/span>Text<\/span>(<\/span>"Default Color Button"<\/span>)<\/span><\/span>\n            }<\/span><\/span>\n            <\/span>Button<\/span>(<\/span><\/span>\n                onClick <\/span>=<\/span> { <\/span>\/*TODO*\/<\/span> },<\/span><\/span>\n                colors <\/span>=<\/span> ButtonDefaults.<\/span>buttonColors<\/span>(<\/span><\/span>\n                    containerColor <\/span>=<\/span> MaterialTheme.colorScheme.tertiary<\/span><\/span>\n                )<\/span><\/span>\n            ) {<\/span><\/span>\n                <\/span>Text<\/span>(<\/span>"Custom Color Button"<\/span>)<\/span><\/span>\n            }<\/span><\/span>\n        }<\/span><\/span>\n    }<\/span><\/span>\n}<\/span><\/span><\/code><\/pre><\/div>\n\n\n

If you had done this by directly assigning a color, there would have been a conflict between the light and dark themes. In other words, you can easily use the color you defined as tertiary for both themes on the button.<\/p>\n
\"\" \"\"<\/p>","protected":false},"excerpt":{"rendered":"
Material Design 3 represents the most recent iteration of Google’s Material Design, which serves as a comprehensive user interface design system employed in Android and various other Google products. Material Design 3 introduces fresh color schemes, typography, and shapes to enhance the visual appeal and overall dynamic nature of the design. In this article, we will discuss color schemes for a Material Design 3 Jetpack Compose project. In Jetpack Compose, there are three files located within the theme folder. These are \u201cColor.kt\u201d, \u201cTheme.kt\u201d, and \u201cType.kt\u201d, respectively. In the Color file, you can set your colors. In the Theme file, you…<\/p>\n","protected":false},"author":1,"featured_media":789,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[29],"tags":[],"class_list":["post-836","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kotlin"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/barisuslucan.com\/en\/wp-json\/wp\/v2\/posts\/836","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/barisuslucan.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/barisuslucan.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/barisuslucan.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/barisuslucan.com\/en\/wp-json\/wp\/v2\/comments?post=836"}],"version-history":[{"count":2,"href":"https:\/\/barisuslucan.com\/en\/wp-json\/wp\/v2\/posts\/836\/revisions"}],"predecessor-version":[{"id":840,"href":"https:\/\/barisuslucan.com\/en\/wp-json\/wp\/v2\/posts\/836\/revisions\/840"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/barisuslucan.com\/en\/wp-json\/wp\/v2\/media\/789"}],"wp:attachment":[{"href":"https:\/\/barisuslucan.com\/en\/wp-json\/wp\/v2\/media?parent=836"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/barisuslucan.com\/en\/wp-json\/wp\/v2\/categories?post=836"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/barisuslucan.com\/en\/wp-json\/wp\/v2\/tags?post=836"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}