MY CURRENT CHALLENGE:
Within my Vue application, I am utilizing the AWS authenticator for managing login and signup processes. However, customizing its style has proven to be difficult due to the structure being built with shadow DOM elements.
https://i.sstatic.net/fEmqPm.png
CURRENT STYLE ADJUSTMENTS:
Currently, I have been able to make some modifications to certain Amplify variables.
https://i.sstatic.net/hNexWm.png
This is the code snippet showcasing what changes I've made so far:
:root {
--amplify-background-color: transparent;
--amplify-secondary-color: white;
--amplify-primary-contrast: white;
--amplify-primary-color: #E00C1D;
}
It is worth noting that targeting amplify-sign-in instead of :root would only impact the login form specifically, whereas styling the :root affects both login and signup forms.
CUSTOMIZING THE INPUT FIELD:
Here lies my current roadblock.
The text color within the input field is determined by the --amplify-secondary-color variable, which in my case needs to be set to white. However, this results in the text not being visible against a white background.
The HTML structure of amplify-sign-in shows the input element nested within amplify-input.
https://i.sstatic.net/u7IIw.png
The style for the .input class controls the color through the --color variable.
https://i.sstatic.net/TY7Mh.png
Referencing the --color variable, it pertains to:
https://i.sstatic.net/ZmFUg.png
EFFORTS THUS FAR:
Despite multiple attempts, none have yielded successful outcomes.
I have experimented with targeting the .input class, the input element, the amplify-input, and adjusting the --color variable.
Below are examples of some failed 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;
}
}
ADDITIONAL RESOURCES:
To explore further options for CSS customization, refer to the official documentation, although it may be lacking in detailed guidance.
ONGOING TESTING:
An efficient way to experiment and test different solutions within Vue is by setting up a sample project from the amplify-js-samples repository: https://github.com/aws-amplify/amplify-js-samples/tree/main/samples/vue/auth/authenticator
THE MAIN INQUIRY:
In conclusion, I am seeking advice on how to successfully modify the input text styling within the AWS authenticator component.