我可以设置放大验证器组件的原色吗？

Question

我正在 Angular 中使用 amplify 验证器组件，我想更改颜色。有一个示例展示了如何覆盖验证器各个部分的颜色：

[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;
}

Answer 1

Amplify UI 使用 CSS 变量 来配置 UI 的外观。可配置颜色的标识符在here指定。您还可以识别应用于元素的类，并检查它们在基本主题文件中默认设置为哪个颜色变量

@aws-amplify/ui/dist/styles.css

。

默认情况下，Amplify UI 的原色变量设置如下：

@aws-amplify/ui/dist/styles.css

...
  --amplify-colors-primary-10: var(--amplify-colors-teal-10);
  --amplify-colors-primary-20: var(--amplify-colors-teal-20);
  --amplify-colors-primary-40: var(--amplify-colors-teal-40);
  --amplify-colors-primary-60: var(--amplify-colors-teal-60);
  --amplify-colors-primary-80: var(--amplify-colors-teal-80);
  --amplify-colors-primary-90: var(--amplify-colors-teal-90);
  --amplify-colors-primary-100: var(--amplify-colors-teal-100);
...

您可以在 Angular 应用程序中覆盖这些内容，例如像这样

styles.css

:root, [data-amplify-theme] {
  --amplify-colors-primary-10: #ff0000; // Any colour of your choosing.
  --amplify-colors-primary-20: #ff0000;
  --amplify-colors-primary-40: #ff0000;
  --amplify-colors-primary-60: #ff0000;
  --amplify-colors-primary-80: #ff0000;
  --amplify-colors-primary-90: #ff0000;
  --amplify-colors-primary-100: #ff0000;
} 

或者，如果您始终希望使用单一原色，请考虑使用 CSS 变量。

:root, [data-amplify-theme] {
  --primary: #ff0000; // Your color here.
  --amplify-colors-primary-10: var(--primary);
  --amplify-colors-primary-20: var(--primary);
  --amplify-colors-primary-40: var(--primary);
  --amplify-colors-primary-60: var(--primary);
  --amplify-colors-primary-80: var(--primary);
  --amplify-colors-primary-90: var(--primary);
  --amplify-colors-primary-100: var(--primary);
}