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);
}