Angular Material多主题切换：组件SCSS变量动态适配方案咨询

问题背景 #

我开发了一个支持运行时切换主题的Angular应用，当前主题通过SCSS类定义：

.client1-theme{
    // @include angular-material-theme($client1-theme);  
    @include all-component-colors($client1-theme);
    @include theme-color-grabber($client1-theme, $client1-alternate);
    @include status-background($client1-theme);
    @include spinner-color($client1-theme);
}

.client2-theme{
    @include all-component-colors($client2-theme);
    @include theme-color-grabber($client2-theme, $client2-alternate);
    @include status-background($client2-theme);
    @include spinner-color($client2-theme);
}

同时在colors.scss里定义了全局SCSS变量，供组件导入使用：

$primary: mat-color($client1-primary);
$accent: mat-color($client1-accent);
$alternate: mat-color($client1-alternate);

现在需要实现：切换到client2-theme时，这些变量自动替换为对应主题的颜色值：

$primary: mat-color($client2-primary);
$accent: mat-color($client2-accent);
$alternate: mat-color($client2-alternate);

尝试过用mixin定义全局类后通过@extend实现，但组件中无法生效，求可行方案。

可行实现方案 #

方案1：CSS变量+SCSS映射（最轻量化） #

SCSS变量是编译时静态变量，无法在运行时修改，因此改用CSS自定义属性（变量）实现动态切换：

1. 给主题类注入CSS变量
   修改全局主题SCSS文件，在每个主题类中添加对应颜色的CSS变量：

   .client1-theme{
       @include all-component-colors($client1-theme);
       @include theme-color-grabber($client1-theme, $client1-alternate);
       @include status-background($client1-theme);
       @include spinner-color($client1-theme);
       // 注入CSS变量
       --primary: #{mat-color($client1-primary)};
       --accent: #{mat-color($client1-accent)};
       --alternate: #{mat-color($client1-alternate)};
   }
   
   .client2-theme{
       @include all-component-colors($client2-theme);
       @include theme-color-grabber($client2-theme, $client2-alternate);
       @include status-background($client2-theme);
       @include spinner-color($client2-theme);
       // 注入对应主题的CSS变量
       --primary: #{mat-color($client2-primary)};
       --accent: #{mat-color($client2-accent)};
       --alternate: #{mat-color($client2-alternate)};
   }
   

2. 重构colors.scss映射CSS变量
   将原静态SCSS变量改为引用CSS变量，组件导入后会自动读取当前主题的变量值：

   $primary: var(--primary);
   $accent: var(--accent);
   $alternate: var(--alternate);
   

   组件原有使用$primary等变量的代码无需修改，编译后自动转为引用CSS变量，运行时切换主题类即可动态更新颜色。

方案2：主题专属混合器+组件样式包裹 #

若不想用CSS变量，可通过编译时生成多主题样式实现：

1. 定义主题混合器
   在全局主题文件中为每个主题创建包含变量定义的混合器：

   @mixin client1-theme-styles {
       $primary: mat-color($client1-primary);
       $accent: mat-color($client1-accent);
       $alternate: mat-color($client1-alternate);
       @content;
   }
   
   @mixin client2-theme-styles {
       $primary: mat-color($client2-primary);
       $accent: mat-color($client2-accent);
       $alternate: mat-color($client2-alternate);
       @content;
   }
   

2. 组件中用主题混合器包裹样式
   在组件SCSS文件中导入混合器，用主题类嵌套包裹组件样式：

   @import 'path/to/theme-mixins';
   
   .client1-theme & {
       @include client1-theme-styles {
           .component-button {
               background-color: $primary;
               color: white;
           }
       }
   }
   
   .client2-theme & {
       @include client2-theme-styles {
           .component-button {
               background-color: $primary;
               color: white;
           }
       }
   }
   

   此方式编译时生成所有主题的组件样式，运行时切换主题类即可生效，缺点是会增加CSS体积，适合主题数量较少的场景。

方案3：Angular Material官方主题适配（推荐） #

如果基于Angular Material开发，可贴合其官方主题系统实现：

1. 规范主题变量定义
   先定义完整的Material主题调色板和主题对象：

   $client1-primary: mat-palette($mat-blue);
   $client1-accent: mat-palette($mat-orange);
   $client1-alternate: mat-palette($mat-green);
   $client1-theme: mat-light-theme($client1-primary, $client1-accent);
   
   $client2-primary: mat-palette($mat-purple);
   $client2-accent: mat-palette($mat-pink);
   $client2-alternate: mat-palette($mat-teal);
   $client2-theme: mat-light-theme($client2-primary, $client2-accent);
   

2. 组件主题混合器适配
   在组件中定义适配主题的混合器，使用Material提供的mat-color函数读取主题颜色：

   @import '~@angular/material/theming';
   
   @mixin component-theme($theme) {
       $primary: mat-color($theme);
       $accent: mat-color($theme, accent);
       $alternate: mat-color($client1-alternate); // 若为自定义调色板
   
       .component-button {
           background-color: $primary;
           color: mat-color($theme, text, primary);
       }
   }
   

3. 全局主题类包含组件主题
   在全局主题文件中，将组件主题混合器注入对应主题类：

   .client1-theme {
       @include angular-material-theme($client1-theme);
       @include component-theme($client1-theme);
       // 其他自定义主题混合器
   }
   
   .client2-theme {
       @include angular-material-theme($client2-theme);
       @include component-theme($client2-theme);
       // 其他自定义主题混合器
   }
   

   运行时切换主题类，所有Material组件和自定义组件会自动适配当前主题，是最规范的实现方式。

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