Amplify UI

Overview

A Theme is a structured collection of design decisions that change the appearance of a UI library. An Amplify UI theme allows application wide visual changes through the use of targeted CSS classes and variables.

For instructions on setting up authenticator and base styling please see

#quick-start

Classes

You can override the Authenticator's amplify-* classes to Theme the authenticator. For example to style all of the buttons in the Authenticator you could target the amplify-button class.

.amplify-button[data-variation='link']:hover {
  background: none;
  text-decoration: underline;
}

To view additional examples of styling the Authenticator using css classes please see our detailed Authenticator documentation

Available Classes

amplify-button

amplify-checkbox

amplify-countrycodeselect

amplify-divider

amplify-divider--label

amplify-field

amplify-field-group

amplify-flex

amplify-heading

amplify-icon

amplify-image

amplify-input

amplify-label

amplify-passwordfield

amplify-phonenumberfield

amplify-radio

amplify-selectfield

amplify-tabs

amplify-text

amplify-text--error

amplify-textfield

amplify-visually-hidden

Variables

You can overwrite the Authenticator's --amplify-* css variables to theme the Authenticator. For example the sign in page of the Authenticator uses the --amplify-components-button-* css variables to style the sign in buttons.

[data-amplify-authenticator] {
  --amplify-components-button-primary-background-color: var(
    --amplify-colors-secondary-80
  );
  --amplify-components-button-primary-hover-background-color: var(
    --amplify-colors-secondary-90
  );
  --amplify-components-button-primary-focus-background-color: var(
    --amplify-colors-secondary-90
  );
  --amplify-components-button-primary-active-background-color: var(
    --amplify-colors-secondary-100
  );
  --amplify-components-button-link-color: var(
    --amplify-colors-secondary-80
  );
  --amplify-components-button-link-hover-color: var(
    --amplify-colors-secondary-90
  );
  --amplify-components-button-link-focus-color: var(
    --amplify-colors-secondary-90
  );
  --amplify-components-button-link-active-color: var(
    --amplify-colors-secondary-100
  );
  --amplify-components-button-link-active-background-color: transparent;
  --amplify-components-button-link-focus-background-color: transparent;
  --amplify-components-button-link-hover-background-color: transparent;
}

To view additional examples of styling the Authenticator using css variables please see our detailed Authenticator documentation

A complete list of variables can be found here

Amplify open source software, documentation and community are supported by Amazon Web Services.

© 2024 Amazon Web Services, Inc. and its affiliates. All rights reserved. View the site terms and privacy policy.

Flutter and the related logo are trademarks of Google LLC. We are not endorsed by or affiliated with Google LLC.