Skip to content

Commit 209af0f

Browse files
authored
docs(material/core): list out pre-built themes (#29251)
Adds a table with all of the pre-built themes in the theming guide. Fixes #29152.
1 parent 09df51d commit 209af0f

File tree

3 files changed

+24
-4
lines changed

3 files changed

+24
-4
lines changed

guides/getting-started.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ determine which features to include:
2828

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

31-
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).
31+
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).
3232

3333
2. Set up global Angular Material typography styles:
3434

guides/schematics.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ The Angular Material `ng add` schematic helps you set up an Angular CLI project
2626

2727
- Ensure [project dependencies](./getting-started#step-1-install-angular-material-angular-cdk-and-angular-animations) are placed in `package.json`
2828
- Enable the [BrowserAnimationsModule](./getting-started#step-2-configure-animations) in your app module
29-
- Add either a [prebuilt theme](./theming#using-a-pre-built-theme) or a [custom theme](./theming#defining-a-custom-theme)
29+
- Add either a [prebuilt theme](./theming#pre-built-themes) or a [custom theme](./theming#defining-a-custom-theme)
3030
- Add Roboto fonts to your `index.html`
3131
- Add the [Material Icon font](./getting-started#step-6-optional-add-material-icons) to your `index.html`
3232
- Add global styles to

guides/theming.md

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -91,8 +91,28 @@ more about these terms):
9191

9292
##### Pre-built themes
9393

94-
There are a number of color palettes available in `@angular/material` that can be
95-
used with the `primary` and `tertiary` options:
94+
Angular Material includes several pre-built theme CSS files, each with different palettes selected.
95+
You can use one of these pre-built themes if you don't want to define a custom theme with Sass.
96+
97+
| Theme | Light or dark? | Specification |
98+
|------------------------|----------------|----------------------------------|
99+
| `azure-blue.css` | Light | Material Design 3 |
100+
| `rose-red.css` | Light | Material Design 3 |
101+
| `cyan-orange.css` | Dark | Material Design 3 |
102+
| `magenta-violet.css` | Dark | Material Design 3 |
103+
| `deeppurple-amber.css` | Light | Material Design 2 |
104+
| `indigo-pink.css` | Light | Material Design 2 |
105+
| `pink-bluegrey.css` | Dark | Material Design 2 |
106+
| `purple-green.css` | Dark | Material Design 2 |
107+
108+
These files include the CSS for every component in the library. To include only the CSS for a subset
109+
of components, you must use the Sass API detailed in [Defining a theme](#defining-a-theme) above.
110+
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.
111+
112+
##### Pre-defined palettes
113+
114+
The pre-built themes are based on a set of pre-defined palettes that can be used with the `primary`
115+
and `tertiary` options:
96116

97117
- `$red-palette`
98118
- `$green-palette`

0 commit comments

Comments
 (0)