Responsive theme same as bootstrap

Usage

Git clone this repo in the Themes directory of your keycloak instance to use this theme

To select the theme you need to login to your keycloak admin console. Go to Realms and themes and select from dropdown.

Configure your own Theme

It is recommend that you make a copy of an existing theme and edit it. In order to be able to edit the theme and see changes without restarting the keycloak server you need to edit the standalone.xml file on your keycloak server to disable caching.

located here

./standalone/configuration/standalone.xml

Make the following changes to standalone.

<theme>
    <staticMaxAge>-1</staticMaxAge>
    <cacheThemes>false</cacheThemes>
    <cacheTemplates>false</cacheTemplates>
    ...
</theme>

To change the title for your login and register user screen you can edit the CSS located at

./bootstrapTheme/login/resources/css/styles.css

Make changes here to change the title

To change your background colour or set a background image

.login-pf body {
    background: #f5f6fa;
    /*background-image: url('../img/bkgrnd.jpg');*/
    background-size: cover;
}

To change the login and register button

/*button*/
#kc-form-buttons > input {
    background-color: #0168fa !important;
    border-color: #0168fa !important;
    border-radius: 0.25rem;
    background-image: none;
}

More information see Keycloak Themes documentation here