Skip to content

Creating A Keycloak Theme

Creating a Keycloak Theme#

  1. Mount a local theme to the container (assuming keycloak already running)

    Create directory for the theme#

    mkdir my-theme

    docker container list docker commit docker run -d -p 5000:8080 –mount type=bind,source=,target=

  2. Disable Cache

    The original values are:


    Set it to:


    Copy the file to the host:

    docker cp <container>:opt/jboss/keycloak/standalone/configuration/standalone.xml .

    Send back with:

    docker cp standalone.xml <container>:/opt/jboss/keycloak/standalone/configuration/standalone.xml
  3. Make the login theme

    cd <my-theme>
    mkdir login
    cd login

    Add the following:


    Then go to login. Then change parent=keycloak and it should change.

    For me I had to restart the keycloak service.

  4. Add CSS

    add the file themes/mytheme/login/resources/css/styles.css

    .login-pf body {
        background: DimGrey none;

    then edit


    This removes overrides all the styles of the parent. So you can add them again with: node_modules/patternfly/dist/css/patternfly.css node_modules/patternfly/dist/css/patternfly-additions.css lib/zocial/zocial.css css/login.css css/styles.css

  5. Add Images

    Add to themes/mytheme/login/resources/img

    You can then use the image with:

    body {
        background-image: url('../img/image.jpg');
        background-size: cover;


    <img src="${url.resourcesPath}/img/image.jpg">