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<string, {primary: string; tertiary: string}>([
     ['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;
+}
+`;
 }