138 lines
3.2 KiB
SCSS
138 lines
3.2 KiB
SCSS
// Custom Theming for Angular Material
|
|
// For more information: https://material.angular.io/guide/theming
|
|
@import '~@angular/material/theming';
|
|
// Plus imports for other components in your app.
|
|
|
|
$custom-typography: mat-typography-config(
|
|
$font-family: "Open Sans"
|
|
);
|
|
|
|
// Include the common styles for Angular Material. We include this here so that you only
|
|
// have to load a single css file for Angular Material in your app.
|
|
// Be sure that you only ever include this mixin once!
|
|
@include mat-core($custom-typography);
|
|
|
|
// Define the palettes for your theme using the Material Design palettes available in palette.scss
|
|
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
|
|
// hue. Available color palettes: https://material.io/design/color/
|
|
$theme-primary: mat-palette((
|
|
50 : #e0e0e0,
|
|
100 : #b3b3b3,
|
|
200 : #808080,
|
|
300 : #4d4d4d,
|
|
400 : #262626,
|
|
500 : #000000,
|
|
600 : #000000,
|
|
700 : #000000,
|
|
800 : #000000,
|
|
900 : #000000,
|
|
A100 : #a6a6a6,
|
|
A200 : #8c8c8c,
|
|
A400 : #737373,
|
|
A700 : #666666,
|
|
contrast: (
|
|
50 : #000000,
|
|
100 : #000000,
|
|
200 : #000000,
|
|
300 : #ffffff,
|
|
400 : #ffffff,
|
|
500 : #ffffff,
|
|
600 : #ffffff,
|
|
700 : #ffffff,
|
|
800 : #ffffff,
|
|
900 : #ffffff,
|
|
A100 : #000000,
|
|
A200 : #000000,
|
|
A400 : #ffffff,
|
|
A700 : #ffffff,
|
|
)));
|
|
$theme-accent: mat-palette((
|
|
50 : #edf9e0,
|
|
100 : #d1f0b3,
|
|
200 : #b3e680,
|
|
300 : #94db4d,
|
|
400 : #7dd426,
|
|
500 : #66cc00,
|
|
600 : #5ec700,
|
|
700 : #53c000,
|
|
800 : #49b900,
|
|
900 : #38ad00,
|
|
A100 : #e1ffd7,
|
|
A200 : #baffa4,
|
|
A400 : #94ff71,
|
|
A700 : #81ff58,
|
|
contrast: (
|
|
50 : #000000,
|
|
100 : #000000,
|
|
200 : #000000,
|
|
300 : #000000,
|
|
400 : #000000,
|
|
500 : #000000,
|
|
600 : #000000,
|
|
700 : #000000,
|
|
800 : #000000,
|
|
900 : #ffffff,
|
|
A100 : #000000,
|
|
A200 : #000000,
|
|
A400 : #000000,
|
|
A700 : #000000,
|
|
)
|
|
));
|
|
$theme-warning: mat-palette((
|
|
50 : #fff8e4,
|
|
100 : #feefbd,
|
|
200 : #fee491,
|
|
300 : #fdd964,
|
|
400 : #fcd043,
|
|
500 : #fcc822,
|
|
600 : #fcc21e,
|
|
700 : #fbbb19,
|
|
800 : #fbb414,
|
|
900 : #faa70c,
|
|
A100 : #ffffff,
|
|
A200 : #fffaf1,
|
|
A400 : #ffe6be,
|
|
A700 : #ffdca4,
|
|
contrast: (
|
|
50 : #000000,
|
|
100 : #000000,
|
|
200 : #000000,
|
|
300 : #000000,
|
|
400 : #000000,
|
|
500 : #000000,
|
|
600 : #000000,
|
|
700 : #000000,
|
|
800 : #000000,
|
|
900 : #000000,
|
|
A100 : #000000,
|
|
A200 : #000000,
|
|
A400 : #000000,
|
|
A700 : #000000,
|
|
)
|
|
));
|
|
|
|
// The warn palette is optional (defaults to red).
|
|
$theme-error: mat-palette($mat-red);
|
|
|
|
// Create the theme object (a Sass map containing all of the palettes).
|
|
$color-recipes-explorer-frontend-theme: mat-light-theme($theme-primary, $theme-accent, $theme-error);
|
|
|
|
// Include theme styles for core and each component used in your app.
|
|
// Alternatively, you can import and @include the theme mixins for each component
|
|
// that you are using.
|
|
@include angular-material-theme($color-recipes-explorer-frontend-theme);
|
|
|
|
$color-primary: map-get($theme-primary, 500);
|
|
$color-accent: map-get($theme-accent, 500);
|
|
$color-warn: map-get($theme-error, 500);
|
|
|
|
|
|
html, body {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: "Open Sans", Roboto, "Helvetica Neue", sans-serif;
|
|
}
|