angular / angular/components

Build a theme generator/picker that simplifies the process

Open
#13,265 7 comments 10 reactions 0 assignees View on GitHub
area: material.angular.io docs feature needs: discussion P5
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### 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

Contributor guide

Open the contributing guide

Research direction

Review the current Angular Material theming documentation and the mat-palette usage described in the issue, then compare the proposed workflow with the linked Material color-system tool. Define how a picker or generator would accept a small set of colors and produce usable theme variants; the work is done when that workflow is specified and supported with appropriate documentation.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, scss
Domain
design, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.