{"id":14483566,"url":"https://github.com/codegouvfr/keycloak-theme-dsfr","last_synced_at":"2026-01-05T14:23:49.183Z","repository":{"id":184943948,"uuid":"672700580","full_name":"codegouvfr/keycloak-theme-dsfr","owner":"codegouvfr","description":"Generic Keycloak DSFR theme","archived":false,"fork":false,"pushed_at":"2024-05-28T10:51:21.000Z","size":9818,"stargazers_count":15,"open_issues_count":5,"forks_count":6,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-05-29T02:20:07.408Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codegouvfr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-07-31T00:45:28.000Z","updated_at":"2024-05-30T07:58:56.369Z","dependencies_parsed_at":"2024-05-30T07:58:27.648Z","dependency_job_id":null,"html_url":"https://github.com/codegouvfr/keycloak-theme-dsfr","commit_stats":null,"previous_names":["codegouvfr/keycloak-theme-dsfr"],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codegouvfr%2Fkeycloak-theme-dsfr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codegouvfr%2Fkeycloak-theme-dsfr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codegouvfr%2Fkeycloak-theme-dsfr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codegouvfr%2Fkeycloak-theme-dsfr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codegouvfr","download_url":"https://codeload.github.com/codegouvfr/keycloak-theme-dsfr/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251954845,"owners_count":21670888,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-09-03T00:01:52.279Z","updated_at":"2026-01-05T14:23:49.178Z","avatar_url":"https://github.com/codegouvfr.png","language":"TypeScript","funding_links":[],"categories":["TypeScript","Design System de l'État (DSFR)"],"sub_categories":["Keycloak DSFR"],"readme":"# Keycloak DSFR Theme\n\nWelcome to the Keycloak DSFR Theme, a Keycloak theme with [react-dsfr](https://github.com/codegouvfr/react-dsfr) and [Keycloakify](https://www.keycloakify.dev/).  \nTo see the theme in action, please visit [the SILL](https://code.gouv.fr/sill/) and attempt to log in.  \nThis theme is configurable at runtime, via providing environnement variable, there is no need to clone this repository.  \nSimply use the bundled .jar file that is released an asset with every new [GitHub Release of this project](https://github.com/codegouvfr/keycloak-theme-dsfr/releases).\n\n## Preview\n\nHere are some screenshots showcasing the theme:\n\n![image](https://github.com/codegouvfr/keycloak-theme-dsfr/assets/6702424/68fa56ab-8e12-441b-8400-fa657b51d400)\n![image](https://github.com/codegouvfr/keycloak-theme-dsfr/assets/6702424/0ef3b7f8-96f8-4f79-b956-9cc96dde67f9)\n![image](https://github.com/codegouvfr/keycloak-theme-dsfr/assets/6702424/f3797b8d-7111-4199-a587-af26641c30e3)\n\n## Setup and Configuration\n\nFor instruction on how to load the theme into your Keycloak instance you can [refer to this guide](https://docs.keycloakify.dev/importing-your-theme-in-keycloak).\n\nFor guidance on how to configure ProConnect/FranceConnect, you can refer to our comprehensive [setup guide](https://github.com/codegouvfr/sill-docs/blob/main/deploying.md#installing-keycloak).\n\n### Environment Variables\n\nSeveral environment variables can be used to tailor the theme to your needs:\n\n```env\nDSFR_THEME_HOME_URL\nDSFR_THEME_SERVICE_TITLE\nDSFR_THEME_SERVICE_TAG_LINE\nDSFR_THEME_BRAND_TOP\nDSFR_NOTICE_TITLE\nDSFR_NOTICE_DESCRIPTION\nDSFR_NOTICE_SEVERITY\n```\n\nThese variables should be made available to the process running Keycloak on your server.\n\nIf you are deploying Keycloak on Kubernetes using Helm, here's how to configure your settings:\n\n```yaml\n  ...\n  extraEnv: |\n    - name: DSFR_THEME_HOME_URL\n      value: https://code.gouv.fr\n    - name: DSFR_THEME_SERVICE_TITLE\n      value: CodeGouv\n    - name: DSFR_THEME_SERVICE_TAG_LINE\n      value: My tag line\n    - name: DSFR_THEME_BRAND_TOP\n      value: \"République\u003cbr/\u003eFrançaise\"\n    - name: DSFR_NOTICE_TITLE\n      value: Title\n    - name: DSFR_NOTICE_DESCRIPTION\n      value: Description\n    - name: DSFR_NOTICE_SEVERITY\n      value: info\n    ...\n```\n\n### Dark Mode\n\nIf you want to ensure the color scheme preference from your app to be carried when navigating to the Keycloak pages\nyou need to add `dark=true` or `dark=false` when redirecting to the login or account page.  \n\nWith [oidc-spa](https://oidc-spa.dev) and [react-dsfr](https://github.com/codegouvfr/react-dsfr), from your app you would do:  \n\n`src/oidc.ts`\n```tsx\nimport { getIsDark } from \"@codegouvfr/react-dsfr/useIsDark\";\n\n// ...\n\nbootstrapOidc({\n    issuerUri: \"...\",\n    clientId: \"...\",\n    // ...\n    extraQueryParams: {\n        get dark(){ return getIsDark() ? \"true\" : \"false\"; }\n    }\n});\n```\n\nFor the Account page: \n\n```\nhttps://\u003cyour keycloak url\u003e/realms/\u003cyour realm\u003e/account?referrer={encodeURIComponent(location.href))}l\u0026dark=true\n```\n\nOtherwise the themes will render in dark mode if the user prefers it.  \nYou can also prevent the login theme (not supported with the account theme) to ever render in dark mode\nby disabling \"dark mode\" in the Keycloak Admin Console in the `Realm Configuration` -\u003e `Themes` section.\nIf the \"Dark Mode\" option is disabled there, the \"display setting\" selector in the footer will no longer be displayed.\n\n# License\n\nThis project is licensed under the [MIT License](LICENSE), courtesy of the Direction interministérielle du numérique.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodegouvfr%2Fkeycloak-theme-dsfr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodegouvfr%2Fkeycloak-theme-dsfr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodegouvfr%2Fkeycloak-theme-dsfr/lists"}