diff --git a/src/material/core/theming/_theming.scss b/src/material/core/theming/_theming.scss
index 767268e8de79..65782a06f65c 100644
--- a/src/material/core/theming/_theming.scss
+++ b/src/material/core/theming/_theming.scss
@@ -67,20 +67,20 @@ $_emitted-density: () !default;
 @function define-palette($base-palette, $default: 500, $lighter: 100, $darker: 700,
   $text: $default) {
   $result: map.merge($base-palette, (
-    default: _get-color-from-palette($base-palette, $default),
-    lighter: _get-color-from-palette($base-palette, $lighter),
-    darker: _get-color-from-palette($base-palette, $darker),
-    text: _get-color-from-palette($base-palette, $text),
-
-    default-contrast: get-contrast-color-from-palette($base-palette, $default),
-    lighter-contrast: get-contrast-color-from-palette($base-palette, $lighter),
-    darker-contrast: get-contrast-color-from-palette($base-palette, $darker)
+          default: _get-color-from-palette($base-palette, $default),
+          lighter: _get-color-from-palette($base-palette, $lighter),
+          darker: _get-color-from-palette($base-palette, $darker),
+          text: _get-color-from-palette($base-palette, $text),
+
+          default-contrast: get-contrast-color-from-palette($base-palette, $default),
+          lighter-contrast: get-contrast-color-from-palette($base-palette, $lighter),
+          darker-contrast: get-contrast-color-from-palette($base-palette, $darker)
   ));
 
   // For each hue in the palette, add a "-contrast" color to the map.
   @each $hue, $color in $base-palette {
     $result: map.merge($result, (
-      '#{$hue}-contrast': get-contrast-color-from-palette($base-palette, $hue)
+            '#{$hue}-contrast': get-contrast-color-from-palette($base-palette, $hue)
     ));
   }
 
@@ -138,27 +138,27 @@ $_emitted-density: () !default;
 
 // Creates a light-themed color configuration from the specified
 // primary, accent and warn palettes.
-@function _mat-create-light-color-config($primary, $accent, $warn: null) {
+@function _mat-create-light-color-config($primary, $accent, $warn: null, $foreground: (), $background: ()) {
   @return (
-    primary: $primary,
-    accent: $accent,
-    warn: if($warn != null, $warn, define-palette(palette.$red-palette)),
-    is-dark: false,
-    foreground: palette.$light-theme-foreground-palette,
-    background: palette.$light-theme-background-palette,
+          primary: $primary,
+          accent: $accent,
+          warn: if($warn != null, $warn, define-palette(palette.$red-palette)),
+          is-dark: false,
+          foreground: map.merge(palette.$light-theme-foreground-palette, $foreground),
+          background: map.merge(palette.$light-theme-background-palette, $background),
   );
 }
 
 // Creates a dark-themed color configuration from the specified
 // primary, accent and warn palettes.
-@function _mat-create-dark-color-config($primary, $accent, $warn: null) {
+@function _mat-create-dark-color-config($primary, $accent, $warn: null, $foreground: (), $background: ()) {
   @return (
-    primary: $primary,
-    accent: $accent,
-    warn: if($warn != null, $warn, define-palette(palette.$red-palette)),
-    is-dark: true,
-    foreground: palette.$dark-theme-foreground-palette,
-    background: palette.$dark-theme-background-palette,
+          primary: $primary,
+          accent: $accent,
+          warn: if($warn != null, $warn, define-palette(palette.$red-palette)),
+          is-dark: true,
+          foreground: map.merge(palette.$dark-theme-foreground-palette, $foreground),
+          background: map.merge(palette.$dark-theme-background-palette, $background),
   );
 }
 
@@ -168,7 +168,8 @@ $_emitted-density: () !default;
 /// Creates a container object for a light theme to be given to individual component theme mixins.
 /// @param {Map} $primary The theme configuration object.
 /// @returns {Map} A complete Angular Material theme map.
-@function define-light-theme($primary, $accent: null, $warn: define-palette(palette.$red-palette)) {
+@function define-light-theme($primary, $accent: null, $warn: define-palette(palette.$red-palette),
+  $foreground: null, $background: null) {
   // This function creates a container object for the individual component theme mixins. Consumers
   // can construct such an object by calling this function, or by building the object manually.
   // There are two possible ways to invoke this function in order to create such an object:
@@ -185,8 +186,8 @@ $_emitted-density: () !default;
   @if $accent != null {
     @warn $_legacy-theme-warning;
     @return private-create-backwards-compatibility-theme(_mat-validate-theme((
-      _is-legacy-theme: true,
-      color: _mat-create-light-color-config($primary, $accent, $warn),
+            _is-legacy-theme: true,
+            color: _mat-create-light-color-config($primary, $accent, $warn, $foreground, $background),
     )));
   }
   // If the map pattern is used (1), we just pass-through the configurations for individual
@@ -198,7 +199,9 @@ $_emitted-density: () !default;
     $primary: map.get($color-settings, primary);
     $accent: map.get($color-settings, accent);
     $warn: map.get($color-settings, warn);
-    $result: map.merge($result, (color: _mat-create-light-color-config($primary, $accent, $warn)));
+    $background: map.get($color-settings, background);
+    $foreground: map.get($color-settings, foreground);
+    $result: map.merge($result, (color: _mat-create-light-color-config($primary, $accent, $warn, $foreground, $background)));
   }
   @return private-create-backwards-compatibility-theme(_mat-validate-theme($result));
 }
@@ -209,7 +212,8 @@ $_emitted-density: () !default;
 /// Creates a container object for a dark theme to be given to individual component theme mixins.
 /// @param {Map} $primary The theme configuration object.
 /// @returns {Map} A complete Angular Material theme map.
-@function define-dark-theme($primary, $accent: null, $warn: define-palette(palette.$red-palette)) {
+@function define-dark-theme($primary, $accent: null, $warn: define-palette(palette.$red-palette),
+  $foreground: null, $background: null) {
   // This function creates a container object for the individual component theme mixins. Consumers
   // can construct such an object by calling this function, or by building the object manually.
   // There are two possible ways to invoke this function in order to create such an object:
@@ -226,8 +230,8 @@ $_emitted-density: () !default;
   @if $accent != null {
     @warn $_legacy-theme-warning;
     @return private-create-backwards-compatibility-theme(_mat-validate-theme((
-      _is-legacy-theme: true,
-      color: _mat-create-dark-color-config($primary, $accent, $warn),
+            _is-legacy-theme: true,
+            color: _mat-create-dark-color-config($primary, $accent, $warn, $foreground, $background),
     )));
   }
   // If the map pattern is used (1), we just pass-through the configurations for individual
@@ -239,7 +243,9 @@ $_emitted-density: () !default;
     $primary: map.get($color-settings, primary);
     $accent: map.get($color-settings, accent);
     $warn: map.get($color-settings, warn);
-    $result: map.merge($result, (color: _mat-create-dark-color-config($primary, $accent, $warn)));
+    $background: map.get($color-settings, background);
+    $foreground: map.get($color-settings, foreground);
+    $result: map.merge($result, (color: _mat-create-dark-color-config($primary, $accent, $warn, $foreground, $background)));
   }
   @return private-create-backwards-compatibility-theme(_mat-validate-theme($result));
 }
@@ -462,8 +468,8 @@ $_emitted-density: () !default;
 
   @warn $_legacy-theme-warning;
   @return private-create-backwards-compatibility-theme((
-    _is-legacy-theme: true,
-    color: $theme-or-color-config
+          _is-legacy-theme: true,
+          color: $theme-or-color-config
   ));
 }