Build your own Material Theme on Glitch

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.

says Yasmine Evjen, Design Advocate at Google.

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.

— 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.