如何在Angular库中获取应用的Material主色调？

针对你的需求，这里有三种可行的实现方式，能让你的Angular库自动适配不同应用的Material主色调：

方案1：利用Angular Material主题混入（推荐，符合Material设计规范） #

这种方式完全贴合Angular Material的主题系统，能自动跟随应用的明暗主题变化，是最推荐的做法：

1. 在库中定义主题混入文件
   在你的库中创建一个主题SCSS文件（比如library-theme.scss），定义接收应用主题参数的混入：

   @mixin library-theme($theme) {
     // 从传入的主题中提取主色调palette
     $primary-palette: map-get($theme, primary);
   
     // 用mat-color获取主色调，支持指定色调等级（比如default、lighter、darker）
     .header {
       background-color: mat-color($primary-palette);
       // 如果需要更深的色调：mat-color($primary-palette, darker)
     }
   }
   

2. 父应用中引入库的主题混入
   在应用的theme.scss中，引入库的主题文件并传入当前应用的主题：

   $app-primary: mat-palette($mat-blue, 600, 200, 800);
   $app-accent: mat-palette($mat-pink);
   $app-warn: mat-palette($mat-red);
   $app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);
   
   @include angular-material-theme($app-theme);
   // 引入库的主题并传递应用主题
   @import 'path-to-your-library/library-theme';
   @include library-theme($app-theme);
   

这样当应用切换主题（比如从蓝色换成粉色），库的样式会自动同步更新。

方案2：使用CSS自定义属性（快速实现） #

如果不需要复杂的色调等级，用CSS变量是最简单的方式：

1. 父应用导出主色调为CSS变量
   在应用的theme.scss中，把主色调值导出为全局CSS变量：

   $app-primary: mat-palette($mat-blue, 600, 200, 800);
   $app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);
   
   @include angular-material-theme($app-theme);
   
   // 导出主色调到全局CSS变量
   :root {
     --app-primary: #{mat-color($app-primary)};
     --app-primary-dark: #{mat-color($app-primary, darker)};
   }
   

2. 库中直接使用CSS变量
   在库的组件SCSS中直接引用这些变量：

   .header {
     background-color: var(--app-primary);
   }
   

这种方式不需要修改库的主题结构，快速实现适配，但无法直接利用Material主题的明暗切换逻辑（需要额外处理）。

方案3：组件输入绑定动态设置 #

如果需要更灵活的动态控制，可以通过组件输入属性传递主色调：

1. 库组件添加输入属性
   在库组件的TS文件中定义接收主色调的输入：

   import { Component, Input } from '@angular/core';
   
   @Component({
     selector: 'lib-header',
     templateUrl: './header.component.html',
     styleUrls: ['./header.component.scss']
   })
   export class HeaderComponent {
     @Input() primaryColor: string = '#1976d2'; // 默认值
   }
   

2. 库组件中绑定样式
   在组件SCSS中使用变量，然后通过内联样式传递：

   .header {
     background-color: var(--primary-color);
   }
   

   组件模板中绑定CSS变量：

   <div class="header" [style.--primary-color]="primaryColor">
     <!-- 组件内容 -->
   </div>
   

3. 父应用使用组件时传入主色调
   在应用的模板中传入当前应用的主色调：

   <lib-header [primaryColor]="'#3f51b5'"></lib-header>
   

   如果你想自动获取应用主题的颜色，可以直接用CSS变量结合：

   <lib-header [primaryColor]="getComputedStyle(document.documentElement).getPropertyValue('--app-primary')"></lib-header>
   

这种方式适合需要动态切换主题的场景，但需要额外的代码传递颜色值。

内容的提问来源于stack exchange，提问作者lostintranslation