fix(material/core): add flag whether to copy color theme values (#25695)

* fix(material/core): add flag whether to copy color theme values

* fix(material/core): remove legacy theming in devapp

src/dev-app/theme.scss

@@ -45,7 +45,17 @@ $candy-app-theme: mat.define-light-theme((
   $dark-primary: mat.define-palette(mat.$blue-grey-palette);
   $dark-accent: mat.define-palette(mat.$amber-palette, A200, A100, A400);
   $dark-warn: mat.define-palette(mat.$deep-orange-palette);
-  $dark-colors: mat.define-dark-theme($dark-primary, $dark-accent, $dark-warn);
+  $dark-colors: mat.define-dark-theme(
+      (
+        color: (
+          primary: $dark-primary,
+          accent: $dark-accent,
+          warn: $dark-warn
+        ),
+        density: 0,
+        typography: mat.define-typography-config(),
+      )
+  );
 
   // Include the dark theme color styles.
   @include mat.all-component-colors($dark-colors);
@@ -55,7 +65,7 @@ $candy-app-theme: mat.define-light-theme((
 
   // Include the dark theme colors for focus indicators.
   &.demo-strong-focus {
-    @include mat.strong-focus-indicators-theme($dark-colors);
+    @include mat.strong-focus-indicators-color($dark-colors);
   }
 }
 

src/material/core/theming/_theming.scss

@@ -25,6 +25,10 @@ $_legacy-theme-warning: 'Angular Material themes should be created from a map co
 // comprehensive theme configurations.
 $_enable-strict-theme-config: false;
 
+// Flag whether to disable theme definitions copying color values to the top-level theme config.
+// This copy is to preserve backwards compatibility.
+$_disable-color-backwards-compatibility: false;
+
 // These variable are not intended to be overridden externally. They use `!default` to
 // avoid being reset every time this file is imported.
 $_emitted-color: () !default;
@@ -436,7 +440,7 @@ $_emitted-density: () !default;
 // is stored in `$theme.color` which contains a property for `primary`. This method copies
 // the map from `$theme.color` to `$theme` for backwards compatibility.
 @function private-create-backwards-compatibility-theme($theme) {
-  @if not map.get($theme, color) {
+  @if ($_disable-color-backwards-compatibility or not map.get($theme, color)) {
     @return $theme;
   }
   $color: map.get($theme, color);