# 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

{% 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="" %} Checkout this great tutorial that explains it in great details {% endembed %} 
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
{% 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 %} 
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: 
    # See: https://docs.keycloakify.dev/build-options#extrathemeproperties
    - name: MY_ENV_VARIABLE
      value: "value of MY_ENV_VARIABLE"

  initContainers: |
    - name: realm-ext-provider
      image: curlimages/curl
      imagePullPolicy: IfNotPresent
      command:
        - sh
      args:
        - -c
        - |
          # NOTE: If you are using a version of Keycloak prior to 23 you must 
          # use the retrocompat-*.jar.
          # Look in your target directory there should be two .jar files 
          # *.jar and retrocompat-*.jar
          # Replace USER and PROJECT.    
          curl -L -f -S -o /extensions/keycloakify-starter.jar https://github.com/USER/PROJECT/releases/latest/download/keycloak-theme.jar
      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
\ 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="" %} {% 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. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.keycloakify.dev/keycloakify/v9/importing-your-theme-in-keycloak.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.