Skip to content

Commit c8ae683

Browse files
committed
fix(material/schematics): add option to generate system variables in M3 schematic
Adds an option that allows users to opt into generating system-level variables through the M3 schematic.
1 parent 37958ef commit c8ae683

File tree

5 files changed

+230
-157
lines changed

5 files changed

+230
-157
lines changed

src/material/schematics/ng-generate/m3-theme/README.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@ specified directory or the project root with the generated themes. The exported
1919
themes (`$light-theme` and/or `$dark-theme`) can be provided to component theme
2020
mixins.
2121

22+
If you're using the system variables option, you should remember to either provide values for the
23+
system variables (all prefixed with `--sys-`), or to include the `system-level-colors` and
24+
`system-level-typography` mixins which will generate the values based on your theme.
25+
2226
```scss
2327
@use '@angular/material' as mat;
2428
@use './path/to/my-theme';
@@ -29,6 +33,11 @@ html {
2933
// Apply the light theme by default
3034
@include mat.core-theme(my-theme.$light-theme);
3135
@include mat.button-theme(my-theme.$light-theme);
36+
37+
// When using system variables, remember to provide values for them
38+
// or uncomment the lines below to generate them from the theme.
39+
// @include mat.system-level-colors(my-theme.$light-theme);
40+
// @include mat.system-level-typography(my-theme.$light-theme);
3241
}
3342
```
3443

@@ -51,3 +60,5 @@ neutral color generated from Material based on the primary.
5160
* `directory` - Relative path to a directory within the project that the
5261
generated theme file should be created in. Defaults to the project root.
5362
* `themeTypes` - Theme types ('light', 'dark', or 'both') to generate themes for. Defaults to both.
63+
* `useSystemVariables` - Whether to generate a theme that uses system-level variables for easier
64+
dynamic theming. Defaults to false.

0 commit comments

Comments
 (0)