theme-token-api.scss

@use '@angular/material' as mat;
@use '@angular/material-experimental';

dev-app {
  &::before {
    content: 'Using experimental theming API';
    display: inline-block;
    position: fixed;
    z-index: 100;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px;
    background: red;
    color: white;
  }
}

.demo-unicorn-dark-theme {
  background: black;
  color: white;
}

@include mat.core();

$dark-theme: mat.define-dark-theme((
  color: (
    primary: mat.define-palette(mat.$blue-grey-palette),
    accent: mat.define-palette(mat.$amber-palette, A200, A100, A400),
    warn: mat.define-palette(mat.$deep-orange-palette),
  ),
  typography: mat.define-typography-config(),
  density: 0,
));

// Set up light theme.

@include material-experimental.theme($components: (
  material-experimental.card(),
  material-experimental.checkbox(),
));

// Set up dark theme.

.demo-unicorn-dark-theme {
  @include material-experimental.theme($tokens: mat.m2-tokens-from-theme($dark-theme), $components: (
    material-experimental.checkbox((
      (mdc, checkbox): (
        selected-checkmark-color: red,
      )
    )),
  ));
}