如何在JavaScript变量中获取Angular Material 18主题的颜色值？

下面提供几种可行的实现方式，根据你的场景选择即可：

方法一：通过CSS变量中转 #

这是最通用的方案，无需额外配置，适合大多数场景：

1. 在你的主题样式文件中，把目标主题颜色赋值给全局CSS变量：

:root {
  --primary-blue-color: #{mat.get-theme-color(m3-blue-theme.$light-theme, primary)};
}

2. 在JavaScript/TypeScript中获取这个变量：

const colorBlue = getComputedStyle(document.documentElement)
  .getPropertyValue('--primary-blue-color')
  .trim();
// 此时colorBlue会得到类似#25507c的HEX值

方法二：利用Angular Material主题服务 #

如果是在Angular组件内动态获取，推荐使用官方提供的主题服务：

import { Component, OnInit } from '@angular/core';
import { ThemeService } from '@angular/material/core';
import { getThemeColor } from '@angular/material/theme';
import { m3BlueTheme } from './path-to-your-theme-file'; // 替换为你的主题文件路径

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss']
})
export class YourComponent implements OnInit {
  colorBlue: string;

  constructor(private themeService: ThemeService) {}

  ngOnInit(): void {
    // 方式1：监听当前激活的主题变化，动态获取primary色值
    this.themeService.theme$.subscribe(activeTheme => {
      this.colorBlue = getThemeColor(activeTheme, 'primary');
    });

    // 方式2：直接使用你预定义的m3-blue-theme.$light-theme
    this.colorBlue = getThemeColor(m3BlueTheme.$light-theme, 'primary');
  }
}

方法三：SCSS变量导出+TS导入 #

这种方式需要项目配置支持从SCSS文件导入变量，适合需要直接在TS中使用静态主题色的场景：

1. 在主题SCSS文件中导出目标颜色：

$primary-blue: mat.get-theme-color(m3-blue-theme.$light-theme, primary);
:export {
  primaryBlue: $primary-blue;
}

2. 在TS文件中导入并使用：

import * as themeVars from './path-to-your-theme-file.scss';

const colorBlue = themeVars.primaryBlue;

注意：如果使用Angular CLI，通常默认配置已支持此功能，若遇到问题可检查angular.json中的构建配置。

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