Keycloak
Published in

Keycloak

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.

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

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.

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

./raincatcher-keycloak-theme/login/resources/css/styles.css

Make changes here to change the title

/* 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;
}

To change your background colour or set a background image

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;
}

To change the login and fields text

/* label change Username, Password text*/
div#kc-form label {
color: rgba(255, 255, 255, 0.7) !important;
display: block;
font-size: 30px;
}

To change the fields look and feel

/*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%;
}

To change the login and register button

/*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%;
}

More information see Keycloak Themes documentation at http://www.keycloak.org/docs/3.4/server_development/#_themes

My Blog

--

--

--

Open Source Identity Solution for Applications, Services and APIs

Recommended from Medium

My Solution to Two Sum Problem, in JavaScript

Tracking client JavaScript bundle size during development

Sharing React Components between a Web App and an Electron Desktop App

How to perform CRUD operations using Blazor Server App Part-XIV

These tools will help you write clean code

JavaScript Frameworks

How to copy a 2d array of Objects in javascript — one line solution

Write your own authentication backend in Django

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Austin Cunningham

Austin Cunningham

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

More from Medium

Deploy serverless MERN App to AWS with SLS and Github actions

Monitoring User Onboarding using Synthetic Canaries

Let’s Build User Authentication with Express, Prisma, and JWTs

Secure your GatsbyJS Application with Asgardeo