📥Importing your theme in Keycloak

Now that you have your theme as a .jar file, let's see how you can import it in Keycloak so that it appears in the dropdown list for selecting theme in the Keycloak Admin console.

Custom login and account theme selected in the Keycloak Admin console

Attention: Many people miss this but Keycloakify provides a way to test your theme in a local container just by running a single command. You just have to follow the instruction printed in the console after running running the build-keycloak-theme command! Video tutorial.

Docker

Let's see how you would go about creating a Keycloak Docker image with your theme available.\

Extending Keycloak Themes with Keycloakify 🚀 The UI DawgThe UI Dawg

Checkout this great tutorial that explains it in great details

cd ~/github
mkdir docker-keycloak-with-theme
cd docker-keycloak-with-theme
git clone https://github.com/keycloakify/keycloakify-starter
cd keycloakify-starter
# Just to make sure these instructions remain relevant in the future
# We pin the version of the starter we are using.  
git checkout 620525fed69b37f8790570594c0b19ec03ce962a
cd ..

cat << EOF > ./Dockerfile
FROM node:18 as keycloakify_jar_builder
RUN apt-get update && \
    apt-get install -y openjdk-17-jdk && \
    apt-get install -y maven;
COPY ./keycloakify-starter/package.json ./keycloakify-starter/yarn.lock /opt/app/
WORKDIR /opt/app
RUN yarn install --frozen-lockfile
COPY ./keycloakify-starter/ /opt/app/
RUN yarn build-keycloak-theme

FROM quay.io/keycloak/keycloak:latest as builder
WORKDIR /opt/keycloak
# NOTE: If you are using a version of Keycloak prior to 23 you must use 
# the retrocompat-*.jar. Look inside your target directory there is two jars file
# one *.jar and the other retrocompat-*.jar
COPY --from=keycloakify_jar_builder /opt/app/dist_keycloak/target/keycloakify-starter-keycloak-theme-6.0.2.jar /opt/keycloak/providers/
RUN /opt/keycloak/bin/kc.sh build

FROM quay.io/keycloak/keycloak:latest
COPY --from=builder /opt/keycloak/ /opt/keycloak/
ENV KC_HOSTNAME=localhost
ENTRYPOINT ["/opt/keycloak/bin/kc.sh", "start-dev"]
EOF

docker build -t docker-keycloak-with-theme .
docker run \
    -e KEYCLOAK_ADMIN=admin \
    -e KEYCLOAK_ADMIN_PASSWORD=admin \
    --env MY_ENV_VARIABLE='Value of my env variable' \
    -p 8080:8080 \
    docker-keycloak-with-theme

Helm

Bare metal

Cloud-IAM