Angular 材料：如何在設置項目后創建 stlyes.scss 以便能夠更改主題/顏色？

Question

我的問題：我用 Webstorm 創建了一個項目。 可悲的是，顯然，只有一個空的 styles.css 文件。 我已經用 ng 安裝了 angular 材料。

我想更改主題（顏色和字體）。

我在網上找到的所有指南都只是打開 src 下的 styles.scss 文件並更改一些參數。 我的意思是，我也可以這樣做，但遺憾的是，我沒有 styles.scss 文件。

任何想法如何從這里取得進展？ 是否有自動生成 styles.scss 文件的 ng 命令，以便我可以按照我在 inte.net 上找到的教程進行操作？

我谷歌搜索解決方案，找不到任何。

Answer 1

你只需要一個例子？

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@use '@angular/material' as mat;
@import "@angular/material/theming";
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat.core();

/*
Theme   Light or dark?  Palettes (primary, accent, warn)
deeppurple-amber.css    Dark    deep-purple, amber, red
indigo-pink.css Light   indigo, pink, red
pink-bluegray.css   Dark    pink, bluegray, red
purple-green.css    Light   purple, green, red

 */


$angular-warn: mat.define-palette(mat.$red-palette);

$angular-default-theme: mat.define-light-theme(
  (
    color: (
      primary: mat.define-palette(mat.$purple-palette, 500, 700, 800),
      accent:  mat.define-palette(mat.$amber-palette, 200, 100, 400),
      warn: $angular-warn,
    ),
  )
);

// Include theme styles for core and each componentAttributes used in your app.

$angular-light-theme-purple: mat.define-light-theme(
    (
      color: (
        primary: mat.define-palette(mat.$deep-purple-palette, 500, 100, 900),
        accent: mat.define-palette(mat.$blue-gray-palette, 700, 100, 400),
        warn: $angular-warn,
      ),
    )
);

$angular-dark-theme-purple: mat.define-dark-theme(
  (
    color: (
      primary: mat.define-palette(mat.$purple-palette, 500, 100, 900),
      accent: mat.define-palette(mat.$amber-palette, 400, 100, 900),
      warn: $angular-warn,
    ),
  )
);

$angular-light-theme-teal: mat.define-light-theme(
    (
      color: (
        primary: mat.define-palette(mat.$teal-palette, 500, 100, 900),
        accent: mat.define-palette(mat.$blue-gray-palette, 700, 100, 400),
        warn: $angular-warn,
      ),
    )
);

$angular-dark-theme-teal: mat.define-dark-theme(
    (
      color: (
        primary: mat.define-palette(mat.$teal-palette, 500, 100, 900),
        accent: mat.define-palette(mat.$amber-palette, 500, 100, 900),
        warn: $angular-warn,
      ),
    )
);

@include mat.all-component-themes($angular-default-theme);

.lightModePurple {
  @include mat.all-component-colors($angular-light-theme-purple);
}
.darkModePurple {
  @include mat.all-component-colors($angular-dark-theme-purple);
}
.lightModeTeal {
  @include mat.all-component-colors($angular-light-theme-teal);
}
.darkModeTeal {
  @include mat.all-component-colors($angular-dark-theme-teal);
}