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.
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.
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 project already contains Material’s baseline values by default, and you can easily swap them out.
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”.
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.
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 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
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
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.
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.
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 (
styles.xml) over to your app to start using it in your projects.