Search code examples
angularaws-amplifyamplifyjs

Can I set the primary colour of the amplify authenticator component?

I am using the amplify authenticator component within Angular and I want to change the colours. There is an example showing how to overide the colours of various parts of the authenticator:

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

But is there a way of setting the primary and accent colour in one place, so this propogates throughout the component? e.g.

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

  • Amplify UI uses CSS variables to configure the UI's appearance. The identifiers of the colours which can be configured are specified here. You can also identify the classes being applied to the element and check which colour variable they are set to by default in the basic theme file @aws-amplify/ui/dist/styles.css.

    By default, Amplify UI's primary colour variables are set as follows:

    @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);
...

    You can overwrite these in your Angular application e.g. in styles.css like this

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

    Or if you always want a single primary colour to be used, consider using a CSS variable.

    :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);
}