Overview

Feedback

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