feat(material/schematics): Update custom theme schematic to work with light-dark and use theme-overrides mixin

Author: amysorto

src/material/schematics/ng-generate/theme-color/README.md

@@ -34,11 +34,46 @@ html {
 }
 ```
 
-High contrast override theme mixins are also generated in the file if specified
-(`high-contrast-light-theme-overrides` and `high-contrast-dark-theme-overrides`). These mixins
+## High contrast override mixins
+High contrast override theme mixins are also generated in the file if specified. These mixins
 override the system level variables with high contrast equivalent values from your theme. This is
 helpful for users who prefer more contrastful colors for either preference or accessibility reasons.
 
+### Creating one theme for light and dark mode
+As of v19, the `theme` mixin can create one theme that detects and adapts to a user if they have
+light or dark theme with the [`light-dark` function](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark).
+
+Use the `high-contrast-overrides` mixin which will also adapt accordingly.
+```scss
+@use '@angular/material';
+@use './path/to/my-theme'; // location of generated file
+
+html {
+  // Must specify color-scheme for theme mixin to automatically work
+  color-scheme: light;
+
+  // Create one theme that works automatically for light and dark theme
+  @include material.theme((
+    color: (
+      primary: my-theme.$primary-palette,
+      tertiary: my-theme.$tertiary-palette,
+    ),
+    typography: Roboto,
+    density: 0,
+  ));
+
+  // Use high contrast values when users prefer contrast
+  @media (prefers-contrast: more) {
+    @include my-theme.high-contrast-overrides();
+  }
+}
+```
+
+### Creating separate themes for light and dark mode
+You can manually define the light theme and dark theme separately. This is recommended if you need
+granular control over when to show each specific theme in your application. Prior to v19, this was
+the only way to create light and dark themes.
+
 ```scss
 @use '@angular/material';
 @use './path/to/my-theme'; // location of generated file
@@ -49,6 +84,7 @@ html {
     color: (
       primary: my-theme.$primary-palette,
       tertiary: my-theme.$tertiary-palette,
+      theme-type: light,
     ),
     typography: Roboto,
     density: 0,

src/material/schematics/ng-generate/theme-color/index.ts

@@ -236,7 +236,6 @@ function getHighContrastOverides(
   overrides.set('surface-dim', hexFromArgb(scheme.surfaceDim));
   overrides.set('surface-bright', hexFromArgb(scheme.surfaceBright));
   overrides.set('surface-container-lowest', hexFromArgb(scheme.surfaceContainerLowest));
-  overrides.set('surface-container-lowest', hexFromArgb(scheme.surfaceContainerLow));
   overrides.set('surface-container', hexFromArgb(scheme.surfaceContainer));
   overrides.set('surface-container-high', hexFromArgb(scheme.surfaceContainerHigh));
   overrides.set('surface-container-highest', hexFromArgb(scheme.surfaceContainerHighest));
@@ -278,22 +277,48 @@ function generateHighContrastOverrideMixinsSCSS(
   neutralPalette: TonalPalette,
   neutralVariantPalette: TonalPalette,
 ): string {
+  const lightOverrides = getHighContrastOverides(
+    primaryPalette,
+    secondaryPalette,
+    tertiaryPalette,
+    neutralPalette,
+    neutralVariantPalette,
+    /** isDark **/ false,
+  );
+
+  const darkOverrides = getHighContrastOverides(
+    primaryPalette,
+    secondaryPalette,
+    tertiaryPalette,
+    neutralPalette,
+    neutralVariantPalette,
+    /** isDark **/ true,
+  );
+
   let scss = '\n';
+
+  // Create high-contrast-overrides mixin which works with light-dark
+  // https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark
+  scss += '\n@mixin high-contrast-overrides {\n';
+  scss += '  @include mat.theme-overrides((\n';
+  for (const [key, value] of lightOverrides!.entries()) {
+    scss += '    ' + key + ': light-dark(' + value + ', ' + darkOverrides.get(key) + '),\n';
+  }
+  scss += '  ))\n';
+  scss += '};\n';
+
+  // Create high-contrast-light-theme-overrides and high-contrast-dark-theme-overrides mixins
   for (const themeType of ['light', 'dark']) {
-    const overrides = getHighContrastOverides(
-      primaryPalette,
-      secondaryPalette,
-      tertiaryPalette,
-      neutralPalette,
-      neutralVariantPalette,
-      themeType === 'dark',
-    );
     scss += '\n@mixin high-contrast-' + themeType + '-theme-overrides {\n';
+    scss += '  @include mat.theme-overrides((\n';
+    const overrides = themeType === 'light' ? lightOverrides : darkOverrides;
     for (const [key, value] of overrides!.entries()) {
-      scss += '  --mat-sys-' + key + ': ' + value + ';\n';
+      scss += '    ' + key + ': ' + value + ',\n';
     }
+    scss += '  ))\n';
     scss += '};\n';
   }
+
   return scss;
 }