Create a custom theme for Keycloak

I needed to create a custom theme for Keycloak for a Mobile application project I was working on . It took quite a while to determine the various CSS elements of the default Keycloak login screen . The results of my investigation are below. The github repo is here.

Usage

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

Select your Theme from the Keycloak Admin Console

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.

./standalone/configuration/standalone.xml
<theme>
<staticMaxAge>-1</staticMaxAge>
<cacheThemes>false</cacheThemes>
<cacheTemplates>false</cacheTemplates>
...
</theme>
./raincatcher-keycloak-theme/login/resources/css/styles.css
/* Change content to change the title of the page*/
div#kc-header::after {
content: 'FeedHenry Work Force Management';
font-size: 40px;
line-height: 50px;
margin-bottom: 15px;
}
/*title banner size and colour*/
div#kc-header {
width:100%;
background-color: rgb(40,53,147);
padding-top: 2.5em;
padding-bottom: 2.5em;
padding-right: 2em;
padding-left: 3em;
}
body {
background-color: rgb(63,81,181);
/*background-image: url('../img/bkgrnd.jpg');*/
background-position: center center;
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
color: #fff;
font-family: sans-serif;
text-shadow: 0px 0px 10px #000;
margin: 0px;
}
/* label change Username, Password text*/
div#kc-form label {
color: rgba(255, 255, 255, 0.7) !important;
display: block;
font-size: 30px;
}
/*fields*/
input[type=text], input[type=password] {
color: #ddd;
font-size: 30px;
margin-bottom: 20px;
background: none;
border-width: 0 0 1px 0;
padding: 12px;
width: 95%;
}
/*button*/
input[type=submit] {
border: none;
border-radius: 3px;
background-color: rgb(40,53,147);
box-shadow: 0px 0px 6px rgba(0,0,0,0.5);
color: rgba(0,0,0,0.6);
font-size: 30px;
color: white;
text-transform: uppercase;
padding: 20px;
margin-top: 3em;
width: 98%;
}

Full Stack Software Engineer at Red Hat https://austincunningham.ddns.net