screenshot of MojECE.IdentityTheme


React/Chakra-UI theme for Keycloak


The Keycloak Theme is a custom theme for the Keycloak Open Source Identity and Access Management system. It is based on the CI/CD and Template keycloakify-demo-app and look_and_feel branch. The theme uses the keycloakify project setup inspiration from onyxia-web.


  • React design library Chakra-UI used instead of HTML/SCSS in templates
  • Keycloak default classes removed from HTML templates
  • Two-column design layout
  • Support for external font resources
  • Support for Terms and conditions
  • Development flow with mock context variable
  • Dark Mode support
  • Advanced pages configuration
  • Customization of Keycloak theme


To install the Keycloak Theme, follow the instructions provided by the keycloakify demo app. Here is a shortened version of the installation process:

  1. Run yarn to install dependencies.
  2. Run yarn build to create static files (required in local development).
  3. Run yarn test.
  4. Set mock kcContext (Keycloak data object for the template).
  5. To start development, run yarn start and open http://localhost:3000/.


The Keycloak Theme is a custom theme for the Keycloak Open Source Identity and Access Management system. It introduces several key features such as a new design library, layout changes, support for fonts and terms and conditions, development flow with mock context, dark mode support, and customization options. To install the theme, follow the provided instructions and make sure to update the version number and perform the necessary post-build changes if needed. The theme is released under the MIT License, except for non-keycloak media assets and artwork which are copyrighted by 3 Tav d.o.o.


React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components


SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.

Chakra UI

Chakra UI is a popular open-source React component library that provides a set of accessible and customizable UI components to help developers create modern web applications.

Framer Motion

Alpine.js is a lightweight JavaScript framework that simplifies the process of creating dynamic, reactive user interfaces on the web. It uses a declarative syntax that offers a higher level of abstraction compared to vanilla JavaScript, while being more performant and easier to use than jQuery.


TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.