Build Reactjs Keycloak Themes with Keycloakify 

Note: Some of the information regarding developing themes past the 2:00 mark is now inaccurate. Check out the information at keycloakify's documentation site instead.

You can not believe how happy I am that I don't have to get into that crazy ftl format too much. Big thanks to every one of you!

Thank you, @the UI Dawg, for this fantastic video introduction! It's wonderful that you demonstrate to people how to create a Keycloakify Docker image that bundles a theme. This was much needed, as instructions were previously only available for Helm. I'd like to highlight that after bunlding the theme (2:46), you are provided with a single command that you can run to spin up a dockerized Keycloak with the theme preloaded (and hot reload enabled). This would be the most straightforward method to test the theme in an actual Keycloak instance. Once again, thank you for the informative video. I'll be sure to include it in the landing page and documentation.

This was really helpful man thanks for everything

Great content

Awesome video!! Please i'm wondering how do i change the primary blue color globally to match my App's primary color? Where can i find the global cofig file to change the color? Secondly, after applying the theme, i started getting CORS error, but when i switched back to Keycloak default theme, the error was gone. Is there something that needs to be done? PS: I have an existing Angular project, i'm just using Keycloak for Authentication purpose. I currently have * in my CORS setting in Keycloak so i'm sure the error isn't from Keycloak configuration and the fact that the error disappears after switching back to Keycloak default theme signifies there's something i'm missing with Keycloakify theme. Thanks in anticipation.

Thanks a lot for this video ❤❤❤

This was actually super helpful. Is the best way to incorporate themes to add keycloakify to an existing UI project? Or run the starter project and transfer the .jar file?

does css libraries like tailwind work

I created a custom theme by keycloakify . Can I send the user role from the register page?

@theuidawg I'd like your help with my simple example. If I'd a simple example of react app, what the steps should I need to do? Thanks 🙏

With your Dockerfile I get "mvn not found" error.

Great awesome video. but as of now I can see the login button page with react and vite logo as initial page but you have shown in the video like it will open react app with custom keycloakify theme that's i can't see in this current "keycloakify.starter" Could you please make a details video on it. or just you can share you repository code might be that will really helpful

Im doing everything as mentioned in the video but the keycloakify-starter theme is not available from the theme options (only "base" and "keycloak" are available)

Can I customize the admin console themes using this ?

Hi! I've seen your blog about this video, and I followed, but its not working now. docker error message is bellow. E: Unable to locate package openjdk-11-jdk Error response from daemon: The command '/bin/sh -c apt-get update && apt-get install -y openjdk-11-jdk && apt-get install -y maven;' returned a non-zero code: 100 Failed to deploy ' Dockerfile: Dockerfile': Can't retrieve image ID from build stream

Thx for the video but why i get this error when i want to start again? yarn run v1.22.21 $ copy-keycloak-resources-to-public && start-storybook -p 6006 node:internal/errors:865 const err = new Error(message); ^ Error: Command failed: npm run build at checkExecSyncError (node:child_process:885:11) at Object.execSync (node:child_process:957:15) at D:\keycloakify\keycloakify-starter ode_modules\keycloakify\bin\download-builtin-keycloak-theme.js:160:63 at step (D:\keycloakify\keycloakify-starter ode_modules\keycloakify\bin\download-builtin-keycloak-theme.js:57:23) at Object.next (D:\keycloakify\keycloakify-starter ode_modules\keycloakify\bin\download-builtin-keycloak-theme.js:38:53) at D:\keycloakify\keycloakify-starter ode_modules\keycloakify\bin\download-builtin-keycloak-theme.js:32:71 at new Promise () at __awaiter (D:\keycloakify\keycloakify-starter ode_modules\keycloakify\bin\download-builtin-keycloak-theme.js:28:12) at Object.action (D:\keycloakify\keycloakify-starter ode_modules\keycloakify\bin\download-builtin-keycloak-theme.js:91:44) { status: 1, signal: null, output: [ null, null, null ], pid: 1520, stdout: null, stderr: null } thxx for the help