Angular Material Custom Theme from Material Color Tool

Question

Material.io has this great tool called the Material Palette Generator: https://material.io/design/color/#tools-for-picking-colors. Using it, you can pick a primary and secondary color, and then click a link "View in Color Tool" which takes you to a page where you can see your choices in different ways: https://material.io/resources/color/#!/?view.left=0&view.right=0&primary.color=6002ee&secondary.color=c63131.

But there doesn't seem to be an easy way of exporting your palette into a format usable for generating a custom Angular Material theme. They have an export link, but the closest format seems to be CodePen. But once you open it in CodePen, the CSS doesn't seem to have the palette information you need.

My question: has anyone tried these tools, and is there a pre-established pathway from Material palette to Angular Material custom theme? Or are they unrelated? If unrelated, is there a simple way to copy the color codes needed from the former to the latter?

Thanks.

The export link was designed for AngularJS Material, the predecessor of Angular Material. — Edric
– Edric, Commented Jan 23, 2020 at 8:16

Anarno · Accepted Answer · 2024-11-04 07:55:02Z

20

Material v2:

The original v2 material site provides a handy color generator, you can pick any color, and it will calculate the full palette together with complementary, analogous, and triadic colors. https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors

You have to replace the color values in the _theming.scss with the generated values.

Material V2 and V3: I found this useful website for generating the theme: https://themes.angular-material.dev/ Pick whatever color you want, and on the sidebar just click on the Copy CSS Variables icon, it will have 2 options:

Copy CSS Variables for M3

OR

Copy SCSS Variables for M2

V2 expected color format:

edited Nov 4, 2024 at 7:55

answered Jan 23, 2020 at 8:49

Anarno

1,64012 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

FunkMonkey33 Over a year ago

That was great. Thank you!

Péter Over a year ago

no longer available

Anarno Over a year ago

Fixed, @Péter check it.

Collectives™ on Stack Overflow

Angular Material Custom Theme from Material Color Tool

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related