What is the best approach when creating a custom angular material theme?

I'm trying to understand how to best work with Angular-material theming:

Google's giving out a wide range of color palettes, And also provides guides on how to easily switch between palettes.

I've seen this question, And found a bunch of tools to generate a palette around a main color (tool1, tool2)

Although when getting a custom design from a designer, where different colors were picked, I find it difficult to implement design colors as a complete theme, as there are too many variables to take into account (such as hover shades, ink-ripple shades etc.).

My question is:

1. can I as a developer create a well enough eye pleasing theme from every design that is delivered to me (either by JS theming, or CSS overrides), or are there any restrictions to take into account?

2. should the designer take some guidelines into account when creating the design?

3. should we give away flexibility in design by going with one of Google's pre-defined palettes?

2 Answers

Answers 1

1. No, not currently. "Well-pleasing" is a broad, opinion-based term that is not decided by logical algorithm. I actually have tried to do exactly this for months before I finally learned enough about UI design to know it wouldn't work.

2. Google's material design guideline is all that's needed for a designer to create a Material Theme. It's not that long and a typical designer can skim through it in about an hour.

3. No. Google's pre-defined palettes are meant to be used by programmers to quickly create sites with acceptable interface. Unless you work specifically for Google, there's no reason to limit the designer's palette. They are totally fine as guidelines, though. See Dark Material UI, a design concept based on Material Design but doesn't adhere to many part of the guidelines (for example it uses colors not included in Google's color palettes)

Answers 2

The approach that we use is simply changing the href of css file in your html head section. In this case you have standalone css file for every theme, and when you need to switch, you simply modify href.

No need to use additional markup as google recommends, because it will be to complicated to switch between themes, especially if there lots of themes.

You can look at an example here: http://docs.telerik.com/kendo-ui/styles-and-layout/how-to/change-themes-on-the-client

There is a live example available. And material theme as well.

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati