Theming for Brewer Map Applications

Angular Material based predefined themes, palettes and general styles.

Colors

This are the advailable color palettes:

| Name | Base Color Code | SCSS Variable | Color | |------------|-----------------------|-------------------|-------| | Hop | #73c369 | $bm-hop | | | Chocolate | #453329 | $bm-chocolate | | | Amber | #912411 | $bm-amber | | | Violet | #b793c9 | $bm-violet | | | Oldhop | #515913 | $bm-oldhop | | | Apricot | #ffcead | $bm-apricot | | | Orange | #ee9e4f | $bm-orange | | | Dirt | #977459 | $bm-dirt | | | Wheat | #ffdb82 | $bm-wheat | | | Water | #69a8c3 | $bm-water | |

Usage

Just import the main theming scss in the file for the Angular Material custom theme setup and use the palettes

@import "~@angular/material/theming";
@import "~@bm/theming/bm";

$bm-typography: mat-typography-config(
  $font-family: 'Open Sans, sans-serif',
  $headline: mat-typography-level(32px, 48px, 700),
  $body-1: mat-typography-level(16px, 24px, 500)
);

@include mat-core($bm-typography);

$bm-hops-primary: mat-palette($bm-hop);
$bm-hops-accent: mat-palette($bm-chocolate, 800);

$bm-hops-warn: mat-palette($bm-amber);

$bm-hops-theme: mat-light-theme(
  (
    color: (
      primary: $bm-hops-primary,
      accent: $bm-hops-accent,
      warn: $bm-hops-warn,
    ),
  )
);

@include angular-material-theme($bm-hops-theme);