K5 Angular Schematics
Custom angular schematics
Installation
npm install --save-dev @k5tech/angular-schematicsSchematics
| Schematic | Example |
|---|---|
| mat-palette | ng generate mat-palette -c @k5tech/angular-schematics --primary '#00bcd4' --accent '#e91e63' |
Material Palette
The material palette (mat-palette) schematic generates an Angular Material Design compatible color palette.
ng generate mat-palette -c @k5tech/angular-schematics --primary '#HexColor' --accent '#HexColor'
The generated palette is named [theme].palette.scss and placed in the specified --path parameter directory. Variable names are prefixed this the --theme parameter value.
Options
| Parameter | Default | Description |
|---|---|---|
--primary |
#3f51b5 | Primary color hex code |
--accent |
#e91e63 | Accent color hex code |
--warn |
#f44336 | Warning color hex code |
--theme |
theme | Name of palette and scss file |
--path |
/ | The path to create the palette |
--sourceDir |
src | The path of the source directory |
Default output src/theme.palette.scss
$theme-dark-primary-text: rgba(black, 0.87);
$theme-light-primary-text: white;
$theme-mat-primary: (
50: #e8eaf6,
100: #c5cbe9,
200: #9fa8da,
300: #7985cb,
400: #5c6bc0,
500: #3f51b5,
600: #394aae,
700: #3140a5,
800: #29379d,
900: #1b278d,
A100: #c6cbff,
A200: #939dff,
A400: #606eff,
A700: #4757ff,
contrast: (
50: $theme-dark-primary-text,
100: $theme-dark-primary-text,
200: $theme-dark-primary-text,
300: $theme-dark-primary-text,
400: $theme-light-primary-text,
500: $theme-light-primary-text,
600: $theme-light-primary-text,
700: $theme-light-primary-text,
800: $theme-light-primary-text,
900: $theme-light-primary-text,
A100: $theme-dark-primary-text,
A200: $theme-dark-primary-text,
A400: $theme-light-primary-text,
A700: $theme-light-primary-text,
)
);
$theme-mat-accent: (
50: #fce4ec,
100: #f8bcd0,
200: #f48fb1,
300: #f06292,
400: #ec407a,
500: #e91e63,
600: #e61a5b,
700: #e31651,
800: #df1247,
900: #d90a35,
A100: #ffffff,
A200: #ffd0d8,
A400: #ff9dae,
A700: #ff8498,
contrast: (
50: $theme-dark-primary-text,
100: $theme-dark-primary-text,
200: $theme-dark-primary-text,
300: $theme-dark-primary-text,
400: $theme-light-primary-text,
500: $theme-light-primary-text,
600: $theme-light-primary-text,
700: $theme-light-primary-text,
800: $theme-light-primary-text,
900: $theme-light-primary-text,
A100: $theme-dark-primary-text,
A200: $theme-dark-primary-text,
A400: $theme-dark-primary-text,
A700: $theme-dark-primary-text,
)
);
$theme-mat-warn: (
50: #fee8e7,
100: #fcc7c3,
200: #faa19b,
300: #f77b72,
400: #f65f54,
500: #f44336,
600: #f33d30,
700: #f13429,
800: #ef2c22,
900: #ec1e16,
A100: #ffffff,
A200: #ffe9e9,
A400: #ffb8b6,
A700: #ff9f9c,
contrast: (
50: $theme-dark-primary-text,
100: $theme-dark-primary-text,
200: $theme-dark-primary-text,
300: $theme-dark-primary-text,
400: $theme-dark-primary-text,
500: $theme-light-primary-text,
600: $theme-light-primary-text,
700: $theme-light-primary-text,
800: $theme-light-primary-text,
900: $theme-light-primary-text,
A100: $theme-dark-primary-text,
A200: $theme-dark-primary-text,
A400: $theme-dark-primary-text,
A700: $theme-dark-primary-text,
)
);Tip: Using the angular cli
--forceparameter allows you to regenerate a palette file with new values.
Example
Regenerate to Nick's preferred.
ng generate mat-palette -c @k5tech/angular-schematics --dry-run=false --primary '#00bcd4' --accent '#e91e63' --force