@@ -19,6 +19,10 @@ specified directory or the project root with the generated themes. The exported
19
19
themes (` $light-theme ` and/or ` $dark-theme ` ) can be provided to component theme
20
20
mixins.
21
21
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
+
22
26
``` scss
23
27
@use ' @angular/material' as mat ;
24
28
@use ' ./path/to/my-theme' ;
@@ -29,6 +33,11 @@ html {
29
33
// Apply the light theme by default
30
34
@include mat .core-theme (my-theme .$light-theme );
31
35
@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);
32
41
}
33
42
```
34
43
@@ -51,3 +60,5 @@ neutral color generated from Material based on the primary.
51
60
* ` directory ` - Relative path to a directory within the project that the
52
61
generated theme file should be created in. Defaults to the project root.
53
62
* ` 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