Currently when we want to generate different themes we scope the classes to the specific themes by nesting the theme css generation within a scope block.
.dark-theme {
/// Dark theme CSS generation
}
html {
/// Light theme (Default) CSS generation
}
And this will duplicate the generation of classes that change color, and with the old way of doing it this made sense because we used SASS getters to retrieve color from the theme palette.
When using the Material Design Tokens (CSS Variables) this becomes unnecessary, because the selector context ( .light {}, .dark {}` and so on ... ) decides what CSS are applicable.
And so any CSS that depends on color design tokens only needs to be generated once.
So Angular Material can split of structural classes and generate those within a specific scope block if necessary ( If a different theme implies a different structure), while only generating color specific CSS one time.
Use Case
Application Size Optimization. The CSS Bundles will be smaller.
Notes
This is a slightly tricky concept, so for anyone curious about this here's a minimal demo.
Feature Description
Currently when we want to generate different themes we scope the classes to the specific themes by nesting the theme css generation within a scope block.
And this will duplicate the generation of classes that change color, and with the old way of doing it this made sense because we used SASS getters to retrieve color from the theme palette.
When using the Material Design Tokens (CSS Variables) this becomes unnecessary, because the selector context ( .light {}, .dark {}` and so on ... ) decides what CSS are applicable.
And so any CSS that depends on color design tokens only needs to be generated once.
So Angular Material can split of structural classes and generate those within a specific scope block if necessary ( If a different theme implies a different structure), while only generating color specific CSS one time.
Use Case
Application Size Optimization. The CSS Bundles will be smaller.
Notes
This is a slightly tricky concept, so for anyone curious about this here's a minimal demo.
https://stackblitz.com/edit/stackblitz-starters-j3ncju?file=package.json
When the
.darkclass is applied to themainelement it changes the background of the div.