{"id":1450,"date":"2023-09-14T05:00:00","date_gmt":"2023-09-14T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1450"},"modified":"2023-09-11T14:30:46","modified_gmt":"2023-09-11T21:30:46","slug":"angular-material-theme-generator","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/angular-material-theme-generator\/","title":{"rendered":"Angular Material Theme Generator"},"content":{"rendered":"\n

As we started covering Angular Material<\/a> with a few different posts, today, I want to address one of the common objections to Angular Material: Sometimes, people don’t like the look and feel of the library and fear that it won’t match their business requirements. <\/p>\n\n\n\n

While it is true that the default themes picked by the Material team aren’t for everyone, with a lot of bright pink, purple or flashy green, I have seen several companies customize Material to make it their own with great success.<\/p>\n\n\n\n

Here are a few examples: <\/p>\n\n\n\n

Bank of Montreal (BMO)<\/a><\/h3>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Air France<\/a><\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

You can see that in some cases, it’s actually hard to recognize Material components in those apps. On the Air France website, the tabs<\/a> and slide toggle<\/a> are the most recognizable components.<\/p>\n\n\n\n

How to generate my own custom theme?<\/h3>\n\n\n\n

One of the easiest way to see what’s possible is to use the (unofficial – though it comes from a team at Google) Material Theme Generator<\/a>:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

With the theme generator, you can:<\/p>\n\n\n\n

    \n
  • Generate a theme from an image (such as a company logo!) and the tool will pick the colors and do the rest<\/li>\n\n\n\n
  • Tweak all possible variables using color pickers and see the result on every component on the right-hand side.<\/li>\n\n\n\n
  • Then export your customization as a CSS file using th “Download CSS” button.<\/li>\n<\/ul>\n\n\n\n

    <\/p>\n\n\n\n

    Here I tried uploading a picture of mine from the Canyonlands of Utah last winter, and the resulting auto-generated theme is impressive – I didn’t touch any of the settings:<\/p>\n\n\n

    \n
    \"\"<\/figure>\n<\/div>","protected":false},"excerpt":{"rendered":"

    As we started covering Angular Material with a few different posts, today, I want to address one of the common objections to Angular Material: Sometimes, people don’t like the look and feel of the library and fear that it won’t match their business requirements. While it is true that the default themes picked by the […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,35],"tags":[],"class_list":["post-1450","post","type-post","status-publish","format-standard","hentry","category-angular","category-material"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1450","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=1450"}],"version-history":[{"count":3,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1450\/revisions"}],"predecessor-version":[{"id":1457,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1450\/revisions\/1457"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1450"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1450"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1450"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}