Theming in Jetpack Compose: Colors
Jetpack Compose is a new Declarative UI toolkit and we already know how the things work here, In this article we will learn how to set and customize theme in Jetpack Compose.
One of the most important things while developing a project or large scale application from scratch is defining the Theme, by default android uses Material Design or now Material You. Material Design system helps you apply your colors to UI in a meaningful way.
When we create a project, compose create a package name ui.theme, in this package Compose offers us a implementation of Material Design for creating our interface. This package contains files name Color, Shapes, Theme and Typography. These are basically the base line of our theme that Material Design provides us.
Let’s have a look inside Theme.kt file from one of a project.
In theme. file we will find a Composable in this case name ReMedTheme which wraps the MaterialTheme component. This function name is determined by the name of our project. It also takes the two parameters one is darkTheme if we are going to use dark theme in our application. As the colors will change according to two different themes, so we can determine which palettes to be used by setting this variable. Second variable is a composable function called content. So with this we can send Composable function created for our application as content in MainActivity, and we will use the theme through out our application.
MaterialTheme is the core element for implementing theme in jetpack compose. and it takes three attributes colors, typography and shapes. we can now retrieve these parameters passed to it using MaterialTheme object. Or while creating UI we can wrap our components in it.
As we do not specify any parameters for our theme, So we will have the baseline styling.
Now we will look into how we can Customize our theme. By default Compose comes with purple and blue color pellets, we can define colors in multiple ways but you might have notice something like this in your theme file.
In Material Design system we select primary and secondary color to represent our application brand. these colors have light and dark variants to applied in difference scenarios. let’s take a look what these colors mean and how we can use them.
primary color: is the color most frequently used in app and basically is the main color of our theme. primary color have variant for both light and dark theme.
secondary color: is used comparatively with Theme color to distinguish our theme, and can be used in small to enhance the theme impact. Just like secondary color also have variants for dark and light theme.
Surface affect surface of the components like cards, bottom and menus.
Background colors appear behind scrollable content.
Error color indicates errors such as invalid text in a text fields.
When we create a project Material Design provide us with purple color palette in Colors.kt file. lets add some other colors to Understand it in a better way.
We can define colors in multiple ways. But In android there are generally two ways to define colors, by using hex code or by ARGB. we usually define color in hex code while working with xml but in here it is slightly different, we replace # with 0XFF while defining our color.
now we can apply these color in our components.
Conclusion
Material Design System offers us a Color class which provides us the baseline and can be use to customize material color system. Using this method is highly recommended in android because it helps us to ensure that colors to be used in our app are managed by single color palette. This is more convenient way for implementing light and dark theme. In next article I’ll be explaining how to add our own Text style and shapes to theme. Thanks for reading.