Skip to content

Commit

Permalink
fix(material/core): change ng-add to use mat.theme (#29990)
Browse files Browse the repository at this point in the history
* fix(material/core): change ng-add to use mat.theme

* fix(material/core): tests

---------

Co-authored-by: Andrew Seguin <andrewseguin@google.com>
(cherry picked from commit 0a5b036)
  • Loading branch information
andrewseguin committed Nov 11, 2024
1 parent 09da06b commit d0d59b7
Show file tree
Hide file tree
Showing 2 changed files with 12 additions and 28 deletions.
2 changes: 1 addition & 1 deletion src/material/schematics/ng-add/index.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ describe('ng-add schematic', () => {
const themeContent = buffer!.toString();

expect(themeContent).toContain(`@use '@angular/material' as mat;`);
expect(themeContent).toContain(`$material-theme: mat.define-theme((`);
expect(themeContent).toContain(`@include mat.theme((`);
});

it('should create a custom theme file if no SCSS file could be found', async () => {
Expand Down
38 changes: 11 additions & 27 deletions src/material/schematics/ng-add/theming/create-custom-theme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,32 +12,16 @@ export function createCustomTheme(name: string = 'app') {
// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@use '@angular/material' as mat;
// Plus imports for other components in your app.
// Define the theme object.
$${name}-theme: mat.define-theme((
color: (
theme-type: light,
primary: mat.$azure-palette,
tertiary: mat.$blue-palette,
),
density: (
scale: 0,
)
));
// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
:root {
@include mat.all-component-themes($${name}-theme);
}
// Comment out the line below if you want to use the pre-defined typography utility classes.
// For more information: https://material.angular.io/guide/typography#using-typography-styles-in-your-application.
// @include mat.typography-hierarchy($${name}-theme);
// Comment out the line below if you want to use the deprecated \`color\` inputs.
// @include mat.color-variants-backwards-compatibility($${name}-theme);
`;
html {
@include mat.theme((
color: (
theme-type: light,
primary: mat.$azure-palette,
tertiary: mat.$blue-palette,
),
typography: Roboto,
density: 0,
));
}`;
}

0 comments on commit d0d59b7

Please sign in to comment.