search

johannesjo / angular-material-css-vars

Little library to use css variables with @angular/material
https://johannesjo.github.io/angular-material-css-vars/
MIT License
194 stars 31 forks source link

M3 theme support #166

Open json-derulo opened 5 months ago

json-derulo commented 5 months ago

:frowning: Problem Statement

Angular Material v17.2 introduced experimental support for M3 theming. We can expect M3 support to be graduated to stable soon. Users of angular-material-css-vars should be able to use the new M3 theme, at the same time it should still be possible to use M2 if a project isn't ready to update just yet.

:grey_question: Possible Solution

  1. angular-material-css-vars defaults to M3 with a possibility to opt-out and use M2
  2. angular-material-css-vars defaults to M2 with a M3 opt-in possibility (until M2 is officially deprecated)

Personally I would prefer to default to the same theme which Angular Material defaults to for new projects.

:heavy_plus_sign: Additional context

We are not planning to support M3 while it's experimental, as it is necessary to use the @angular/material-experimental package, which adds more complexity.

json-derulo commented 3 months ago

The M3 theme has quite some differences with the M2 theme. There is no accent color anymore, and the warn color is now called error. Also there is a secondary color which will be chosen automatically, and a tertiary color. For more information, see the new theming guide.

It will not be trivial to add M3 support. For now, only M2 is supported. PRs to add M3 support are welcome.

floinay commented 2 months ago

https://medium.com/@raultonello18/angular-material-m3-dynamic-runtime-colors-6d6d1036d2bb