AWS Cognito - How to customise the input fields?

Question

THE SITUATION:

In my Vue app, I am using the aws authenticator to handle login/signup.
I need to customize the style, but it's a bit tricky since its structure is made of shadow DOM.

MODIFYING VARIABLES:

So far I only managed to modify some amplify variables.

This is how I did it:

:root {
  --amplify-background-color: transparent;
  --amplify-secondary-color: white;
  --amplify-primary-contrast: white;
  --amplify-primary-color: #E00C1D;
}

Side note. Targeteting amplify-sign-in instead of :root would also work, but logically that style would apply only for the login form and not for the signup (amplify-sign-up) form.
Custom style targeting :root applies to both login and signup form.

CUSTOMIZE THE INPUT FIELD:

Here is where I got stuck. The color of the text inside the input is given by the --amplify-secondary-color var, which in my case needs to be white. But in this way the text of the input is not visible on a white background.

This is the HTML structure of the amplify-sign-in. The input is inside amplify-input.

This is the style for the .input class. As you can see the color is controlled by the --color var

This is what the --color var refers to:

MY ATTEMPTS:

I have tried several approaches but none worked. I tried to target the .input class, the input, the amplify-input, or to change the --color var.

These are some attempts:

:host {
  --color: red !important;
}

:host(.input) {
  color: red !important;
  --color: red !important;
}

amplify-input {
  --color: red !important;

  & .input {
    color:red !important;
    --color: red !important;
  }
}

THE DOCS:

This are the docs concerning the css customization. Unfortunately the documentation is quite poor

TESTING:

The quickest way to set a working example, using Vue, would be to setup this sample from the amplify-js-samples package: https://github.com/aws-amplify/amplify-js-samples/tree/main/samples/vue/auth/authenticator

THE QUESTION:

How can I modify the input text of the aws authenticator?

Torpid

Do you mean you want it like this? nimb.ws/E0CZQl – Lance

Well yes, I need to be able to change the input text color, without affecting the --amplify-secondary-color var. – Torpid

Do not post screenshots of your code but the actual code in text. – Ferrigno

I posted my code in text. Those are screenshots taken from the Elements tab of the Chrome Developer tools. They are the style of the input used in the default AWS cognito. – Torpid

Answer 1

It might make sense to update to the latest version of Amplify UI for Vue.

There is updated documentation for styling https://ui.docs.amplify.aws/vue/connected-components/authenticator/customization#css-style

It also links to another page showing all the CSS variables https://ui.docs.amplify.aws/vue/theming/css-variables

The updated version has more granular CSS classes, such as:

• --amplify-colors-font-primary
• --amplify-colors-font-interactive
• --amplify-colors-font-active
• --amplify-colors-font-focus

Optimize

Answer 2

Try following scss,

amplify-sign-in /deep/ {
    amplify-input {
        > input.input {
            color : red !important;
        }
    }
}

Ebonyeboracum

Thanks for replying. I have tried it but didn't work. – Torpid

Answer 3

Since you're using SCSS, you may do it like this

::v-deep amplify-input input[type='email'] { // can of course be more specific here
  color: red !important;
}

The !important is fine here, since it's a 3rd party that you're overriding.
Also you can keep your <style lang="scss" scoped> this way.

As explained in the official vue loader documentation: https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

For more details, this post is always an excellent reference: https://mcmap.net/q/134865/-how-do-i-use-deep-or-gt-gt-gt-or-v-deep-in-vue-js

Ferrigno

Thanks for replying. Unfortunately it doesn't seem to work. – Torpid

Can you please elaborate on the behavior after trying my solution ? :) – Ferrigno

The css rule didn't manage to affect the actual color of the input. It's still white. – Torpid

Did it appeared in the CSS computed part of the devtools at least ? Do you have a reproducible link to share ? – Ferrigno

No it didn't appear nor in the Styles, nor in the Computed tab. Unfortunately I don't think it's possible to have a codepen or similar, since it requires a AWS account. I edited the question adding some instruction on how to setup the Vue sample, in case somebody is interested. – Torpid