如何将Material Theme Builder导出的主题接入Angular Material

我通过Material Theme Builder创建了一个主题并导出为.css格式，得到了多个相关文件，但不清楚如何将这些文件接入Angular Material，也不知道如何将其作为自定义主题使用。以下是获取的文件（截取部分内容）：

导出的文件内容示例 #

colors.module.css #

.primary { background-color: var(--md-sys-color-primary); }.primary-text { color: var(--md-sys-color-primary); }.on-primary { background-color: var(--md-sys-color-on-primary); }.on-primary-text { color: var(--md-sys-color-on-primary); }

theme.css #

@import url(tokens.css);@import url(colors.module.css);@import url(typography.module.css);@import url(theme.light.css) (prefers-color-scheme: light);@import url(theme.dark.css) (prefers-color-scheme: dark);

theme.dark.css #

:root { --md-sys-color-primary: var(--md-sys-color-primary-dark); --md-sys-color-on-primary: var(--md-sys-color-on-primary-dark); --md-sys-color-primary-container: var(--md-sys-color-primary-container-dark); --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-dark); --md-sys-color-secondary: var(--md-sys-color-secondary-dark); --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-dark); --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-dark); --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-dark); --md-sys-color-tertiary: var(--md-sys-color-tertiary-dark); }

theme.light.css #

:root { --md-sys-color-primary: var(--md-sys-color-primary-light); --md-sys-color-on-primary: var(--md-sys-color-on-primary-light); --md-sys-color-primary-container: var(--md-sys-color-primary-container-light); --md-sys-color-on-primary-container: var(--md-sys-color-on-primary-container-light); --md-sys-color-secondary: var(--md-sys-color-secondary-light); --md-sys-color-on-secondary: var(--md-sys-color-on-secondary-light); --md-sys-color-secondary-container: var(--md-sys-color-secondary-container-light); --md-sys-color-on-secondary-container: var(--md-sys-color-on-secondary-container-light); --md-sys-color-tertiary: var(--md-sys-color-tertiary-light); }

tokens.css #

:root { --md-source: #141616; /* primary */ --md-ref-palette-primary0: #000000; --md-ref-palette-primary10: #002021; --md-ref-palette-primary20: #003738; --md-ref-palette-primary25: #004345; --md-ref-palette-primary30: #004f52; --md-ref-palette-primary35: #005c5f; --md-ref-palette-primary40: #00696c; --md-ref-palette-primary50: #008488; --md-ref-palette-primary60: #00a1a5; --md-ref-palette-primary70: #1dbdc2; --md-ref-palette-primary80: #4cd9de; --md-ref-palette-primary90: #6ff6fb; --md-ref-palette-primary95: #b9fdff; --md-ref-palette-primary98: #e4feff; --md-ref-palette-primary99: #f1ffff; --md-ref-palette-primary100: #ffffff; }

typography.module.css #

.display-large{ font-family: var(--md-sys-typescale-display-large-font-family-name); font-style: var(--md-sys-typescale-display-large-font-family-style); font-weight: var(--md-sys-typescale-display-large-font-weight); font-size: var(--md-sys-typescale-display-large-font-size); letter-spacing: var(--md-sys-typescale-display-large-tracking); line-height: var(--md-sys-typescale-display-large-height); text-transform: var(--md-sys-typescale-display-large-text-transform); text-decoration: var(--md-sys-typescale-display-large-text-decoration); }

1. 放置主题文件 #

把所有导出的CSS文件复制到Angular项目的src/assets/theme目录下，没有该目录就手动创建。

2. 全局引入主题基础文件 #

打开src/styles.scss（或styles.css），添加导入语句：

@import './assets/theme/theme.css';

3. 创建Angular Material适配主题文件 #

在src/theme目录下新建custom-theme.scss，内容如下：

@use '@angular/material' as mat;

// 从CSS变量映射主色调色板
$primary: mat.define-palette(mat.$md3-light-theme-palette, default, default, default,
  (
    0: var(--md-ref-palette-primary0),
    10: var(--md-ref-palette-primary10),
    20: var(--md-ref-palette-primary20),
    25: var(--md-ref-palette-primary25),
    30: var(--md-ref-palette-primary30),
    35: var(--md-ref-palette-primary35),
    40: var(--md-ref-palette-primary40),
    50: var(--md-ref-palette-primary50),
    60: var(--md-ref-palette-primary60),
    70: var(--md-ref-palette-primary70),
    80: var(--md-ref-palette-primary80),
    90: var(--md-ref-palette-primary90),
    95: var(--md-ref-palette-primary95),
    98: var(--md-ref-palette-primary98),
    99: var(--md-ref-palette-primary99),
    100: var(--md-ref-palette-primary100)
  )
);

// 同理映射次要、第三色调色板（根据你的tokens补充完整）
$secondary: mat.define-palette(mat.$md3-light-theme-palette, default, default, default);
$tertiary: mat.define-palette(mat.$md3-light-theme-palette, default, default, default);

// 定义浅色主题
$light-theme: mat.define-light-theme((
  color: (
    primary: $primary,
    secondary: $secondary,
    tertiary: $tertiary,
  ),
  typography: mat.define-typography-config(
    display-large: mat.define-typography-level(
      var(--md-sys-typescale-display-large-font-size),
      var(--md-sys-typescale-display-large-height),
      var(--md-sys-typescale-display-large-font-weight),
      var(--md-sys-typescale-display-large-tracking),
      var(--md-sys-typescale-display-large-text-transform),
      var(--md-sys-typescale-display-large-text-decoration)
    ),
    // 按需补充display-medium、headline-large等其他排版等级
  )
));

// 定义深色主题
$dark-theme: mat.define-dark-theme((
  color: (
    primary: $primary,
    secondary: $secondary,
    tertiary: $tertiary,
  ),
  typography: mat.define-typography-config(
    display-large: mat.define-typography-level(
      var(--md-sys-typescale-display-large-font-size),
      var(--md-sys-typescale-display-large-height),
      var(--md-sys-typescale-display-large-font-weight),
      var(--md-sys-typescale-display-large-tracking),
      var(--md-sys-typescale-display-large-text-transform),
      var(--md-sys-typescale-display-large-text-decoration)
    ),
  )
));

// 跟随系统配色自动切换主题
@media (prefers-color-scheme: light) {
  @include mat.all-component-themes($light-theme);
}

@media (prefers-color-scheme: dark) {
  @include mat.all-component-themes($dark-theme);
}

4. 全局引入适配主题 #

回到src/styles.scss，添加导入：

@import './theme/custom-theme.scss';

5. 直接使用导出的CSS类（可选） #

除了让Material组件自动应用主题，还能在HTML里直接用导出的类：

<div class="primary">主色背景块</div>
<span class="primary-text">主色文字</span>
<h1 class="display-large">大标题样式</h1>

6. 测试主题切换 #

修改系统的明暗模式设置，检查Material组件和自定义元素是否自动切换主题。

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