Theming

Material Theming refers to the customization of your Material Design app to better reflect your product’s brand.

Theming extensions

Terminology

Our approach to theming relies on the relationships between the following concepts:

1. Components
2. Subsystem Schemes
3. The Container Scheme
4. Theming Extensions

Components are expected to provide public APIs for a variety of parameters. An example of a component is MDCButton.

Subsystem schemes represent a set of opinionated properties that are intended to be mapped to component parameters. There is a scheme for each Material Theming subsystem. For example, there is a scheme for the color, shape, and typography subsystems.

The Container scheme represents a single configurable entity that is applicable to all themeable components. A container scheme consists of all of the subsystem schemes.

Theming extensions are component extensions that, when invoked with a default container scheme, will theme a component according to the Material Design guidelines. When provided with subsystem schemes via a container scheme, the extension will map the subsystem scheme's values to the component’s parameters.

Sensible defaults, yet highly configurable

By default, components have reasonable defaults for all of their customizable properties, e.g. backgroundColor or titleFont. You can use these defaults as a baseline, but we encourage you to theme your components to match your brand style using theming extensions.

Schemes

Examples

Theming a Component

Swift

import MaterialComponents.MaterialButtons
import MaterialComponentsBeta.MaterialButtons_Theming
import MaterialComponentsBeta.MaterialContainerScheme

let containerScheme = MDCContainerScheme()
let button = MDCButton()
button.applyTextTheme(withScheme: containerScheme)

Objective-C

#import <MaterialComponents/MaterialButtons.h>
#import <MaterialComponents/MaterialButtons+Theming.h>
#import <MaterialComponentsBeta/MaterialContainerScheme.h>

MDCContainerScheme *containerScheme = [[MDCContainerScheme alloc] init];
MDCButton *button = [[MDCButton alloc] init];
[button applyTextThemeWithScheme:containerScheme];

Creating a container scheme

Swift

import MaterialComponents.MaterialColorScheme
import MaterialComponents.MaterialTypographyScheme
import MaterialComponents.MaterialShapeScheme
import MaterialComponentsBeta.MaterialContainerScheme

let containerScheme = MDCContainerScheme()
containerScheme.colorScheme = myColorScheme
containerScheme.typographyScheme = myTypographyScheme
containerScheme.shapeScheme = myShapeScheme

Objective-C

#import <MaterialComponents/MaterialColorScheme.h>
#import <MaterialComponents/MaterialShapeScheme.h>
#import <MaterialComponents/MaterialTypographyScheme.h>
#import <MaterialComponentsBeta/MaterialContainerScheme.h>

MDCContainerScheme *containerScheme = [[MDCContainerScheme alloc] init];
containerScheme.colorScheme = self.myColorScheme;
containerScheme.shapeScheme = self.myShapeScheme;
containerScheme.typographyScheme = self.myTypographyScheme;

Using a subsystem scheme

Swift

import MaterialComponents.MaterialColorScheme

let colorScheme = MDCSemanticColorScheme(defaults: .material201804)
// Configure custom properties to match your brand
colorScheme.backgroundColor = .lightGray

Objective-C

#import <MaterialComponents/MaterialColorScheme.h>

MDCSemanticColorScheme *colorScheme = [[MDCSemanticColorScheme alloc] initWithDefaults:MDCColorSchemeDefaultsMaterial201804];
// Configure custom properties to match your brand
colorScheme.backgroundColor = UIColor.lightGrayColor

How to get the code

Beta components

In order to use the theming extensions and container scheme you'll need to follow these instructions since they are currently in beta.

Cocoapods

In order to use the components and subsystem schemes you'll need to add the targets to your Podfile:

pod 'MaterialComponents/Buttons'
pod 'MaterialComponents/schemes/Color'

Themers

Note These will soon be deprecated for theming-extensions outlined above.

Our approach to theming relies on the relationships between the following concepts:

1. Components
2. Schemes
3. Themers

Components are expected to provide public APIs for a variety of parameters. An example of a component is MDCBottomNavigation.

Schemes represent a set of opinionated properties that are intended to be mapped to component parameters. There is a scheme for each Material Theming subsystem. For example, there is a scheme for the color, shape, and typography subsystems.

Themers are objects that, when invoked with a scheme, will theme a component according to the Material Design guidelines.

Examples

Theming a Component

Swift

import MaterialComponents.MaterialBottomNavigation
import MaterialComponents.MaterialBottomNavigation_ColorThemer

let colorScheme = MDCSemanticColorScheme(defaults: .material201804)
let bottomNavBar = MDCBottomNavigationBar()
MDCBottomNavigationBarColorThemer.applySemanticColorScheme(colorScheme,
toBottomNavigation: bottomNavBar)

Objective-C

#import <MaterialComponents/MaterialBottomNavigation.h>
#import <MaterialComponents/MaterialBottomNavigation+ColorThemer.h>

MDCSemanticColorScheme *colorScheme = [[MDCSemanticColorScheme alloc] initWithDefaults:MDCColorSchemeDefaultsMaterial201804];
MDCBottomNavigation *bottomNavBar = [[MDCBottomNavigation alloc] init];
[MDCBottomNavigationBarColorThemer applySemanticColorScheme:self.colorScheme
toBottomNavigation:_bottomNavBar];

Using a scheme

Swift

import MaterialComponents.MaterialColorScheme

let colorScheme = MDCSemanticColorScheme(defaults: .material201804)
// Configure custom properties to match your brand
colorScheme.backgroundColor = .lightGray

Objective-C

#import <MaterialComponents/MaterialColorScheme.h>

MDCSemanticColorScheme *colorScheme = [[MDCSemanticColorScheme alloc] initWithDefaults:MDCColorSchemeDefaultsMaterial201804];
// Configure custom properties to match your brand
colorScheme.backgroundColor = UIColor.lightGrayColor

How to get the code

Cocoapods

In order to use the components, themers and subsystem schemes you'll need to add the targets to your Podfile:

pod 'MaterialComponents/BottomNavigation'
pod 'MaterialComponents/BottomNavigation+ColorThemer'
pod 'MaterialComponents/schemes/Color'

Additional links

• Material Guidelines introduction to Theming
• Material Theming at Google I/O