From 209af0f37e26e398a4ade3144f30ca2559dae07a Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Thu, 13 Jun 2024 18:04:48 +0200 Subject: [PATCH] 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. --- guides/getting-started.md | 2 +- guides/schematics.md | 2 +- guides/theming.md | 24 ++++++++++++++++++++++-- 3 files changed, 24 insertions(+), 4 deletions(-) diff --git a/guides/getting-started.md b/guides/getting-started.md index e22bd13a45c4..642cb730f1bb 100644 --- a/guides/getting-started.md +++ b/guides/getting-started.md @@ -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: diff --git a/guides/schematics.md b/guides/schematics.md index ab1b2cd44715..b12ddbd60a84 100644 --- a/guides/schematics.md +++ b/guides/schematics.md @@ -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 diff --git a/guides/theming.md b/guides/theming.md index bd204dfb19f6..633edf3d268f 100644 --- a/guides/theming.md +++ b/guides/theming.md @@ -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`