# 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.

<figure><img src="https://4187774434-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FrU7aqfyZ5vYuUDxKeHBj%2Fuploads%2Fgit-blob-e13e7e291e8f8effa6ab95cfaebe7e40252644c0%2Fimage%20(16).png?alt=media" alt="" width="375"><figcaption><p>Custom login and account theme selected in the Keycloak Admin console</p></figcaption></figure>

{% hint style="info" %}
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](https://www.youtube.com/watch?v=WMyGZNHQkjU).
{% endhint %}

{% tabs %}
{% tab title="Docker" %}
Let's see how you would go about creating a Keycloak Docker image with your theme available.\\

{% embed url="<https://willwill96.github.io/the-ui-dawg-static-site/en/keycloakify/#integrating-keycloak-and-keycloakify-jar>" %}
Checkout this great tutorial that explains it in great details
{% endembed %}

<pre class="language-bash"><code class="lang-bash">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 &#x3C;&#x3C; EOF > ./Dockerfile
FROM node:18 as keycloakify_jar_builder
RUN apt-get update &#x26;&#x26; \
    apt-get install -y openjdk-17-jdk &#x26;&#x26; \
    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
<strong># NOTE: If you are using a version of Keycloak prior to 23 you must use 
</strong><strong># the retrocompat-*.jar. Look inside your target directory there is two jars file
</strong><strong># one *.jar and the other retrocompat-*.jar
</strong><strong>COPY --from=keycloakify_jar_builder /opt/app/dist_keycloak/target/keycloakify-starter-keycloak-theme-6.0.2.jar /opt/keycloak/providers/
</strong>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
</code></pre>

{% endtab %}

{% tab title="Helm" %}
If you use [Bitnami's Keycloak Helm chart](https://github.com/bitnami/charts/tree/main/bitnami/keycloak) you can leverage the initContainers parameter to load your theme.

{% code title="Chart.yaml" %}

```yaml
apiVersion: v2
name: keycloak
version: 1.0.0
dependencies:
  - name: keycloak
    version: 18.3.4
    repository: oci://registry-1.docker.io/bitnamicharts
```

{% endcode %}

<pre class="language-yaml" data-title="values.yaml"><code class="lang-yaml">global:
  postgresql:
    auth:
      postgresPassword: "$CHANGEME1"
      username: "keycloak"
      password: "$CHANGEME2"
      database: "keycloak"
keycloak:
  auth:
    adminUser: keycloak
    adminPassword: $CHANGEME3
  production: true
  tls: 
    enabled: false 
    autoGenerated: false
  proxy: edge
  httpRelativePath: "/auth/"
  #postgresql:
  #  primary:
  #    nodeSelector:
  #      infra: "true"
  #    tolerations:
  #      - key: "infra"
  #        operator: "Exists"
  replicaCount: 1
  #nodeSelector:
  #  infra: "true"
  #tolerations:
  #  - key: "infra"
  #    operator: "Exists"
  #resources:
  #  requests:
  #    cpu: "200m"
  #    memory: "512Mi"
  #  limits:
  #    cpu: "4"
  #    memory: "16Gi"
  ingress:
    # If `true`, an Ingress is created
    enabled: true
    #ingressClassName: nginx
    # Ingress annotations
    annotations:
      ## Resolve HTTP 502 error using ingress-nginx:
      ## See https://www.ibm.com/support/pages/502-error-ingress-keycloak-response
      nginx.ingress.kubernetes.io/proxy-buffer-size: 128k
    # List of rules for the Ingress
    hostname: "auth.lab.$DOMAIN"
    # TLS configuration
    extraTls:
      - hosts:
         - auth.lab.$DOMAIN
  
  extraStartupArgs: "--features=preview --log-level=org.keycloak.events:debug"

  extraEnvVars: 
<strong>    # See: https://docs.keycloakify.dev/build-options#extrathemeproperties
</strong><strong>    - name: MY_ENV_VARIABLE
</strong><strong>      value: "value of MY_ENV_VARIABLE"
</strong>
  initContainers: |
    - name: realm-ext-provider
      image: curlimages/curl
      imagePullPolicy: IfNotPresent
      command:
        - sh
      args:
        - -c
        - |
<strong>          # NOTE: If you are using a version of Keycloak prior to 23 you must 
</strong><strong>          # use the retrocompat-*.jar.
</strong><strong>          # Look in your target directory there should be two .jar files 
</strong><strong>          # *.jar and retrocompat-*.jar
</strong><strong>          # Replace USER and PROJECT.    
</strong><strong>          curl -L -f -S -o /extensions/keycloakify-starter.jar https://github.com/USER/PROJECT/releases/latest/download/keycloak-theme.jar
</strong>      volumeMounts:
        - name: extensions
          mountPath: /extensions

  extraVolumeMounts: |
    - name: extensions
      mountPath: /opt/bitnami/keycloak/providers

  extraVolumes: |
    - name: extensions
      emptyDir: {}

  externalDatabase:
    host: keycloakv3-postgresql
    port: 5432
    user: keycloak
    password: $CHANGEME2
    database: keycloak
</code></pre>

\
Read [this section of the starter project readme](https://github.com/keycloakify/keycloakify-starter?tab=readme-ov-file#the-ci-workflow) to learn how to get GitHub Action to publish your theme's JAR as assets of your GitHub release.
{% endtab %}

{% tab title="Bare metal" %}
What you need to know is that your keycloak-theme.jar should be placed in the provider directory of your Keycloak (e.g: `/opt/keycloak/providers)`\
After that you should run bin/kc.sh build (e.g: `bash /opt/keycloak/bin/kc.sh build`)

Then you can start your Keycloak server, your theme should be available in it!

If you are using a version of Keycloak prior to 23 you must [use the `retrocompat-*.jar`](#user-content-fn-1)[^1].
{% endtab %}

{% tab title="Cloud-IAM" %}
If you are utilizing a Keycloak instance managed by [Cloud-IAM](https://cloud-iam.com/?mtm_campaign=keycloakify-deal\&mtm_source=keycloakify-doc-header), importing themes and extensions is quite straightforward.

{% hint style="info" %}
Uploading custom JAR files is only available with paid plans.

If you decide to subscribe, please consider using the code `keycloakify5`.

This code will provide you with a 5% discount, and we will also receive 5%, which greatly supports our project!
{% endhint %}

{% embed url="<https://app.tango.us/app/embed/e22aec8f-d7cf-44a7-bfe7-9f92630aa7eb>" %}
{% endtab %}
{% endtabs %}

[^1]: When you run yarn build-keycloak-theme in the dist\_keycloak/build directory two jar files are create. \*.jar and retrocompat-\*.jar.