theming: deprecate and remove legacy theme color generation
See original GitHub issueIs this a regression?
- Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
No response
Description
Don’t know if it’s intended behavior or not. Scss generated by mat.define-dark-theme or mat.define-light-theme have duplicated keys/values/styles.
Notice the duplicated values for:
- primary
- accent
- warn
- is-dark
- foreground
- background
Reproduction
Steps to reproduce:
- Create new project
ng new
1.1 Choose SCSS as stylesheet - Add angular material
ng add @angular/material
2.1 For prebuild theme, choose custom option - In styles.scss file, add
@debug
$name-of-app-theme
Expected Behavior
Should exist only one definition for
- primary
- accent
- warn
- is-dark
- foreground
- background
Actual Behavior
Below I attached the result of @debug
. Take a look at primary color, for example and notice the value is repeated for no reason.
The only difference is the parenthesis before.
Environment
- Angular: 13.0.1
- CDK/Material: 13.0.0
- Operating System (e.g. Windows, macOS, Ubuntu): Windows
Issue Analytics
- State:
- Created 2 years ago
- Comments:5 (5 by maintainers)
Top Results From Across the Web
Deprecated and obsolete modules and themes - Drupal
The Color module has been deprecated in Drupal 9.4 and will be removed from Drupal 10.0. In most cases, you will only need...
Read more >Angular Material Theming System - Complete Guide
In Angular Material, a theme is a collection of color and typography options. Each theme includes three palettes that determine component colors: primary ......
Read more >Theme Support | Block Editor Handbook
By default, the color palette offered to blocks allows the user to select a custom color different from the editor or theme default...
Read more >prefers-color-scheme - CSS: Cascading Style Sheets | MDN
The prefers-color-scheme CSS media feature is used to detect if a user has requested light or dark color themes.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
This is actually an intentional duplication to ensure backwards compatibility since we changed some of the internals of the theming API in preparation for density with MDC etc.
We should mark this old pattern as deprecated in an upcoming minor and remove this in the future. Here is the related code:
https://github.com/angular/components/blob/df7c46b82a7ecdfe74aad136e0c880e5631c7b7b/src/material/core/theming/_theming.scss#L388-L411
I don’t think that we’ve announced anywhere that the
.import
files are deprecated, but we haven’t been exposing any new APIs through them.