Editing or Removing Keycloak Styles

For CSS Level Customization Keycloak provides a standardized way of customization through the use of theme.properties. This way Keycloak provides a basic theme. Follow this tutorial if you want to port an existing theme or develop a new theme based on the Keycloak Base Theme and without having to overwrite the pages

Styling a Keycloak Class with CSS

Upon inspecting the DOM in your login theme you can see that an element usually has a class starting with kc in this case kcFormHeaderClass. The succeeding class login-pf-header represents Patternfly styles and is mapped by the kcFormHeaderClass.

The header element has multiple classes

If you want to add a red border to the header class you can do so by directly overwriting the Keycloak CSS class in your styles.css

styles.css

.kcFormHeaderClass {
    border: 3px solid red;
}

Login Header with red border

Styling a Keycloak Class with Custom Class Bindings

There are mutliple scenarios where you want to bind custom classes:

1. Applying Patternfly, Tailwind or Bootstrap classes

2. Applying your own CSS Classes

Let's say that we would like to add a red border to the header element of the login page but with a class red-border instead of applying the style directly.

You can define a CSS class and bind it using the classes array in your KcPage. You can also bind any other class from e. g. Patternfly , Tailwind or Boostrap

styles.css

.red-border {
    border: 3px solid red;
}

KcPage.tsx/ KcPage.ts

const classes = {
  kcFormHeaderClass: "login-pf-header red-border",
} satisfies { [key in ClassKey]?: string };

Login Header with red border

Removing a Default Style

Keycloakify enables you to use this Keycloak concept to easily edit the default styles. For example let's remove the login-pf-header class:

React

src/login/KcPage.tsx

const classes = {
    kcFormHeaderClass: ""
} satisfies { [key in ClassKey]?: string };

Angular

src/login/KcPage.ts

const classes = {
    kcFormHeaderClass: ""
} satisfies { [key in ClassKey]?: string };

We can see that now, the header element has no other class binding than kcFormHeaderClass as we removed the login-pf-header class. As a result the header text is now aligned to the left.

Now the header has only one class

Removing all Default Styles

Maybe you'd prefer to remove all default styles at once you can do that by setting doUseDefaultCss to false. This option is also available to set on a per page basis.

React

src/login/KcPages.tsx

export default function KcPage(props: { kcContext: KcContext }) {

    return (
        <Suspense>
            {(() => {
                switch (kcContext.pageId) {
                    default:
                        return (
                            <DefaultPage
                                kcContext={kcContext}
                                i18n={i18n}
                                classes={classes}
                                Template={Template}
                                doUseDefaultCss={false}
                                UserProfileFormFields={UserProfileFormFields}
                                doMakeUserConfirmPassword={doMakeUserConfirmPassword}
                            />
                        );
                }
            })()}
        </Suspense>
    );
}

Angular

src/login/KcPage.ts

const classes = {} satisfies { [key in ClassKey]?: string };
const doUseDefaultCss = false;
const doMakeUserConfirmPassword = true;

export async function getKcPage(pageId: KcContext['pageId']): Promise<KcPage> {
  switch (pageId) {
    default:
      return {
        PageComponent: await getDefaultPageComponent(pageId),
        TemplateComponent,
        UserProfileFormFieldsComponent,
        doMakeUserConfirmPassword,
        doUseDefaultCss,
        classes,
      };
  }
}

However be aware that re-styling everything involves quite a bit of work:

The login page with doUseDefaultCss set to false