Skip to content

Commit d45aee8

Browse files
committed
Demo using the new API to implement dark theme & primary/accent/warn
1 parent ce8ea53 commit d45aee8

File tree

1 file changed

+45
-22
lines changed

1 file changed

+45
-22
lines changed

src/dev-app/theme-token-api.scss

Lines changed: 45 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use 'sass:map';
12
@use '@angular/material' as mat;
23
@use '@angular/material-experimental' as matx;
34

@@ -23,7 +24,7 @@ dev-app {
2324

2425
@include mat.core();
2526

26-
$light-theme: mat.define-light-theme((
27+
$theme: mat.define-light-theme((
2728
color: (
2829
primary: mat.define-palette(mat.$indigo-palette),
2930
accent: mat.define-palette(mat.$pink-palette),
@@ -32,35 +33,57 @@ $light-theme: mat.define-light-theme((
3233
density: 0,
3334
));
3435

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.
4738
html {
4839
@include matx.theme(
49-
$tokens: mat.m2-tokens-from-theme($light-theme),
40+
$tokens: mat.m2-tokens-from-theme($theme),
5041
$components: (
5142
matx.card(),
5243
matx.checkbox(),
5344
));
5445
}
5546

56-
// Set up dark theme.
5747

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.
5852
.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+
));
6689
}

0 commit comments

Comments
 (0)