@@ -5,12 +5,12 @@ defining a custom theme. Angular Material’s theming system is inspired by
5
5
Google’s [ Material Design] ( https://m3.material.io/styles ) .
6
6
7
7
This guide describes how to set up theming for your application using
8
- Sass APIs introduced in Angular Material v19.
8
+ Sass APIs introduced in Angular Material v19.
9
9
10
10
If your application depends on a version before v19, or if your application's
11
- theme is applied using a theme config created with ` mat.define-theme ` ,
11
+ theme is applied using a theme config created with ` mat.define-theme ` ,
12
12
` mat.define-light-theme ` , or ` mat.define-dark-theme ` ,
13
- then you can refer to the theming guides at
13
+ then you can refer to the theming guides at
14
14
[ v18.material.angular.dev/guides] ( https://v18.material.angular.dev/guides ) .
15
15
16
16
## Getting Started
@@ -62,7 +62,7 @@ The `mat.theme` mixin will only declare CSS variables for the categories
62
62
included in the input. For example, if ` typography ` is not defined, then
63
63
typography CSS variables will not be included in the output.
64
64
65
- ### ** Color**
65
+ ### Color
66
66
67
67
The ` theme ` ‘s color determines the component color styles, such as the fill
68
68
color of checkboxes or ripple color of buttons. It depends on color palettes of
@@ -74,14 +74,14 @@ palettes.
74
74
You can set the color in one of two ways: as a single color palette, or as a
75
75
color map.
76
76
77
- #### * Single Color Palette*
77
+ #### Single Color Palette
78
78
79
79
If you provide a single color palette, Angular Material uses its values for the
80
80
theme’s primary, secondary, and tertiary colors. The CSS color values will be
81
81
defined using ` light-dark ` CSS color function. Your application styles should
82
82
define an explicit value declaration for the ` color-scheme ` CSS property.
83
83
84
- #### * Color Map*
84
+ #### Color Map
85
85
86
86
If you provide a color map, then the tertiary color palette can be configured
87
87
separately from the primary palette. The tertiary palette can be used to add a
@@ -121,21 +121,21 @@ html {
121
121
}
122
122
```
123
123
124
- ### ** Typography**
124
+ ### Typography
125
125
126
126
The ` mat.theme ` ‘s typography determines the text styles used in components,
127
127
such as the font for dialog titles or menu list items.
128
128
129
129
You can set the typography in one of two ways: as a single font family value, or
130
130
as a typography map.
131
131
132
- #### * Single Font Family Value*
132
+ #### Single Font Family Value
133
133
134
134
If you provide a font family, Angular Material uses it for all the text in its
135
135
components. The font weights used in components are set to 700 for bold text,
136
136
500 for medium text, and 400 for regular text.
137
137
138
- #### * Typography Map*
138
+ #### Typography Map
139
139
140
140
If you provide a typography map, then distinct font families are set for plain
141
141
and brand text. The plain font family is typically used for most of the
@@ -168,7 +168,7 @@ html {
168
168
}
169
169
```
170
170
171
- ### ** Density**
171
+ ### Density
172
172
173
173
The ` mat.theme ` ‘s density value determines the spacing within components, such
174
174
as how much padding is used around a button’s text or the height of form fields.
@@ -202,31 +202,31 @@ pop-up contexts, such as the date picker. The Material Design density guidance
202
202
explicitly discourages changes to density for such interactions because they
203
203
don't compete for space in the application's layout.
204
204
205
- ## ** Color Palettes**
205
+ ## Color Palettes
206
206
207
207
A color palette is a set of similar colors with different hues ranging from
208
208
light to dark. The Angular Material theme uses color palettes to create a color
209
209
scheme to communicate an application’s hierarchy, state, and brand.
210
210
211
- ### ** Prebuilt Color Palettes**
211
+ ### Prebuilt Color Palettes
212
212
213
213
Angular Material provides twelve prebuilt color palettes that can be used for
214
214
your application’s theme:
215
215
216
- * ` $red-palette `
217
- * ` $green-palette `
218
- * ` $blue-palette `
219
- * ` $yellow-palette `
220
- * ` $cyan-palette `
221
- * ` $magenta-palette `
222
- * ` $orange-palette `
223
- * ` $chartreuse-palette `
224
- * ` $spring-green-palette `
225
- * ` $azure-palette `
226
- * ` $violet-palette `
227
- * ` $rose-palette `
228
-
229
- ### ** Custom Color Palettes**
216
+ * ` $red-palette `
217
+ * ` $green-palette `
218
+ * ` $blue-palette `
219
+ * ` $yellow-palette `
220
+ * ` $cyan-palette `
221
+ * ` $magenta-palette `
222
+ * ` $orange-palette `
223
+ * ` $chartreuse-palette `
224
+ * ` $spring-green-palette `
225
+ * ` $azure-palette `
226
+ * ` $violet-palette `
227
+ * ` $rose-palette `
228
+
229
+ ### Custom Color Palettes
230
230
231
231
The Angular Material
232
232
[ palette generation schematic] ( https://github.com/angular/components/blob/main/src/material/schematics/ng-generate/theme-color/README.md )
@@ -238,7 +238,7 @@ neutral palettes:
238
238
ng generate @angular/material:theme-color
239
239
```
240
240
241
- ## ** Loading Fonts**
241
+ ## Loading Fonts
242
242
243
243
You can use Google Fonts as one option to load fonts in your application. For
244
244
example, the following code in an application’s ` <head> ` loads the font family
@@ -256,7 +256,7 @@ default, projects created with the Angular CLI are
256
256
[ configured] ( https://angular.dev/reference/configs/workspace-config#fonts-optimization-options )
257
257
to inline assets from Google Fonts to reduce render-blocking requests.
258
258
259
- ## ** Supporting Light and Dark Mode**
259
+ ## Supporting Light and Dark Mode
260
260
261
261
By default, the ` mat.theme ` mixin defines colors using the CSS color function
262
262
` light-dark ` to make it easy for your application to switch between light and
@@ -310,12 +310,12 @@ define your own queries to apply the styles that make sense for your users. This
310
310
may mean relying on ` color-scheme: light dark ` , defining custom media queries,
311
311
or reading a saved user preference to apply styles.
312
312
313
- ## ** Multiple Themes**
313
+ ## Multiple Themes
314
314
315
315
You can call the ` mat.theme ` mixin more than once to apply multiple different
316
316
color schemes in your application.
317
317
318
- ### ** Context-specific Themes**
318
+ ### Context-specific Themes
319
319
320
320
The following example theme file customizes the theme for components in
321
321
different contexts. In this case, a cyan-based palette is applied to a container
@@ -340,7 +340,7 @@ html {
340
340
}
341
341
```
342
342
343
- ## ** Using Theme Styles**
343
+ ## Using Theme Styles
344
344
345
345
An application’s custom components can use the CSS variables defined by
346
346
` mat.theme ` to apply the theme’s colors and typography.
@@ -369,7 +369,7 @@ See the [Theme Variables](https://material.angular.dev/guide/system-variables) g
369
369
comprehensive list of these variables, examples of where they are used, and how
370
370
components can depend on them.
371
371
372
- ## ** Customizing Tokens**
372
+ ## Customizing Tokens
373
373
374
374
Angular Material components also allow for narrowly targeted customization of
375
375
specific tokens through the ` overrides ` mixins. This enables fine-grained
@@ -380,7 +380,7 @@ The `overrides` API validates that the customized tokens are correctly spelled
380
380
and can be used to ensure backwards compatibility if tokens are added, moved, or
381
381
renamed in future versions.
382
382
383
- ### ** System Tokens**
383
+ ### System Tokens
384
384
385
385
System-level tokens can be changed to different values through the
386
386
` mat.theme-overrides ` mixin, which will redefine CSS variables that are used in
@@ -426,7 +426,7 @@ html {
426
426
}
427
427
```
428
428
429
- ### ** Component Tokens**
429
+ ### Component Tokens
430
430
431
431
Each Angular Material component defines an ` overrides ` mixin that can be used to
432
432
customize tokenized styles for their color, typography, and density.
@@ -449,7 +449,7 @@ html {
449
449
}
450
450
```
451
451
452
- ### ** Direct Style Overrides**
452
+ ### Direct Style Overrides
453
453
454
454
Angular Material supports customizing color, typography, and density as outlined
455
455
in this document. Angular strongly discourages, and does not directly support,
@@ -458,7 +458,7 @@ structure and CSS classes are considered private implementation details that may
458
458
change at any time. CSS variables used by the Angular Material components should
459
459
be defined through the ` overrides ` API instead of defined explicitly.
460
460
461
- ## ** Shadow DOM**
461
+ ## Shadow DOM
462
462
463
463
Angular Material assumes that, by default, all theme styles are loaded as global
464
464
CSS. If you want to use
0 commit comments