# Customizing Material Theme with Jetpack Compose

DevFeed: [Customizing Material Theme with Jetpack Compose](<https://devfeed.tech/articles/customizing-material-theme-with-jetpack-compose-24732.md>)

Original publisher: [Read original article](<https://medium.com/xorum-io/customizing-material-theme-with-jetpack-compose-fd07e386c71?source=rss----92bb7980cc9f---4>)

Author: Yev Kanivets

Published: 2022-02-06T19:19:30Z

Content type: tutorial

Language: en

Sources: [xorum.io - Medium](<https://devfeed.tech/sources/xorum-io-medium.md>)

Topics: [Jetpack Compose](<https://devfeed.tech/topics/jetpack-compose.md>), [Compose](<https://devfeed.tech/topics/compose.md>), [Android](<https://devfeed.tech/topics/android.md>), [Mobile](<https://devfeed.tech/topics/mobile.md>), [ui](<https://devfeed.tech/topics/ui.md>), [XML](<https://devfeed.tech/topics/xml.md>), [Library](<https://devfeed.tech/topics/library.md>), [Dark Mode](<https://devfeed.tech/topics/dark-mode.md>)

Tags: [android](<https://devfeed.tech/tags/android.md>), [android-development](<https://devfeed.tech/tags/android-development.md>), [compose](<https://devfeed.tech/tags/compose.md>), [dark-mode](<https://devfeed.tech/tags/dark-mode.md>), [jetpack-compose](<https://devfeed.tech/tags/jetpack-compose.md>), [library](<https://devfeed.tech/tags/library.md>), [mobile](<https://devfeed.tech/tags/mobile.md>), [mobile-app-development](<https://devfeed.tech/tags/mobile-app-development.md>), [mobile-development](<https://devfeed.tech/tags/mobile-development.md>), [ui](<https://devfeed.tech/tags/ui.md>), [xml](<https://devfeed.tech/tags/xml.md>)

## AI overview

This tutorial explains how to define and customize themes in Jetpack Compose for an Android application. It covers composable themes, color and typography systems, light and dark mode changes, XML theme compatibility, and the AppCompat Compose Theme Adapter during a transition from XML.

## Source excerpt

When Jetpack Compose went stable in July 2021, many Android developers started experimenting with it to see if it's mature enough to be used in production. Spoiler alert: it's more than ready and more delightful than XML! At the same time, we decided to redesign our mobile app called Codeforces WatchR, which is available on both iOS and Android. So it was a no-brainer to execute this redesign for the Android app using Jetpack Compose. Redesigned Codeforces WatchR app in the dark mode This article will describe the first step in our Jetpack Compose journey -- defining and using the Theme. Jetpack Compose theme, to be exact, since, as it's turned out, XML themes aren't fully compatible with Jetpack Compose. @Composable Theme As you already know, Jetpack Compose is built on the concept of Composable functions. It means that our whole UI is declared as a hierarchy of functions capable of rendering all possible views for all possible states. The theme doesn't make an exception to this rule. If we think about it, colors and fonts can easily change while the application is on the screen. Hence we need to recompose our UI to reflect the change (light/dark mode change, for example). So it makes total sense to have a theme as a Composable function. Even though there is a library that provides partial compatibility between XML and Jetpack Compose themes, the conversion is far from perfect. So we decided to support two sets of themes for the transition period. The AppCompat Compose Theme Adapter library allows you to easily re-use AppCompat XML themes for theming in Jetpack Compose. It creates a MaterialTheme with the color and typography values from the context's theme.Theme Structure As discussed above, the theme is a Composable function. It takes the content to be themed and returns ... nothing. But it provides an adequately configured theme object to the content by using CompositionLocalProvider. In the Theme object, we get a number of systems. There are color, typography, and