Doc needed about theming colors

[GioviQ]

Inspecting html I discovered that Patternfly is used.

Please can you provide some hints in docs to change colors globally in keycloakify-starter?

https://www.patternfly.org/design-foundations/colors

[GioviQ]

I see now the Patternfly is quoted in Account Theme only in https://docs.keycloakify.dev/account-theme/single-page

[garronej]

Hello @GioviQ,

Yes, PatternFly is the CSS framework used by RedHat for building all their UIs, and since Keycloak is a RedHat product, it naturally uses PatternFly as well.

However, most developers creating Keycloak themes prefer to use other, more widely adopted solutions instead of relying on PatternFly. That being said, overriding PatternFly's colors is still a good approach, and there isn’t anything specific to Keycloakify that would complicate this. You can simply refer to the official PatternFly documentation for guidance.

For example, to change the theme colors, you can do something like this:

And here’s what the result will look like:

[GioviQ]

I don't know why but in my case overriding css variables does not work.

[garronej]

My two first screenshot are from the starter repo, all I did was adding the main.css file and import it.

[GioviQ]

I am aging, I don't see well anymore, there was a "-" missing in variables names. Sorry.

[garronej]

Haha not problem!

You should give ChatGPT a try, this is how I got the answer:

[GioviQ]

Thanks Next step trying to understand how to add missing italian translations to Account UI Single-page... 😫