Frontend/src/custom-theme.scss

// Custom Theming for Angular Material
@use '@angular/material' as mat;
// For more information: https://material.angular.io/guide/theming
// Plus imports for other components in your app.

$custom-typography: mat.define-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.sass
// (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.define-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.define-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.define-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.define-palette(mat.$red-palette);

// Create the theme object (a Sass map containing all of the palettes).
$color-recipes-explorer-frontend-theme: mat.define-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 mat.all-component-themes($color-recipes-explorer-frontend-theme);


html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: "Open Sans", Roboto, "Helvetica Neue", sans-serif;
}