Build your own Material Theme on Glitch

A new interactive Glitch project launched today at Google I/O. Build a Material Theme allows you to style and remix themeable components, so you can create your own custom version of Material Design. Define your theme, see it in action, and get the code.

Material Design is an adaptable design system backed by open-source code. Google created it so anyone can make high-quality user interfaces.

Material Design comes with a built-in, baseline style that can be used as-is. But with Material Theming, you can customize the UI to reflect your own product's brand.

"Some folks have the misconception that Material Design is just a single style or that all Material apps end up looking like Google products," says Yasmine Evjen, Design Advocate at Google. "But there's really this incredible flexibility in the system and we want more and more people to experiment with customizing how Material looks."

This new interactive Glitch project lets you easily experience the power of Material Theming. By remixing and modifying variables in the project, you can play around with theming, preview different styles, and define your theme's colors, typefaces, and shapes. It’s a great way to get a feel for how Material Theming works, and better yet – you can use or download the code right away for your own projects.

How It Works

Start by remixing "material-theme-builder", then modify the color scheme, shape system and typography scale by tweaking variables in your project's my-theme.scss, my-components.scss, and my-theme.js files. You'll see your custom styles automatically cascade through the Material Components.

"Glitch’s educational approach embodies so much of what’s great about the web: the freedom of information, expression, and creation. That’s what inspired us to make an open and remixable Glitch project for Material Theming."
David Allin Reese, Visual Designer, Google

Get started and build a Material theme to create your own custom style for Material Design. Then check out other resources, like templates, buttons, and starter kits on the Material Design page on Glitch.