I used the theme generator of angular material m3 (v18). The generated file look like this:
$_palettes: (
primary: (
0: #000000,
10: #001a43,
20: #002d6c,
...
$_rest: (
secondary: map.get($_palettes, secondary),
neutral: map.get($_palettes, neutral),
neutral-variant: map.get($_palettes, neutral-variant),
error: map.get($_palettes, error),
);
$_primary: map.merge(map.get($_palettes, primary), $_rest);
$_tertiary: map.merge(map.get($_palettes, tertiary), $_rest);
$light-theme: mat.define-theme((
color: (
theme-type: light,
primary: $_primary,
tertiary: $_tertiary,
// use-system-variables: true,
),
typography: (
plain-family: 'Roboto, sans-serif',
brand-family: 'Roboto, sans-serif',
// use-system-variables: true,
),
));
Now I have some questions about the generated code:
_primary
and_tertiary
both containssecondary
,neutral
anderror
. This is assigned to the color. Why can’t I assign secondary directly?- Is there a place inside the theme where I can store custom colors which doesn’t belong to a palette? As far as I understand, palettes are supposed to be a range of colors with different shade.
- In m2 it was possible to set the
mat-typography
class to body, so all elements used the correct font-family. Not sure why this has been removed. Is there something similar to make sure, elements like h2, h3… use the font-family which I assigned intypography
intheme
?