From 0113a646e202acc16432b4b9796b04fa7abd695c Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Wed, 30 Jul 2025 18:51:44 +0200 Subject: [PATCH] fix(material/schematics): set generated font family on body The custom theme that we generate during `ng add` adds changes the `font` on the `html` element which is problematic, because it affects all the components where we use `rem` units. These changes move the styles to the `body` to resolve the issue. I've also changed the selector for the variables from `html` to `:root`. In practice they're the same, but `:root` seems to be the standard target for global variables. Fixes #31611. --- .../schematics/ng-add/theming/create-custom-theme.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/material/schematics/ng-add/theming/create-custom-theme.ts b/src/material/schematics/ng-add/theming/create-custom-theme.ts index 91c8b0ad9660..9a648ead5f45 100644 --- a/src/material/schematics/ng-add/theming/create-custom-theme.ts +++ b/src/material/schematics/ng-add/theming/create-custom-theme.ts @@ -7,7 +7,7 @@ */ /** Create custom theme for the given application configuration. */ -export function createCustomTheme(userPaletteChoice: string) { +export function createCustomTheme(userPaletteChoice: string): string { const colorPalettes = new Map([ ['azure-blue', {primary: 'azure', tertiary: 'blue'}], ['rose-red', {primary: 'rose', tertiary: 'red'}], @@ -31,7 +31,9 @@ html { typography: Roboto, density: 0, )); +} +body { // 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. @@ -43,5 +45,9 @@ html { background-color: var(--mat-sys-surface); color: var(--mat-sys-on-surface); font: var(--mat-sys-body-medium); -}`; + + // Reset the user agent margin. + margin: 0; +} +`; }