argos/dmp-frontend/src/blue-theme.scss

@import 'app/ui/misc/navigation/navigation.component.scss';
@import '../node_modules/@angular/material/theming';

$app-blue-theme-primary-palette: (
	50: #e8eaf6,
	100: #c5cae9,
	200: #9fa8da,
	300: #7986cb,
	400: #5c6bc0,
	500: #3f51b5,
	600: #3949ab,
	700: #303f9f,
	800: #283593,
	900: #1a237e,
	A100: #8c9eff,
	A200: #536dfe,
	A400: #3d5afe,
	A700: #304ffe,
	contrast: (
	  50: $black-87-opacity,
	  100: $black-87-opacity,
	  200: $black-87-opacity,
	  300: white,
	  400: white,
	  500: $white-87-opacity,
	  600: $white-87-opacity,
	  700: $white-87-opacity,
	  800: $white-87-opacity,
	  900: $white-87-opacity,
	  A100: $black-87-opacity,
	  A200: white,
	  A400: white,
	  A700: $white-87-opacity,
	),
);

$app-blue-theme-accent-palette: (
	50: #fce4ec,
  	100: #f8bbd0,
  	200: #f48fb1,
	300: #f06292,
	400: #ec407a,
	500: #e91e63,
	600: #d81b60,
	700: #c2185b,
	800: #ad1457,
	900: #880e4f,
	A100: #ff80ab,
	A200: #ff4081,
	A400: #f50057,
	A700: #c51162,
	contrast: (
		50: $black-87-opacity,
		100: $black-87-opacity,
		200: $black-87-opacity,
		300: $black-87-opacity,
		400: $black-87-opacity,
		500: white,
		600: white,
		700: $white-87-opacity,
		800: $white-87-opacity,
		900: $white-87-opacity,
		A100: $black-87-opacity,
		A200: white,
		A400: white,
		A700: white,
	)
);

$app-blue-theme-primary: mat-palette($app-blue-theme-primary-palette);
$app-blue-theme-accent: mat-palette($app-blue-theme-accent-palette, A200, A100, A400);
$app-blue-theme-warn: mat-palette($mat-red);

$app-blue-theme-background: (
	status-bar: map_get($mat-grey, 300),
	app-bar:    map_get($mat-grey, 100),
	background: map_get($mat-grey, 50),
	hover:      rgba(black, 0.04),
	card:       white,
	dialog:     white,
	disabled-button: rgba(black, 0.12),
	raised-button: white,
	focused-button: $dark-focused,
	selected-button: map_get($mat-grey, 300),
	selected-disabled-button: map_get($mat-grey, 400),
	disabled-button-toggle: map_get($mat-grey, 200),
	unselected-chip: map_get($mat-grey, 300),
	disabled-list-option: map_get($mat-grey, 200),
);

$app-blue-theme-foreground: (
	base:              black,
	divider:           $dark-dividers,
	dividers:          $dark-dividers,
	disabled:          $dark-disabled-text,
	disabled-button:   rgba(black, 0.26),
	disabled-text:     $dark-disabled-text,
	hint-text:         $dark-disabled-text,
	secondary-text:    $dark-secondary-text,
	icon:              rgba(black, 0.54),
	icons:             rgba(black, 0.54),
	text:              rgba(black, 0.87),
	slider-min:        rgba(black, 0.87),
	slider-off:        rgba(black, 0.26),
	slider-off-active: rgba(black, 0.38),
);

$custom-theme: (
	primary: $app-blue-theme-primary,
	accent: $app-blue-theme-accent,
	warn: $app-blue-theme-warn,
	is-dark: false,
	foreground: $app-blue-theme-foreground,
	background: $app-blue-theme-background,
);

$custom-typography: mat-typography-config(
	$font-family: 'Lato, regular',
	$headline: mat-typography-level(32px, 48px, 700),
	$body-1: mat-typography-level(16px, 24px, 500)
);

.blue-theme {
	@include mat-core();

	@include angular-material-theme($custom-theme);
	@include navigation-component-theme($custom-theme);

	// Override typography CSS classes (e.g., mat-h1, mat-display-1, mat-typography, etc.).
	@include mat-base-typography($custom-typography);

	// Override typography for a specific Angular Material components.
	@include mat-checkbox-typography($custom-typography);

	// Override typography for all Angular Material, including mat-base-typography and all components.
	@include angular-material-typography($custom-typography);
	//If you're using Material's theming, you can also pass in your typography config to the mat-core mixin:

	// Override the typography in the core CSS.
	@include mat-core($custom-typography);

}