diff --git a/src/material/schematics/ng-generate/m3-theme/README.md b/src/material/schematics/ng-generate/m3-theme/README.md index e191a0a2bd69..a9f6b22d8f2c 100644 --- a/src/material/schematics/ng-generate/m3-theme/README.md +++ b/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. diff --git a/src/material/schematics/ng-generate/m3-theme/index.spec.ts b/src/material/schematics/ng-generate/m3-theme/index.spec.ts index 9ad4f3abad98..7d116532b634 100644 --- a/src/material/schematics/ng-generate/m3-theme/index.spec.ts +++ b/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,7 +236,7 @@ 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); }); @@ -244,7 +244,7 @@ describe('material-m3-theme-schematic', () => { 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,7 +253,7 @@ 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); }); @@ -261,13 +261,13 @@ describe('material-m3-theme-schematic', () => { 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', ); diff --git a/src/material/schematics/ng-generate/m3-theme/index.ts b/src/material/schematics/ng-generate/m3-theme/index.ts index 9449f406029f..792c032b3db8 100644 --- a/src/material/schematics/ng-generate/m3-theme/index.ts +++ b/src/material/schematics/ng-generate/m3-theme/index.ts @@ -98,13 +98,13 @@ function getColorPalettesSCSS(colorPalettes: Map>): /** * 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>, - 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); diff --git a/src/material/schematics/ng-generate/m3-theme/schema.d.ts b/src/material/schematics/ng-generate/m3-theme/schema.d.ts index c02e782c2bbb..59d25b5ebe59 100644 --- a/src/material/schematics/ng-generate/m3-theme/schema.d.ts +++ b/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. * diff --git a/src/material/schematics/ng-generate/m3-theme/schema.json b/src/material/schematics/ng-generate/m3-theme/schema.json index f303c3063d59..97ba4d8dfd2f 100644 --- a/src/material/schematics/ng-generate/m3-theme/schema.json +++ b/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" } } }