Skip to content

Commit

Permalink
docs(material/core): list out pre-built themes (angular#29251)
Browse files Browse the repository at this point in the history
Adds a table with all of the pre-built themes in the theming guide.

Fixes angular#29152.
  • Loading branch information
crisbeto authored Jun 13, 2024
1 parent 09df51d commit 209af0f
Show file tree
Hide file tree
Showing 3 changed files with 24 additions and 4 deletions.
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

0 comments on commit 209af0f

Please sign in to comment.