能否为Angular中Amplify Authenticator组件设置全局主色调与强调色？

我在Angular中使用Amplify Authenticator组件，想修改它的颜色。目前我已经知道可以通过逐个覆盖组件各部分的CSS变量来调整样式，比如：

[data-amplify-authenticator] {
  --amplify-components-authenticator-router-box-shadow: 0 0 16px var(--amplify-colors-overlay-10);
  --amplify-components-authenticator-router-border-width: 0;
  --amplify-components-authenticator-form-padding: var(--amplify-space-medium) var(--amplify-space-xl) var(--amplify-space-xl);
  --amplify-components-button-primary-background-color: var(--amplify-colors-neutral-100);
  --amplify-components-fieldcontrol-focus-box-shadow: 0 0 0 2px var(--amplify-colors-purple-60);
  --amplify-components-tabs-item-active-border-color: var(--amplify-colors-neutral-100);
  --amplify-components-tabs-item-color: var(--amplify-colors-neutral-80);
  --amplify-components-tabs-item-active-color: var(--amplify-colors-purple-100);
  --amplify-components-button-link-color: var(--amplify-colors-purple-80);
}

但我想知道能不能在一处设置主色调与强调色，让整个组件自动应用这些颜色？比如像下面这样的方式：

[data-amplify-authenticator] {
  --amplify-components-authenticator-primary-colour: #ff0000;
  --amplify-components-authenticator-accent-colour: #ff0000;
}

可以通过覆盖Amplify UI的全局颜色系统变量来统一设置Authenticator的主色调和强调色，无需逐个修改组件的单独变量。

两种常用实现方式： #

1. 全局覆盖（作用于所有Amplify组件）
   Amplify UI的所有组件都基于一套基础颜色变量构建，直接修改根节点的全局变量，就能让所有组件同步使用新的主色调/强调色：

   :root {
     /* 主色调系列，覆盖从浅到深的层级色 */
     --amplify-colors-primary-10: #fff0f0;
     --amplify-colors-primary-20: #ffd1d1;
     --amplify-colors-primary-40: #ff8383;
     --amplify-colors-primary-60: #ff2626;
     --amplify-colors-primary-80: #c50000;
     --amplify-colors-primary-100: #800000;
     /* 强调色（secondary系列） */
     --amplify-colors-secondary-60: #00ff00;
   }
   

2. 仅针对Authenticator组件生效
   如果只想修改Authenticator的颜色，不影响其他Amplify组件，将变量放在[data-amplify-authenticator]选择器下即可：

   [data-amplify-authenticator] {
     --amplify-colors-primary-60: #ff0000; /* 主色调核心色 */
     --amplify-colors-secondary-60: #00ff00; /* 强调色核心色 */
   }
   

   组件内部的按钮、输入框焦点、标签激活状态等元素会自动继承这些核心颜色的衍生值，保持样式的一致性。

关键提示： #

• 你尝试的--amplify-components-authenticator-primary-colour这类变量并不存在，Amplify UI没有提供这种直接的组件级主色调变量，而是通过基础颜色系统实现样式统一。
• 建议使用官方定义的颜色层级（10到100），这样组件的hover、active等状态颜色会自动匹配，无需额外配置。

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