Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion guides/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ determine which features to include:

1. Choose a prebuilt theme name, or "custom" for a custom theme:

You can choose from [prebuilt material design themes](https://material.angular.io/guide/theming#using-a-pre-built-theme) or set up an extensible [custom theme](https://material.angular.io/guide/theming#defining-a-theme).
You can choose from [prebuilt material design themes](https://material.angular.io/guide/theming#pre-built-themes) or set up an extensible [custom theme](https://material.angular.io/guide/theming#defining-a-theme).

2. Set up global Angular Material typography styles:

Expand Down
2 changes: 1 addition & 1 deletion guides/schematics.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ The Angular Material `ng add` schematic helps you set up an Angular CLI project

- Ensure [project dependencies](./getting-started#step-1-install-angular-material-angular-cdk-and-angular-animations) are placed in `package.json`
- Enable the [BrowserAnimationsModule](./getting-started#step-2-configure-animations) in your app module
- Add either a [prebuilt theme](./theming#using-a-pre-built-theme) or a [custom theme](./theming#defining-a-custom-theme)
- Add either a [prebuilt theme](./theming#pre-built-themes) or a [custom theme](./theming#defining-a-custom-theme)
- Add Roboto fonts to your `index.html`
- Add the [Material Icon font](./getting-started#step-6-optional-add-material-icons) to your `index.html`
- Add global styles to
Expand Down
24 changes: 22 additions & 2 deletions guides/theming.md
Original file line number Diff line number Diff line change
Expand Up @@ -91,8 +91,28 @@ more about these terms):

##### Pre-built themes

There are a number of color palettes available in `@angular/material` that can be
used with the `primary` and `tertiary` options:
Angular Material includes several pre-built theme CSS files, each with different palettes selected.
You can use one of these pre-built themes if you don't want to define a custom theme with Sass.

| Theme | Light or dark? | Specification |
|------------------------|----------------|----------------------------------|
| `azure-blue.css` | Light | Material Design 3 |
| `rose-red.css` | Light | Material Design 3 |
| `cyan-orange.css` | Dark | Material Design 3 |
| `magenta-violet.css` | Dark | Material Design 3 |
| `deeppurple-amber.css` | Light | Material Design 2 |
| `indigo-pink.css` | Light | Material Design 2 |
| `pink-bluegrey.css` | Dark | Material Design 2 |
| `purple-green.css` | Dark | Material Design 2 |

These files include the CSS for every component in the library. To include only the CSS for a subset
of components, you must use the Sass API detailed in [Defining a theme](#defining-a-theme) above.
You can [reference the source code for these pre-built themes](https://github.com/angular/components/blob/main/src/material/core/theming/prebuilt) to see examples of complete theme definitions.

##### Pre-defined palettes

The pre-built themes are based on a set of pre-defined palettes that can be used with the `primary`
and `tertiary` options:

- `$red-palette`
- `$green-palette`
Expand Down