Angular Material：如何基于URL查询参数在运行时生成主题？

Angular Material从v15版本开始全面采用CSS变量构建主题，这让运行时动态修改主题颜色变得非常直接，不需要深挖主题内部原理硬改所有变量。下面是两种实用的实现方式：

方法一：直接修改Material内置的CSS变量 #

Angular Material的主题颜色对应一系列全局CSS变量，比如主色对应--md-sys-color-primary，强调色对应--md-sys-color-secondary（基于Material Design 3的主题）；如果是Material Design 2主题，则对应--mat-primary、--mat-accent这类变量。你只需要：

• 通过ActivatedRoute获取URL查询参数中的两种颜色值
• 动态修改根元素的CSS变量

示例代码：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.route.queryParams.subscribe(params => {
      const primaryColor = params['primary'] || '#6200ee';
      const accentColor = params['accent'] || '#03dac6';

      // 修改MD3主题变量
      document.documentElement.style.setProperty('--md-sys-color-primary', primaryColor);
      document.documentElement.style.setProperty('--md-sys-color-secondary', accentColor);

      // 如果是MD2主题，替换为以下变量：
      // document.documentElement.style.setProperty('--mat-primary', primaryColor);
      // document.documentElement.style.setProperty('--mat-accent', accentColor);
    });
  }
}

方法二：动态生成主题样式并注入DOM #

如果需要更定制化的调整（比如同时修改深浅色模式、衍生色等），可以动态构建包含主题样式的<style>元素，注入到页面头部。这种方式不需要依赖预定义变量，但需要了解Material主题的颜色映射规则：

示例代码：

import { Component, OnInit, Renderer2, Inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { DOCUMENT } from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  constructor(
    private route: ActivatedRoute,
    private renderer: Renderer2,
    @Inject(DOCUMENT) private document: Document
  ) {}

  ngOnInit(): void {
    this.route.queryParams.subscribe(params => {
      const primary = params['primary'] || '#6200ee';
      const accent = params['accent'] || '#03dac6';

      // 构建包含衍生色的主题样式
      const themeStyles = `
        :root {
          --md-sys-color-primary: ${primary};
          --md-sys-color-primary-container: ${this.lightenColor(primary, 20)};
          --md-sys-color-secondary: ${accent};
          --md-sys-color-secondary-container: ${this.lightenColor(accent, 20)};
        }
      `;

      // 创建style元素并注入到head
      const styleEl = this.renderer.createElement('style');
      this.renderer.appendChild(styleEl, this.renderer.createText(themeStyles));
      this.renderer.appendChild(this.document.head, styleEl);
    });
  }

  // 辅助方法：调整颜色亮度生成衍生色
  private lightenColor(color: string, percent: number): string {
    const num = parseInt(color.replace('#', ''), 16);
    const amt = Math.round(2.55 * percent);
    const R = Math.max(0, Math.min(255, (num >> 16) + amt));
    const G = Math.max(0, Math.min(255, (num >> 8 & 0x00FF) + amt));
    const B = Math.max(0, Math.min(255, (num & 0x0000FF) + amt));
    return '#' + (0x1000000 + R * 0x10000 + G * 0x100 + B).toString(16).slice(1);
  }
}

总结 #

你的需求完全可以实现，优先推荐方法一——利用Material官方提供的CSS变量，代码简洁且不易出错。只有当需要极端定制化主题时，才考虑方法二。

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