为 Angular 生成一个 Angular 主题 15？

Question

在各种教程中，我看到了这样生成的主题：

//======================================
// SHARED THEME STYLES
//======================================
@include mat.core();

.dark-theme {
    //======================================
    // THEME INITIALIZATION
    //======================================
    @include mat.core-theme($theme);
    @include mat.all-component-themes($theme);
}
.light-theme {
    //======================================
    // THEME INITIALIZATION
    //======================================
    @include mat.core-theme($theme);
    @include mat.all-component-themes($theme);
}

IIUC 这也是 Angular 的文档告诉我们如何去做的。 但是，当我运行构建时，我收到了这些警告。

./projects/playground/src/styles.scss - Warning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
The same typography styles are generated multiple times. Read more about how style duplication can be avoided in a dedicated guide. https://github.com/angular/components/blob/main/guides/duplicate-theming-styles.md

../../../../node_modules/@angular/material/core/theming/_theming.scss 360:7  private-check-duplicate-theme-styles()
../../../../node_modules/@angular/material/core/_core-theme.scss 77:3        theme()
../../../elytra/src/lib/styles/themes/dark-theme.scss 139:5                  @use
../styles.scss 9:1  

我们如何创建主题而不像 Typography 那样复制 commons styles？

Answer 1

根据他们的文档https://material.angular.io/guide/theming#multiple-themes-in-one-file

您会看到，在定义两个主题时，您应该为除主要主题之外的所有主题使用core-color 。

更详尽的解释也可以在他们的文档https://material.angular.io/guide/duplicate-theming-styles中找到

主要概念是 *-theme 混合应用整个主题（也就是每次调用 *-theme 时复制它），而 *-color 混合只改变各个组件的颜色，而单独保留 rest。

我对下面的示例进行了更改以反映阅读情况。

//Say this is your primary 
.dark-theme {
    //======================================
    // THEME INITIALIZATION
    //======================================
    @include mat.core-theme($theme);
    @include mat.all-component-themes($theme);
}
//and this being your secondary theme
.light-theme {
    //======================================
    // THEME INITIALIZATION
    //======================================
    @include mat.core-color($theme);  <---- This is the magic
    @include mat.all-component-colors($theme); <---- This is the magic
}

Answer 2

我相信这应该有效我也相信mat.all-component-themes使用每一个组件，这将产生不必要的 CSS。

@use './node_modules/@angular/material' as mat;
@import './node_modules/@angular/material/_theming.scss';
@include mat-core();

//THEME INISTALIZATION

// ======== Light theme ======== 

$my-custom-primary: mat-palette($mat-pink, 500);
$my-custom-accent: mat-palette($mat-pink, 50);
$my-custom-theme: mat-light-theme($my-custom-primary, $my-custom-accent);

// ======== Dark theme ======== 

$my-custom-dark-primary: mat-palette($mat-deep-orange, 50);
$my-custom-dark-accent: mat-palette($mat-grey, 600);
$my-custom-dark-theme: mat-dark-theme($my-custom-dark-primary, $my-custom-dark-accent);


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

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