Build a theme generator/picker that simplifies the process

[tomgruszowski]

Bug, feature request, or proposal:

Feature Request

What is the current behavior?

Custom theming angular material is cumbersome.

What is the use-case or motivation for changing an existing behavior?

Make it easier to modify theme based on more traditional number color palettes. Designers will often provide 3-6 colors that should encompass most of the application/website, while the material pallets have over a dozen color hues per palette, for a total of well over 50 colors that the app can use. This isn't practical to maintain unless one REALLY cares about each shade. I understand the Ng Material team is just using the official Material colors but in my opinion there is a balance to be struck.

Maybe I'm missing something from the docs but I really would prefer not to do: $candy-app-primary: mat-palette($mat-indigo); // this palette has over dozen colors to maintain

and instead do $candy-app-primary: mat-palette(#999); // where 999 is my primary color

And have the material theme generate the variants in some way OR do it like Bootstrap and use scss lightens/darkens mixins where appropriate.

Suggestion: Incorporate a palette generator of some kind, perhaps using similar logic as used by the material tool. https://material.io/design/color/the-color-system.html#tools-for-picking-colors

[jelbourn]

We're wanted to build a generator tool on material.angular.io for a long time, but it's never been quite high enough priority vs. other tasks

[tomgruszowski]

Understandable.

Something for discussion with the team, consider Bootstrap scss variables file as another pivot point to this topic. I love ng material but I wish it took some styling design ideas from mature frameworks used by millions.

While my material theme palette has dozen or so shades, it's hard to know which color is used where. Currently I will inspect a color that looks off (at runtime) and update my palette accordingly. I don't have a variable like 'table-border-color'. This is something that BS excels at in my opinion. It starts with a few simple colors (primary, accent, success, error etc), applies some lighten/darkens where needed, but I can modify specific styles very clearly and without impacting the rest of the UI because the variables are built on top of other variables and I'm able to intercept the style at any point. I think the approach of adding more variables, where currently you do something generic as $foreground would allow you to solve this problem incrementally and maintain forward compatibility while increasing customization functionality.

Bootstrap scss as reference: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss

[heddendorp]

I think the current guide for colors is interesting. It seems like they went down to three hues per color while maintaining a primary and secondary palette, as exported by the color tool. This might be a good first step in making theming easier.

[tbunique]

I've been using that tool to create my basic palette but it's still a pain to have to generate the other colors of the palette. Not even sure where they're used :)

[Splaktar]

This is a pretty good, open-source option: https://www.nikhilwalvekar.com/ng-mat-theme-generator/

[angular-robot[bot]]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot[bot]]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.