How to configure custom themes for keycloak on kubernetes

Question

I want to configure a custom theme for login, register and forgot password pages in keycloak on kubernetes.

I am using the following url and configuration for keycloak on kubernetes.

https://www.keycloak.org/getting-started/getting-started-kube

            apiVersion: v1
            kind: Service
            metadata:
            name: keycloak
            labels:
                app: keycloak
            spec:
            ports:
            - name: http
                port: 8080
                targetPort: 8080
            selector:
                app: keycloak
            type: LoadBalancer
            ---
            apiVersion: apps/v1
            kind: Deployment
            metadata:
            name: keycloak
            namespace: default
            labels:
                app: keycloak
            spec:
            replicas: 1
            selector:
                matchLabels:
                app: keycloak
            template:
                metadata:
                labels:
                    app: keycloak
                spec:
                containers:
                - name: keycloak
                    image: quay.io/keycloak/keycloak:12.0.4
                    env:
                    - name: KEYCLOAK_USER
                    value: "admin"
                    - name: KEYCLOAK_PASSWORD
                    value: "admin"
                    - name: PROXY_ADDRESS_FORWARDING
                    value: "true"
                    ports:
                    - name: http
                    containerPort: 8080
                    - name: https
                    containerPort: 8443
                    readinessProbe:
                    httpGet:
                        path: /auth/realms/master
                        port: 8080

Please suggest me any existing blog url or existing solution.

Answer 1

The approach that I have used on the past was to first create a .tar file (e.g., custom_theme.tar) with the custom themes to be used in Keycloak. Then mount volume to the folder where the Keycloak themes are stored (i.e., /opt/jboss/keycloak/themes/my_custom_theme), and copy the .tar file with the custom themes from a local folder into the Keycloak container.

The helm char folder structure:

Chart.yaml      custom_theme.tar    templates       values.yaml

the content of :

values.yaml:

password: adminpassword

The template folder structure:

customThemes-configmap.yaml ingress.yaml            service.yaml
deployment.yaml         secret.yaml

the content of :

customThemes-configmap.yaml

apiVersion: v1
kind: ConfigMap
metadata:
  name: customthemes-configmap
binaryData:
  custom_theme.tar: |-
    {{ .Files.Get "custom_theme.tar" | b64enc}}

ingress.yaml

apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: keycloak
spec:
  tls:
    - hosts:
      - keycloak-sprint01.demo
  rules:
  - host: keycloak-sprint01.demo
    http:
      paths:
      - backend:
          serviceName: keycloak
          servicePort: 8080

service.yaml

apiVersion: v1
kind: Service
metadata:
  name: keycloak
  labels:
    app: keycloak
spec:
  ports:
  - name: http
    port: 8080
    targetPort: 8080
  selector:
    app: keycloak
  type: LoadBalancer

secret.yaml

apiVersion: v1
kind: Secret
metadata:
  name: keycloak-password
type: Opaque
stringData:
  password: {{.Values.password}}

deployment.yaml

apiVersion: apps/v1
kind: Deployment
metadata:
  name: keycloak
  namespace: default
  labels:
    app: keycloak
spec:
  replicas: 1
  selector:
    matchLabels:
      app: keycloak
  template:
    metadata:
      labels:
        app: keycloak
    spec:
      containers:
      - name: keycloak
        image: quay.io/keycloak/keycloak:10.0.1
        env:
        - name: KEYCLOAK_USER
          value: "admin"
        - name: KEYCLOAK_PASSWORD
          valueFrom:
            secretKeyRef:
              name: keycloak-password
              key: password
        - name: PROXY_ADDRESS_FORWARDING
          value: "true"
        - name: DB_VENDOR
          value: "h2"
        - name: JAVA_TOOL_OPTIONS
          value: -Dkeycloak.profile.feature.scripts=enabled
        ports:
        - name: http
          containerPort: 8080
        - name: https
          containerPort: 8443
        readinessProbe:
          httpGet:
            path: /auth/realms/master
            port: 8080
        volumeMounts:
        - mountPath: /opt/jboss/keycloak/themes/my_custom_theme
          name: shared-volume            
          
      initContainers:
        - name: init-customtheme
          image: busybox:1.28
          command: ['sh', '-c', 'cp -rL /CustomTheme/custom_theme.tar /shared && cd /shared/ && tar -xvf custom_theme.tar && rm -rf custom_theme.tar']
          volumeMounts:
          - mountPath: /shared
            name: shared-volume          
          - mountPath: /CustomTheme
            name: theme-volume
                   
      volumes:
      - name: shared-volume
        emptyDir: {}
      - name: theme-volume
        configMap:
          name: customthemes-configmap 

---

I am not claiming that this is the best way to do it, I am not an expert in Kubernetes or helm. A Git repo containing the aforementioned files can be found here.