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:

1. Run yarn to install dependancies
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/

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.

1. Update the version number package.json (use semver rules for version numbering), don't create a tag manually
2. Push to main branch
3. GitHub CI will create a tag, release, and build the theme to the binary file .jar
4. 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

• Advanced pages configuration
• Customize Keycloak theme only
• How it works

License

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

Media Assets: All Rights Reserved. Copyright 3 Tav d.o.o.