1
+ @use ' sass:map' ;
1
2
@use ' @angular/material' as mat ;
2
3
@use ' @angular/material-experimental' as matx ;
3
4
@@ -23,7 +24,7 @@ dev-app {
23
24
24
25
@include mat .core ();
25
26
26
- $light- theme : mat .define-light-theme ((
27
+ $theme : mat .define-light-theme ((
27
28
color : (
28
29
primary: mat .define-palette (mat .$indigo-palette ),
29
30
accent: mat .define-palette (mat .$pink-palette ),
@@ -32,35 +33,57 @@ $light-theme: mat.define-light-theme((
32
33
density: 0 ,
33
34
));
34
35
35
- $dark-theme : mat .define-dark-theme ((
36
- color : (
37
- primary: mat .define-palette (mat .$blue-grey-palette ),
38
- accent: mat .define-palette (mat .$amber-palette , A200 , A100 , A400 ),
39
- warn: mat .define-palette (mat .$deep-orange-palette ),
40
- ),
41
- typography: mat .define-typography-config (),
42
- density: 0 ,
43
- ));
44
-
45
- // Set up light theme.
46
-
36
+ // Apply all tokens (derived from `$light-theme`) to the `html` element.
37
+ // This ensures that all components on the page will inherit these tokens.
47
38
html {
48
39
@include matx .theme (
49
- $tokens : mat .m2-tokens-from-theme ($light- theme ),
40
+ $tokens : mat .m2-tokens-from-theme ($theme ),
50
41
$components : (
51
42
matx .card (),
52
43
matx .checkbox (),
53
44
));
54
45
}
55
46
56
- // Set up dark theme.
57
47
48
+ // Apply tokens needed for dark theme to the element with `.demo-unicorn-dark-theme`.
49
+ // This ensures that checkboxes within the element inherit the new tokens for dark theme,
50
+ // rather than the ones for light theme tokens set on `body`. Note that we're not setting *all* of
51
+ // the tokens, since many (density, typography, etc) are the same between light and dark theme.
58
52
.demo-unicorn-dark-theme {
59
- @include matx .theme (
60
- $tokens : mat .m2-tokens-from-theme ($dark-theme ),
61
- $components : (
62
- matx .checkbox ((
63
- checkmark- color: red ,
64
- )),
65
- ));
53
+ @include matx .retheme ($components : (
54
+ // TODO(mmalerba): In the future this should be configured through `matx.system-colors()`
55
+ matx .checkbox ((theme- type: dark )),
56
+ matx .card ((theme- type: dark )),
57
+ ));
58
+ }
59
+
60
+ // Apply tokens related to the color palette to any element with `.mat-primary`, `.mat-accent`, or
61
+ // `.mat-warn` This ensures that checkboxes within the element inherit the new tokens for the
62
+ // appropriate palette, rather than the any color that may have been set on an element further up
63
+ // the hierarchy. Again, rather than applying *all* the tokens, we apply only the ones effected by
64
+ // the palette color. With this setup, the palette class need not go on the component itself
65
+ // (e.g. <mat-checkbox class="mat-primary">), it can go on some ancestor element and the tokens will
66
+ // flow down. If multiple elements specify different classes, the closest one to the component will
67
+ // take precedence.
68
+ // (e.g. <div class="mat-warn><mat-checkbox class="mat-primary">I'm primary</mat-checkbox></div>)
69
+ .mat-primary {
70
+ @include matx .retheme ($components : (
71
+ matx .checkbox ((
72
+ color- palette: map .get ($theme , color , primary )
73
+ )),
74
+ ));
75
+ }
76
+ .mat-accent {
77
+ @include matx .retheme ($components : (
78
+ matx .checkbox ((
79
+ color- palette: map .get ($theme , color , accent )
80
+ )),
81
+ ));
82
+ }
83
+ .mat-warn {
84
+ @include matx .retheme ($components : (
85
+ matx .checkbox ((
86
+ color- palette: map .get ($theme , color , warn )
87
+ )),
88
+ ));
66
89
}
0 commit comments