From 41ca2342abd86b4edf8ff55e33ef8f99be1bc492 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20Archimbaud?= <loic.archimbaud@worldline.com>
Date: Tue, 25 Nov 2025 10:49:30 +0100
Subject: [PATCH] feat: Remove display setting selector if dark mode is
 disabled in the realm

---
 README.md                             |  3 ++-
 src/account/KcContext.ts              |  1 +
 src/account/KcPageStory.tsx           |  3 ++-
 src/account/Template.tsx              |  2 +-
 src/account/pages/Account.stories.tsx | 10 +++++++++-
 src/login/KcPageStory.tsx             |  3 ++-
 src/login/Template.tsx                |  2 +-
 src/login/pages/Login.stories.tsx     |  8 ++++++++
 8 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 1b2fbd1c..80c9f44d 100644
--- a/README.md
+++ b/README.md
@@ -85,7 +85,8 @@ https://<your keycloak url>/realms/<your realm>/account?referrer={encodeURICompo
 
 Otherwise the themes will render in dark mode if the user prefers it.  
 You can also prevent the login theme (not supported with the account theme) to ever render in dark mode
-by disabling "dark mode" in the Keycloak Admin Console in the `Realm Configuration` -> `Themes` section.  
+by disabling "dark mode" in the Keycloak Admin Console in the `Realm Configuration` -> `Themes` section.
+If the "Dark Mode" option is disabled there, the "display setting" selector in the footer will no longer be displayed.
 
 # License
 
diff --git a/src/account/KcContext.ts b/src/account/KcContext.ts
index a043f253..23b24d7d 100644
--- a/src/account/KcContext.ts
+++ b/src/account/KcContext.ts
@@ -5,6 +5,7 @@ import type { KcEnvName, ThemeName } from "../kc.gen";
 export type KcContextExtension = {
     themeName: ThemeName;
     properties: Record<KcEnvName, string> & {};
+    darkMode?: boolean;
 };
 
 export type KcContextExtensionPerPage = {};
diff --git a/src/account/KcPageStory.tsx b/src/account/KcPageStory.tsx
index c0595475..2d7d6231 100644
--- a/src/account/KcPageStory.tsx
+++ b/src/account/KcPageStory.tsx
@@ -9,7 +9,8 @@ const kcContextExtension: KcContextExtension = {
     themeName: themeNames[0],
     properties: {
         ...kcEnvDefaults
-    }
+    },
+    darkMode: true
 };
 const kcContextExtensionPerPage: KcContextExtensionPerPage = {};
 
diff --git a/src/account/Template.tsx b/src/account/Template.tsx
index d1bb7b8a..e0a0f347 100644
--- a/src/account/Template.tsx
+++ b/src/account/Template.tsx
@@ -167,7 +167,7 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                 </div>
             </div>
 
-            <DsfrFooter accessibility="fully compliant" bottomItems={[headerFooterDisplayItem]} />
+            <DsfrFooter accessibility="fully compliant" bottomItems={[kcContext.darkMode ? headerFooterDisplayItem : undefined]} />
         </div>
     );
 }
diff --git a/src/account/pages/Account.stories.tsx b/src/account/pages/Account.stories.tsx
index 6147dc3d..83a8c5e1 100644
--- a/src/account/pages/Account.stories.tsx
+++ b/src/account/pages/Account.stories.tsx
@@ -13,7 +13,15 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
-    render: () => <KcPageStory />
+  render: () => <KcPageStory />
+};
+
+export const DefaultDarkModeDisabled: Story = {
+  render: () => <KcPageStory
+      kcContext={{
+        darkMode: false
+      }}
+  />
 };
 
 /**
diff --git a/src/login/KcPageStory.tsx b/src/login/KcPageStory.tsx
index 030a1751..50cf2ebb 100644
--- a/src/login/KcPageStory.tsx
+++ b/src/login/KcPageStory.tsx
@@ -12,7 +12,8 @@ const kcContextExtension: KcContextExtension = {
     },
     client: {
         baseUrl: "https://my-theme.keycloakify.dev"
-    }
+    },
+    darkMode: true
 };
 const kcContextExtensionPerPage: KcContextExtensionPerPage = {};
 
diff --git a/src/login/Template.tsx b/src/login/Template.tsx
index d4f684f3..5ab395db 100644
--- a/src/login/Template.tsx
+++ b/src/login/Template.tsx
@@ -212,7 +212,7 @@ export default function Template(props: Props) {
                     </div>
                 </div>
             </main>
-            <DSFRFooter accessibility="fully compliant" bottomItems={[headerFooterDisplayItem]} />
+            <DSFRFooter accessibility="fully compliant" bottomItems={[kcContext.darkMode ? headerFooterDisplayItem : undefined]} />
         </div>
     );
 }
diff --git a/src/login/pages/Login.stories.tsx b/src/login/pages/Login.stories.tsx
index f14cfd13..0003bc57 100644
--- a/src/login/pages/Login.stories.tsx
+++ b/src/login/pages/Login.stories.tsx
@@ -16,6 +16,14 @@ export const Default: Story = {
     render: () => <KcPageStory />
 };
 
+export const DefaultDarkModeDisabled: Story = {
+  render: () => <KcPageStory
+      kcContext={{
+        darkMode: false
+      }}
+  />
+};
+
 export const WithInvalidCredential: Story = {
     render: () => (
         <KcPageStory