!!! warning This library is deprecated, and the API is no longer maintained. We recommend generating a theme with Material Theme Builder The original documentation is below.
Recommendation: Use the Material Theme Builder tool, or an alternative design tool, to generate a matching XML and Compose theme implementation for your app. See Migrating XML themes to Compose to learn more.
You can checkout Material Design 3 in Compose to learn more about creating and adding theme to your app using Material Theme Builder.
A library that enables the reuse of MDC-Android Material 3 XML themes, for theming in Jetpack Compose.
The basis of Material Design 3 theming in Jetpack Compose is the MaterialTheme
composable, where you provide ColorScheme
, Typography
and Shapes
instances containing your styling parameters:
MaterialTheme( colorScheme = colorScheme, typography = typography, shapes = shapes ) { // M3 Surface, Scaffold, etc. }
Material Components for Android themes allow for similar theming for views via XML theme attributes, like so:
<style name="Theme.MyApp" parent="Theme.Material3.DayNight"> <!-- Material 3 color attributes --> <item name="colorPrimary">@color/purple_500</item> <item name="colorSecondary">@color/purple_700</item> <item name="colorTertiary">@color/green_200</item> <!-- Material 3 type attributes--> <item name="textAppearanceBodyLarge">@style/TextAppearance.MyApp.BodyLarge</item> <item name="textAppearanceBodyMedium">@style/TextAppearance.MyApp.BodyMedium</item> <!-- Material 3 shape attributes--> <item name="shapeAppearanceCornerSmall">@style/ShapeAppearance.MyApp.CornerSmall</item> </style>
This library attempts to bridge the gap between Material Components for Android M3 XML themes, and themes in Jetpack Compose, allowing your composable MaterialTheme
to be based on the Activity
's XML theme:
Mdc3Theme { // MaterialTheme.colorScheme, MaterialTheme.typography, MaterialTheme.shapes // will now contain copies of the Context's theme }
This is especially handy when you're migrating an existing app, a Fragment
(or other UI container) at a time.
The Mdc3Theme()
function will automatically read the host Context
's MDC theme and pass them to MaterialTheme
on your behalf, but if you want to customize the generated values, you can do so via the createMdc3Theme()
function:
val context = LocalContext.current var (colorScheme, typography, shapes) = createMdc3Theme( context = context ) // Modify colorScheme, typography or shapes as required. // Then pass them through to MaterialTheme... MaterialTheme( colorScheme = colorScheme, typography = typography, shapes = shapes ) { // Rest of M3 layout }
There are some known limitations with the implementation at the moment:
Activity
/Context
theme extending one of the Theme.Material3
themes.setTextColors
function parameter.android:fontVariationSettings
are currently ignored.ShapeAppearances
allow setting of different corner families (cut, rounded) on each corner, whereas Compose's Shapes allows only a single corner family for the entire shape. Therefore only the app:cornerFamily
attribute is read, others (app:cornerFamilyTopLeft
, etc) are ignored.MaterialTheme
in Compose as required, but this only works in Compose. Any changes you make will not be reflected in the Activity
theme.repositories { mavenCentral() } dependencies { implementation "com.google.accompanist:accompanist-themeadapter-material3:<version>" }
Snapshots of the current development version of this library are available, which track the latest commit. See here for more information on how to use them.
Please contribute! We will gladly review any pull requests. Make sure to read the Contributing page first though.
Copyright 2022 The Android Open Source Project Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at https://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.