Keycloak Theme

Custom theme for Keycloak Open Source Identity and Access Management.

based on the CI/CD and Template keycloakify-demo-app and look_and_feel branch.
which uses keycloakify
project setup inspiration onyxia-web

Instalation

Follow keycloakify demo app for detailed instructions.

In short:

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

Major changes compared to the template app

HTML/SCSS in templates is replaced with React design library Chakra-UI
Removed keycloak default classes from HTML templates
Most of the layout is different (e.g. we have two column design)

Concept

Fonts: linked to external resources

Support for Terms and conditions: included

Moc-Context: Development flow consists of setting up context-mock variable in the kcContext.ts file to whatever page you are currently working on.

Uncomment and set mockPageId to whatever sub-page you are working on.

Dark Mode: You can implement your own mechanism to pass the states in the URL and restore it on the other side but we recommend using powerhooks/useGlobalState from the library powerhooks that provide an elegant way to handle states such as isDarkModeEnabled or selectedLanguage.

Build

Se details in the Demo app instructions.

Update the version number package.json (use semver rules for version numbering), don't create a tag manually
Push to main branch
GitHub CI will create a tag, release, and build the theme to the binary file .jar
Downolad the .jar file attached to GitHub release

Post build changes

To add features to the theme that are not supported by this project you need to modify the release binary in the post build process.

To modify contents of a compiled theme unpack downloaded jar file and after modifications are done repack it back again. On *nix systems you can use jar command line tools, e.g.:

jar xvf keycloak-theme.jar
# modify extracted files
jar cf ../keycloak-theme.jar *

More info

License

MIT License, except for all non-keycloak media assets (image and icons) and artwork (logo).

3tav/MojECE.IdentityTheme