Angular Materialをカスタマイズ

// styles.scss

// テーマ操作関数をライブラリからインポート
@import '~@angular/material/theming';

// Angular Material の共通スタイルを読み込み
@include mat-core();

// 色の定義
$dark-primary: mat-palette($mat-purple);
$dark-accent: mat-palette($mat-amber, A200, A100, A400);
$dark-warn: mat-palette($mat-deep-orange);
 
// 色の定義をテーマにまとめる
$dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);

// クラスに設定
.my-original-theme {
  @include angular-material-theme($dark-theme);
}

<!-- app.component.html -->

<div class="my-original-theme">
  この中にボタンとか好きな要素を入れる
</div>

// styles.scss

@import '~@angular/material/theming';
@include mat-core();

// _palette.scssの$mat-dark-theme-backgroundから
// 変更したいものだけ抜き出して書く
$my-theme-background: (
  card: map_get($mat-pink, 400),
  raised-button: map-get($mat-grey, 800),
);

// _palette.scssの$mat-dark-theme-foregroundから
// 変更したいものだけ抜き出して書く
$my-theme-foreground: (
  base: white,
  divider: $white-12-opacity,
  icon: white,
  icons: white,
  text: white,
);

// _theming.scssの@function mat-dark-themeを
// コピーして書き換え
@function my-theme($primary, $accent, $warn: mat-palette($mat-red)) {
  @return (
    primary: $primary,
    accent: $accent,
    warn: $warn,
    is-dark: false,
    foreground: $my-theme-foreground,
    background: $my-theme-background,
  );
}

// 以下はさっきのダークモードと同じ
$dark-primary: mat-palette($mat-purple);
$dark-accent: mat-palette($mat-amber, A200, A100, A400);
$dark-warn: mat-palette($mat-deep-orange);

$my-theme: my-theme($dark-primary, $dark-accent, $dark-warn);

.my-original-theme {
  @include angular-material-theme($my-theme);
}

<!-- app.component.html -->
<div matRipple
    [matRippleColor]="'#00ffff4d'" <!-- Rippleの透明度はHEX値で設定 -->
    [matRippleCentered]="false"
    [matRippleUnbounded]="false"
    class="hoge-button mat-raised-button"><!-- mat-raised-buttonクラスを借用する -->
    ボタンっぽいもの
</div>

// styles.scss
.mat-raised-button.hoge-button {
  overflow: hidden;  // [matRippleUnbounded]="false"が無視される時
  background: rgb(151,86,184);
  background: linear-gradient(90deg, rgba(151,86,184,1) 0%, rgba(99,107,255,1) 48%, rgba(52,214,247,1) 100%);
}