Build a Material theme

These interactive projects for Android and the web let you create your own Material theme by customizing values for color, typography, and shape. See how these values appear when applied to Material Components, and get the code for your theme.

Build a Material theme for the web

Remix the project on Glitch

Build a Material theme for Android

Download code to use with Android Studio


How to: Using Glitch

This remixable project is hosted on Glitch. With a built-in code editor and automated deployment, you can make changes and see your custom styles instantly applied to Material Components for the web.

Watch a video of how to use the project.

Remix the project

Creating your theme is easy. “Remix” to make an editable copy of the project. Then navigate to the code view to make changes.

Read More

Creating your theme is easy. “Remix” to make an editable copy of the project. Then navigate to the code view to make changes.

Change values for color, typography, and shape

To customize your theme, modify the variables in your project’s my-theme.scss file by opening the file in the code view and entering new values. The...

Read More

To customize your theme, modify the variables in your project’s my-theme.scss file by opening the file in the code view and entering new values. The project already contains Material’s baseline values by default, and you can easily swap them out.

Typography

To change your theme’s typography, we recommend using Google Fonts and choosing a font family that best reflects your style. Copy the font’s @import url and set the global font family by changing the variable for “mdc-typography-font-family”.

Shape

To systematically apply shape throughout your app, it helps to understand that Material Components are grouped by size, into categories of small, medium, and large. The shape of each component group can be themed by overriding the default values. We recommend using our shape customization tool to help you pick your radius values.

Color

To change your theme's color scheme, replace the existing HEX color values with custom HEX color values. Use our color palette generator to help come up with pairings and check your color contrast.

Copy your code

Congrats! Now you have own Material theme that you can use in your Material Components for the web projects. We’ve made it easy to start...

Read More

Congrats! Now you have own Material theme that you can use in your Material Components for the web projects. We’ve made it easy to start building your web project with our Material Starter Kit, just copy your theming variables from my-theme.scss into the starter kit’s my-theme.scss and start building. Happy Theming!


How to: Using Android Studio

Material Components for Android supports Material Theming by exposing top-level theme attributes for color, typography and shape. Customizing these attributes will apply your custom theme throughout your entire app. This project shows how you can organize and use your theme and style resources to take advantage of theming.

Clone and run the project

Clone the Material Components for Android repository. In Android Studio, open an existing Android Studio project and select material-components-android/material-theme-builder. Build and run the project to...

Read More

Clone the Material Components for Android repository. In Android Studio, open an existing Android Studio project and select material-components-android/material-theme-builder.

Build and run the project to view the default baseline Material theme styles. Try modifying each subsystem, re-running the app and seeing how changes are propagated throughout the app.

Change values for typography, shape, and color

By default, apps built with Material Components inherit our baseline theme values. To begin customizing, override properties in color.xml, type.xml and shape.xml. To change your...

Read More

By default, apps built with Material Components inherit our baseline theme values. To begin customizing, override properties in color.xml, type.xml and shape.xml.

type.xml

To change your theme’s typography, we recommend using Google Fonts and choosing a font-family that best reflects your style. Set TextApperances to use your custom font and additional type properties to apply a custom type scale globally. Learn how to add fonts in Android Studio.

shape.xml

To systematically apply shape throughout your app, it helps to understand that Material Components are grouped by size into categories of small, medium and large. The shape of each component size group can be themed by customizing its ShapeApperance style. We recommend using our shape customization tool to help you pick your corner family and size values.

color.xml

To change your theme's color scheme, replace the existing HEX color values with your custom HEX values. This project has both light and dark themes — toggle between them within the app to see your changes. Use our color palette generator to help come up with pairings and check your color contrast.

Copy your code

Once you build your Material theme, move the theme resources (color.xml, type.xml, shape.xml, themes.xml, and styles.xml) over to your app to start using it in...

Read More

Once you build your Material theme, move the theme resources (color.xml, type.xml, shape.xml, themes.xml, and styles.xml) over to your app to start using it in your projects.