Creating custom themes in angular material 2

Question

I am trying to create a custom theme for my angular 2 app which is using a few components from angular material 2.

I tried to google this but could'nt find much. The only documentation available is for Angular Material :- https://material.angularjs.org/latest/Theming/03_configuring_a_theme

I could not locate the corresponding documentation for angular 2.

So far I have a figured out that there is a file under @angular2-material/core/style named _default-theme.scss with the below contents :-

@import 'theme-functions';
@import 'palette';


// Person creating a theme writes variables like this:
$md-is-dark-theme: false;


$md-primary: md-palette($md-teal, 500, 100, 700, $md-contrast-palettes);
$md-accent: md-palette($md-purple, 500, 300, 800, $md-contrast-palettes);
$md-warn: md-palette($md-red, 500, 300, 900, $md-contrast-palettes);
$md-foreground: if($md-is-dark-theme, $md-dark-theme-foreground, $md-light-theme-foreground);
$md-background: if($md-is-dark-theme, $md-dark-theme-background, $md-light-theme-background);

I changed

$md-primary: md-palette($md-teal, 500, 100, 700, $md-contrast-palettes);

To

$md-primary: md-palette($md-blue, 500, 100, 700, $md-contrast-palettes);

However this does not seem to be working. Any suggestions would be welcome.

I just answered a very similar question here stackoverflow.com/questions/38734518/… — markstewie
Possible duplicate of Changing Primary Color in Angular Material 2 — cgatian

Charly Charly · Accepted Answer · 2018-03-20T19:48:23

Little late to the party -- Looks like you're just missing the execution to establish the theme via Material's SCSS functions

$theme: mat-light-theme($primary, $accent, $warn);
@include angular-material-theme($theme);

Might potentially change your if statement around dark vs light themes to run mat-light-theme vs mat-dark-theme.

EDIT

As I'm playing around, figured out how to get the background/foreground without overlaying the defaults

$md-primary: mat-palette($mat-teal, 500, 100, 700);
$md-accent: mat-palette($mat-purple, 500, 300, 800);
$md-warn: mat-palette($mat-red, 500, 300, 900);

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

$my-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),
);

$theme: (
  primary:$md-primary,
  accent:$md-accent,
  warn:$md-warn,
  is-dark:false,
  foreground:$my-theme-foreground,
  background:$my-theme-background,
);
// Was `$theme: mat-light-theme($primary, $accent, $warn);`
//   -- Doesn't allow passing in of foreground/background, which may not matter if you're only doing 1 color scheme

// Establish theme
@include angular-material-theme($theme);

I plan to make a merge request to add the ability to pass them in

Creating custom themes in angular material 2

1 Answers