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 contains secondary
, neutral
and error
. This is assigned to the color. Why can't I assign secondary directly?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 in typography
in theme
?If you want to set secondary directly, you can modify the colors of secondary collection in the primary palette. The tertiary secondary palette is discarded.
Why this might be done, is to simplify the color palettes of angular, or maybe to stick to M3 design standards.
You can create your own custom SCSS/CSS variables and use them through the application.
You might have a tough time access SCSS variables from other components, in that scenario, CSS variables are better.
:root {
--some-var: #000000;
}
$some-var: #ffffff
Yes, on the theme definition we have the option to define typography, this will get applied throughout the application.
$theme: mat.define-theme((
typography: (
brand-family: Comic Sans,
plain-family: Wingdings,
bold-weight: 300,
medium-weight: 200,
regular-weight: 100,
)
));