Search code examples
htmlcssfirebasefirebaseui

How do I change the Sign in with email form colors in Firebase UI Web Loaded from CDN

Is there a way to override the CSS without rebuilding the entire FirebaseUI? I need to change the purple colors in the form below. I am not using mobile. I just have the script tag bringing the CSS and JavaScript in for FirebaseUI from the CDN.

Want to override the colors using a style tag in the html of the page. Don't want to fork, change deploy and now have to maintain more code. :) enter image description here

I have this link to the css but can't figure out which property is controlling the color. https://github.com/firebase/firebaseui-web/blob/master/stylesheet/firebase-ui.css

Here is the github project for reference: https://github.com/firebase/firebaseui-web

Solution

  • I had to do this a few weeks ago. Here are the properties I changed:

    .firebaseui-button {
    background-color: #ff626e !important;
    color: white !important;
}

.firebaseui-textfield.mdl-textfield .firebaseui-label:after {
    background-color: #ff626e !important;
}

.mdl-progress > .progressbar {
    background-color: #ff626e !important;
}

.mdl-progress > .bufferbar {
    background-image: linear-gradient(
            90deg,
            hsla(0, 0%, 100%, 0.7),
            hsla(0, 0%, 100%, 0.7)
        ),
        linear-gradient(90deg, #ff626e, #ff626e) !important;
    z-index: 0;
    left: 0;
}

.mdl-progress:not(.mdl-progress--indeterminate) > .auxbar,
.mdl-progress:not(.mdl-progress__indeterminate) > .auxbar {
    background-image: linear-gradient(
            90deg,
            hsla(0, 0%, 100%, 0.9),
            hsla(0, 0%, 100%, 0.9)
        ),
        linear-gradient(90deg, #ff626e, #ff626e) !important;
}