CPS251
Android Development
Theme Reference: ColorScheme, Typography, and Shapes
Introduction
Jetpack Compose themes are made up of three main parts: ColorScheme (for colors), Typography (for text styles), and Shapes (for corner roundness). This reference lists all the properties you can set for each, what they do, what type of value they take, and an example or default value. If you don't set a value, Compose uses a sensible default.
How Compose Handles Defaults
If you don't specify a property (like background or headlineLarge), Compose will use a default value from the Material3 design system. You can override any of these by setting your own value in your theme.
ColorScheme Properties
| Name | What It's For | Value Type | Example/Default |
|---|---|---|---|
| primary | Main brand color | Color | Color(0xFF6200EE) |
| onPrimary | Text/icon color on primary | Color | Color.White |
| primaryContainer | Container for primary elements | Color | Color(0xFFBB86FC) |
| onPrimaryContainer | Text/icon on primary container | Color | Color.Black |
| secondary | Secondary color | Color | Color(0xFF03DAC6) |
| onSecondary | Text/icon color on secondary | Color | Color.Black |
| secondaryContainer | Container for secondary elements | Color | Color(0xFF018786) |
| onSecondaryContainer | Text/icon on secondary container | Color | Color.White |
| tertiary | Tertiary color (optional accent) | Color | Color(0xFFB00020) |
| onTertiary | Text/icon color on tertiary | Color | Color.White |
| tertiaryContainer | Container for tertiary elements | Color | Color(0xFFFFDAD4) |
| onTertiaryContainer | Text/icon on tertiary container | Color | Color.Black |
| background | App background | Color | Color.White |
| onBackground | Text/icon color on background | Color | Color.Black |
| surface | Surface color (cards, sheets, etc.) | Color | Color.White |
| onSurface | Text/icon color on surface | Color | Color.Black |
| surfaceVariant | Alternate surface color | Color | Color(0xFFE7E0EC) |
| onSurfaceVariant | Text/icon on surface variant | Color | Color.Black |
| error | Error color | Color | Color(0xFFB00020) |
| onError | Text/icon color on error | Color | Color.White |
| errorContainer | Container for error elements | Color | Color(0xFFFCD8DF) |
| onErrorContainer | Text/icon on error container | Color | Color.Black |
| outline | Outline/border color | Color | Color(0xFF79747E) |
| inverseOnSurface | Text/icon on inverse surface | Color | Color.White |
| inverseSurface | Inverse surface color | Color | Color(0xFF313033) |
| inversePrimary | Inverse primary color | Color | Color(0xFFD0BCFF) |
| surfaceTint | Tint for surfaces | Color | Color(0xFF6200EE) |
| outlineVariant | Alternate outline color | Color | Color(0xFFC4C7C5) |
| scrim | Overlay color for modals | Color | Color(0xFF000000) |
Typography Properties
| Name | What It's For | Value Type | Example/Default |
|---|---|---|---|
| displayLarge | Very large headings | TextStyle | fontSize=57.sp |
| displayMedium | Large headings | TextStyle | fontSize=45.sp |
| displaySmall | Medium headings | TextStyle | fontSize=36.sp |
| headlineLarge | Section headings | TextStyle | fontSize=32.sp |
| headlineMedium | Subsection headings | TextStyle | fontSize=28.sp |
| headlineSmall | Small headings | TextStyle | fontSize=24.sp |
| titleLarge | Large titles | TextStyle | fontSize=22.sp |
| titleMedium | Medium titles | TextStyle | fontSize=16.sp |
| titleSmall | Small titles | TextStyle | fontSize=14.sp |
| bodyLarge | Main body text | TextStyle | fontSize=16.sp |
| bodyMedium | Secondary body text | TextStyle | fontSize=14.sp |
| bodySmall | Small body text | TextStyle | fontSize=12.sp |
| labelLarge | Large labels/buttons | TextStyle | fontSize=14.sp |
| labelMedium | Medium labels | TextStyle | fontSize=12.sp |
| labelSmall | Small labels | TextStyle | fontSize=11.sp |
Shapes Properties
| Name | What It's For | Value Type | Example/Default |
|---|---|---|---|
| extraSmall | Smallest components (chips, etc.) | CornerBasedShape | RoundedCornerShape(4.dp) |
| small | Small components | CornerBasedShape | RoundedCornerShape(8.dp) |
| medium | Default for buttons, cards | CornerBasedShape | RoundedCornerShape(12.dp) |
| large | Dialogs, sheets | CornerBasedShape | RoundedCornerShape(16.dp) |
| extraLarge | Very rounded corners | CornerBasedShape | RoundedCornerShape(28.dp) |
Tips for Using Theme Properties
- Use these properties with
MaterialTheme.colorScheme,MaterialTheme.typography, andMaterialTheme.shapesin your UI. - Only override the values you want to change—Compose will use defaults for the rest.
- Check the official Compose Material3 docs for the latest property lists and defaults.