Skip to content

docs(material/core): list out pre-built themes #29251

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 13, 2024
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
Loading