Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

**

Edit - 05/2017:

I've decided to completely turn off theming since I couldn't fully understand how to customize it to our needs.

Im now injecting variables through webpack into SASS files and the outcode is much more sane.

**

like image 995
Nitsan Baleli Avatar asked Feb 09 '17 14:02

Nitsan Baleli


People also ask

How do I create a custom material theme?

To use a custom theme, first you'll need to configure its colors. To do so, open the Settings and navigate to Appearance & Behavior → Material Theme UI → Custom Theme. Once you're done customizing your colors, you'll need to select Custom Theme or Light Custom Theme from the Theme Switcher to see your colors in action.

Which of the following is a theme in Angular material?

In Angular Material, a theme is a collection of color and typography options. Each theme includes three palettes that determine component colors: primary, accent and warn. Angular Material's theming system comes with a predefined set of rules for color and typography styles.

Can we customize Angular material?

For any Angular Material component, you can safely define custom CSS for a component's host element that affect the positioning or layout of that component, such as margin , position , top , left , transform , and z-index .


1 Answers

  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)

like image 89
AVAVT Avatar answered Oct 09 '22 02:10

AVAVT