fix(material/schematics): Change themeTypes to a single select instead of a multiselect prompt in M3 theme schematic (#28997)

Author: amysorto

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

@@ -25,9 +25,11 @@ mixins.
 
 @include mat.core();
 
-// Apply the light theme by default
-@include mat.core-theme(my-theme.$light-theme);
-@include mat.button-theme(my-theme.$light-theme);
+html {
+  // Apply the light theme by default
+  @include mat.core-theme(my-theme.$light-theme);
+  @include mat.button-theme(my-theme.$light-theme);
+}
 ```
 
 ## Options
@@ -48,5 +50,4 @@ tertiary color generated from Material based on the primary.
 neutral color generated from Material based on the primary.
 * `directory` - Relative path to a directory within the project that the
 generated theme file should be created in. Defaults to the project root.
-* `themeTypes` - List of theme types (light and dark) to generate themes for.
-Defaults to both light and dark.
+* `themeTypes` - Theme types ('light', 'dark', or 'both') to generate themes for. Defaults to both.

src/material/schematics/ng-generate/m3-theme/index.spec.ts

@@ -224,7 +224,7 @@ describe('material-m3-theme-schematic', () => {
     try {
       await runM3ThemeSchematic(runner, {
         primaryColor: '#fffff',
-        themeTypes: ['light'],
+        themeTypes: 'light',
       });
     } catch (e) {
       expect((e as Error).message).toBe(
@@ -236,15 +236,15 @@ describe('material-m3-theme-schematic', () => {
   it('should generate m3 theme file', async () => {
     const tree = await runM3ThemeSchematic(runner, {
       primaryColor: '#984061',
-      themeTypes: ['light'],
+      themeTypes: 'light',
     });
     expect(tree.exists('m3-theme.scss')).toBe(true);
   });
 
   it('should generate m3 theme file at specified path', async () => {
     const tree = await runM3ThemeSchematic(runner, {
       primaryColor: '#984061',
-      themeTypes: ['light'],
+      themeTypes: 'light',
       directory: 'projects/',
     });
     expect(tree.exists('projects/m3-theme.scss')).toBe(true);
@@ -253,21 +253,21 @@ describe('material-m3-theme-schematic', () => {
   it('should generate m3 theme file with correct indentation and formatting', async () => {
     const tree = await runM3ThemeSchematic(runner, {
       primaryColor: '#984061',
-      themeTypes: ['light', 'dark'],
+      themeTypes: 'both',
     });
     expect(tree.readText('m3-theme.scss')).toEqual(testM3ThemeScss);
   });
 
   it('should generate light theme when provided a primary color', async () => {
     const tree = await runM3ThemeSchematic(runner, {
       primaryColor: '#984061',
-      themeTypes: ['light'],
+      themeTypes: 'light',
     });
 
     const generatedSCSS = tree.readText('m3-theme.scss');
     const testSCSS = generateSCSSTheme(
       testM3ThemePalette,
-      ['light'],
+      'light',
       'Color palettes are generated from primary: #984061',
     );
 
@@ -278,13 +278,13 @@ describe('material-m3-theme-schematic', () => {
   it('should generate dark theme when provided a primary color', async () => {
     const tree = await runM3ThemeSchematic(runner, {
       primaryColor: '#984061',
-      themeTypes: ['dark'],
+      themeTypes: 'dark',
     });
 
     const generatedSCSS = tree.readText('m3-theme.scss');
     const testSCSS = generateSCSSTheme(
       testM3ThemePalette,
-      ['dark'],
+      'dark',
       'Color palettes are generated from primary: #984061',
     );
 
@@ -295,13 +295,13 @@ describe('material-m3-theme-schematic', () => {
   it('should generate light and dark theme when provided a primary color', async () => {
     const tree = await runM3ThemeSchematic(runner, {
       primaryColor: '#984061',
-      themeTypes: ['light', 'dark'],
+      themeTypes: 'both',
     });
 
     const generatedSCSS = tree.readText('m3-theme.scss');
     const testSCSS = generateSCSSTheme(
       testM3ThemePalette,
-      ['light', 'dark'],
+      'both',
       'Color palettes are generated from primary: #984061',
     );
 
@@ -313,7 +313,7 @@ describe('material-m3-theme-schematic', () => {
     const tree = await runM3ThemeSchematic(runner, {
       primaryColor: '#984061',
       secondaryColor: '#984061',
-      themeTypes: ['light', 'dark'],
+      themeTypes: 'both',
     });
 
     const generatedSCSS = tree.readText('m3-theme.scss');
@@ -325,7 +325,7 @@ describe('material-m3-theme-schematic', () => {
 
     const testSCSS = generateSCSSTheme(
       testPalette,
-      ['light', 'dark'],
+      'both',
       'Color palettes are generated from primary: #984061, secondary: #984061',
     );
 
@@ -338,7 +338,7 @@ describe('material-m3-theme-schematic', () => {
       primaryColor: '#984061',
       secondaryColor: '#984061',
       tertiaryColor: '#984061',
-      themeTypes: ['light', 'dark'],
+      themeTypes: 'both',
     });
 
     const generatedSCSS = tree.readText('m3-theme.scss');
@@ -351,7 +351,7 @@ describe('material-m3-theme-schematic', () => {
 
     const testSCSS = generateSCSSTheme(
       testPalette,
-      ['light', 'dark'],
+      'both',
       'Color palettes are generated from primary: #984061, secondary: #984061, tertiary: #984061',
     );
 
@@ -365,7 +365,7 @@ describe('material-m3-theme-schematic', () => {
       secondaryColor: '#984061',
       tertiaryColor: '#984061',
       neutralColor: '#984061',
-      themeTypes: ['light', 'dark'],
+      themeTypes: 'both',
     });
 
     const generatedSCSS = tree.readText('m3-theme.scss');
@@ -379,7 +379,7 @@ describe('material-m3-theme-schematic', () => {
 
     const testSCSS = generateSCSSTheme(
       testPalette,
-      ['light', 'dark'],
+      'both',
       'Color palettes are generated from primary: #984061, secondary: #984061, tertiary: #984061, neutral: #984061',
     );
 

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

@@ -98,13 +98,13 @@ function getColorPalettesSCSS(colorPalettes: Map<string, Map<number, string>>):
 /**
  * Gets the generated scss from the provided color palettes and theme types.
  * @param colorPalettes Map of colors and their hue tones and values.
- * @param themeTypes List of theme types for the theme (ex. ['light', 'dark']).
+ * @param themeTypes Theme types for the theme (ex. 'light', 'dark', or 'both').
  * @param colorComment Comment with original hex colors used to generate palettes.
  * @returns String of the generated theme scss.
  */
 export function generateSCSSTheme(
   colorPalettes: Map<string, Map<number, string>>,
-  themeTypes: string[],
+  themeTypes: string,
   colorComment: string,
 ): string {
   let scss = [
@@ -128,9 +128,10 @@ export function generateSCSSTheme(
     '',
   ];
 
+  let themes = themeTypes === 'both' ? ['light', 'dark'] : [themeTypes];
   // Note: Call define-theme function here since creating the color tokens
   // from the palettes is a private function
-  for (const themeType of themeTypes) {
+  for (const themeType of themes) {
     scss = scss.concat([
       '$' + themeType + '-theme: mat.define-theme((',
       '  color: (',
@@ -173,9 +174,9 @@ export default function (options: Schema): Rule {
       colorComment += ', neutral: ' + options.neutralColor;
     }
 
-    if (options.themeTypes.length === 0) {
+    if (!options.themeTypes) {
       context.logger.info('No theme types specified, creating both light and dark themes.');
-      options.themeTypes = ['light', 'dark'];
+      options.themeTypes = 'both';
     }
 
     const themeScss = generateSCSSTheme(colorPalettes, options.themeTypes, colorComment);

src/material/schematics/ng-generate/m3-theme/schema.d.ts

@@ -24,10 +24,10 @@ export interface Schema {
    */
   neutralColor?: string;
   /**
-   * Type for theme (ex. 'light' and/or 'dark')
+   * Type for theme (ex. 'light', 'dark', or 'both').
    */
-  themeTypes: string[];
-  /**
+  themeTypes?: string;
+  /*
    * Workspace-relative path to a directory where the file with the custom M3
    * theme will be generated.
    *

src/material/schematics/ng-generate/m3-theme/schema.json

@@ -30,27 +30,10 @@
       "x-prompt": "What is the directory you want to place the generated theme file in? (Enter the relative path such as 'src/app/styles/' or leave blank to generate at your project root)"
     },
     "themeTypes": {
-      "type": "array",
-      "items": {
-        "type": "string",
-        "enum": ["light", "dark"]
-      },
+      "type": "string",
+      "enum": ["light", "dark", "both"],
       "description": "The components to migrate.",
-      "x-prompt": {
-        "message": "Choose light, dark, or both to generate the corresponding themes",
-        "type": "list",
-        "multiselect": true,
-        "items": [
-          {
-            "value": "light",
-            "label": "light"
-          },
-          {
-            "value": "dark",
-            "label": "dark"
-          }
-        ]
-      }
+      "x-prompt": "Choose light, dark, or both to generate the corresponding themes"
     }
   }
 }