Keycloak DSFR Theme

Welcome to the Keycloak DSFR Theme, a Keycloak theme with react-dsfr and Keycloakify.
To see the theme in action, please visit the SILL and attempt to log in.
This theme is configurable at runtime, via providing environnement variable, there is no need to clone this repository.
Simply use the bundled .jar file that is released an asset with every new GitHub Release of this project.

NOTE: Keycloak 22 (and only this specific version) is not fully supported. In this version, only the Login theme works, not the Account theme.

Preview

Here are some screenshots showcasing the theme:

Setup and Configuration

For instruction on how to load the theme into your Keycloak instance you can refer to this guide.

For guidance on how to configure ProConnect/FranceConnect, you can refer to our comprehensive setup guide.

Environment Variables

Several environment variables can be used to tailor the theme to your needs:

DSFR_THEME_HOME_URL
DSFR_THEME_SERVICE_TITLE
DSFR_THEME_BRAND_TOP

These variables should be made available to the process running Keycloak on your server.

If you are deploying Keycloak on Kubernetes using Helm, here's how to configure your settings:

  ...
  extraEnv: |
    - name: DSFR_THEME_HOME_URL
      value: https://code.gouv.fr
    - name: DSFR_THEME_SERVICE_TITLE
      value: CodeGouv
    - name: DSFR_THEME_BRAND_TOP
      value: "République<br/>Française"
    ...

Dark Mode Persistence

If you want to ensure the color scheme preference from your app to be persisted when navigating to the Keycloak pages you need to add dark=true or dark=false when redirecting to the login or account page.

With oidc-spa and react-dsfr for the login theme:

src/oidc.ts

import { getIsDark } from "@codegouvfr/react-dsfr/useIsDark";
export const { OidcProvider, useOidc } = createReactOidc({
    // ...
    extraQueryParams: ()=> ({
        dark: getIsDark() ? "true" : "false"
    })
});

For the Account page:

https://your-keycloak-url/auth/realms/your-realm/account?referrer=your-app-url&dark=true

License

This project is licensed under the MIT License, courtesy of the Direction interministérielle du numérique.