Skip to content

Latest commit

 

History

History
42 lines (35 loc) · 1.01 KB

MATERIAL_CONFIG_DOC.md

File metadata and controls

42 lines (35 loc) · 1.01 KB

Material theming Config

For integrate with material colors theming, you can assign the generated variables to theme on your styles file:

@use "@angular/material" as mat;

@include mat.core();

$primary: (
  default: var(--color-primary),
  lighter: var(--color-primary-light),
  darker: var(--color-primary-dark),
  text: var(--color-primary),
  default-contrast: var(--color-primary-contrast),
  lighter-contrast: var(--color-primary-light-contrast),
  darker-contrast: var(--color-primary-dark-contrast)
);
$accent: (
  default: var(--color-secondary),
  lighter: var(--color-secondary-light),
  darker: var(--color-secondary-dark),
  text: var(--color-secondary),
  default-contrast: var(--color-secondary-contrast),
  lighter-contrast: var(--color-secondary-light-contrast),
  darker-contrast: var(--color-secondary-dark-contrast)
);

// Define a light theme
$light-theme: mat.define-light-theme(
  (
    color: (
      primary: $primary,
      accent: $accent
    )
  )
);

@include mat.core-color($light-theme);