Angular Material 16自定义主题CSS实现及兼容问题咨询

我正在升级应用，此前用工具生成自定义Angular Material主题CSS文件，但没覆盖所有Material组件。现在用MATERIAL DESIGN PALETTE GENERATOR生成了调色板代码，但不知道怎么纯CSS实现，不想用SCSS。另外想知道这个主题和现有各类CSS文件样式是否兼容。附生成的调色板代码：

$mdThemingProvider.definePalette('tcweb', {
  '50': 'e0eaf1',
  '100': 'b3cbdb',
  '200': '80a9c4',
  '300': '4d86ac',
  '400': '266c9a',
  '500': '005288',
  '600': '004b80',
  '700': '004175',
  '800': '00386b',
  '900': '002858',
  'A100': '8ab4ff',
  'A200': '5793ff',
  'A400': '2473ff',
  'A700': '0a63ff',
  'contrastDefaultColor': 'light',
  'contrastDarkColors': [
    '50',
    '100',
    '200',
    'A100',
    'A200'
  ],
  'contrastLightColors': [
    '300',
    '400',
    '500',
    '600',
    '700',
    '800',
    '900',
    'A400',
    'A700'
  ]
});

Angular Material的组件样式靠CSS变量和特定类名控制，你可以把生成的SCSS调色板转成对应的CSS代码来覆盖全局样式：

• 第一步：定义全局CSS变量
  把调色板里的所有色值转成:root下的CSS变量，方便后续复用：

:root {
  --tcweb-50: #e0eaf1;
  --tcweb-100: #b3cbdb;
  --tcweb-200: #80a9c4;
  --tcweb-300: #4d86ac;
  --tcweb-400: #266c9a;
  --tcweb-500: #005288;
  --tcweb-600: #004b80;
  --tcweb-700: #004175;
  --tcweb-800: #00386b;
  --tcweb-900: #002858;
  --tcweb-A100: #8ab4ff;
  --tcweb-A200: #5793ff;
  --tcweb-A400: #2473ff;
  --tcweb-A700: #0a63ff;
}

• 第二步：覆盖Angular Material核心组件样式
  根据调色板的对比度规则（contrastDarkColors用深色文本，contrastLightColors用浅色文本），逐一覆盖组件的主色、强调色、警告色样式。以主色（mat-primary）为例：

/* 主色基础样式 */
.mat-primary {
  background-color: var(--tcweb-500) !important;
  color: white !important; /* 500属于contrastLightColors，用白色文本 */
}

/* 主色禁用状态样式 */
.mat-primary .mat-button.mat-button-disabled,
.mat-primary .mat-icon-button.mat-button-disabled {
  color: rgba(255,255,255,0.3) !important;
}
.mat-primary .mat-raised-button.mat-button-disabled {
  background-color: rgba(0,82,136,0.3) !important;
}

/* 工具栏、卡片等组件的主色样式 */
.mat-toolbar.mat-primary {
  background-color: var(--tcweb-500) !important;
  color: white !important;
}
.mat-card-header.mat-primary {
  background-color: var(--tcweb-50) !important;
  color: #000 !important; /* 50属于contrastDarkColors，用黑色文本 */
}

如果需要覆盖所有组件，得针对mat-form-field、mat-checkbox、mat-radio-button等每个组件的类名逐一调整，参考官方文档里的组件样式结构就行。

• 只要你的自定义CSS文件加载顺序在Angular Material默认CSS之后，自定义样式就会覆盖默认样式，不会和现有CSS冲突。
• 如果现有CSS里有相同组件类名的样式，注意优先级：带!important的自定义样式优先级最高，其次是更具体的选择器（比如.app-container .mat-primary比.mat-primary优先级高）。
• 调色板的对比度规则已经考虑了文本可读性，按规则设置文本颜色的话，不会出现可读性问题，也不会和现有文本样式冲突，除非现有样式强制锁死了文本颜色。

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