How to create your own keycloak theme

Creating your own Keycloak theme can be a great way to customize the look and feel of your authentication and authorization pages to match your brand. Here’s a brief guide on how to get started with your own Keycloak theme:

1. Setup dev environment

If you don't already have it installed

brew install yarn
brew install node

2. Clone the repo and install dependancies

git clone  https://github.com/keycloakify/keycloakify-starter.git
yarn install
npx keycloakify add-story

3. Then create a docker-compose.yaml

version: "3"
services:
  keycloak:
    image: quay.io/keycloak/keycloak:latest
    ports:
      - "8080:8080"
    environment:
      - KEYCLOAK_ADMIN=admin
      - KEYCLOAK_ADMIN_PASSWORD=admin
    volumes:
      - ./data:/opt/keycloak/data/
      - ./dist_keycloak:/opt/keycloak/providers/
    command:
      - start-dev
      - --log-level=INFO
    

4. Set the name of your keycloak-theme

vim package.json
# Change the name from
{
    "name": "keycloakify-starter",
    "version": "0.0.0",
# To whatever you need
{
    "name": "hackschool-theme",
    "version": "0.0.0",

5. Run your development environment

yarn storybook

It opens a tabe in your favourite browser else it's http://localhost:6006/?path=/story/login-login-ftl--default

You can now edit any features you want in the source code

6. Transfer theme to keycloak

yarn build-keycloak-theme

this creates the folder ./dist_keycloak and inside it a keycloak-theme.jar file

Now start keycloak

docker-compose up