Skip to content

Conversation

andrewseguin
Copy link
Contributor

@andrewseguin andrewseguin commented Jul 10, 2025

ng add no longer provides options to include the prebuilt themes. Instead, always add a custom theme with user-specified palettes

The prompt is still present as it is today, except without the "custom" option, so users are still picking between four pairs of palettes as seen on material.angular.dev

// Include theming for Angular Material with `mat.theme()`.
// This Sass mixin will define CSS variables that are used for styling Angular Material
// components according to the Material 3 design spec.
// Learn more about theming and how to use it for your application's
// custom components at https://material.angular.dev/guide/theming
@use '@angular/material' as mat;

html {
  @include mat.theme((
    color: (
      primary: mat.$azure-palette,
      tertiary: mat.$blue-palette,
    ),
    typography: Roboto,
    density: 0,
  ));

  // Default the application to a light color theme. This can be changed to
  // `dark` to enable the dark color theme, or to `light dark` to defer to the
  // user's system settings.
  color-scheme: light;

  // Set a default background, font and text colors for the application using
  // Angular Material's system-level CSS variables. Learn more about these
  // variables at https://material.angular.dev/guide/system-variables
  background-color: var(--mat-sys-surface);
  color: var(--mat-sys-on-surface);
  font: var(--mat-sys-body-medium);
}

Also, remove the option to insert typography styles. Users should just use the system variables defined in the theming docs

@andrewseguin andrewseguin requested a review from a team as a code owner July 10, 2025 22:03
@andrewseguin andrewseguin requested review from adolgachev and ok7sai and removed request for a team July 10, 2025 22:03
@andrewseguin andrewseguin added the target: patch This PR is targeted for the next patch release label Jul 10, 2025
@andrewseguin andrewseguin added the action: merge The PR is ready for merge by the caretaker label Jul 16, 2025
@andrewseguin andrewseguin merged commit ce40c02 into angular:main Jul 16, 2025
25 checks passed
@andrewseguin
Copy link
Contributor Author

The changes were merged into the following branches: main, 20.1.x

andrewseguin added a commit that referenced this pull request Jul 16, 2025
* fix(material/schematics): always add a custom theme with ng add

* fix(material/schematics): add link to system vars

(cherry picked from commit ce40c02)
@jkrems
Copy link

jkrems commented Jul 16, 2025

I think this might be causing issues when running ng add:

$ npx ng add @angular/material --theme custom --verbose --skip-confirmation
Skipping installation: Package already installed
UPDATE package.json (1144 bytes)
⠋ Installing packages (npm)...(node:52262) [DEP0190] DeprecationWarning: Passing args to a child process with shell option true can lead to security vulnerabilities, as the arguments are not escaped, only concatenated.
(Use `node --trace-deprecation ...` to show where the warning was created)
✔ Packages installed successfully.
Cannot read properties of undefined (reading 'primary')

@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Aug 16, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
action: merge The PR is ready for merge by the caretaker target: patch This PR is targeted for the next patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants