Merge pull request #33 from LoicArc/feature/disable-dark-mode

feat: Remove display setting selector if dark mode is disabled in the…

Author: garronej

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
 

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 = {};

src/account/KcPageStory.tsx

@@ -9,7 +9,8 @@ const kcContextExtension: KcContextExtension = {
     themeName: themeNames[0],
     properties: {
         ...kcEnvDefaults
-    }
+    },
+    darkMode: true
 };
 const kcContextExtensionPerPage: KcContextExtensionPerPage = {};
 

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>
     );
 }

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
+      }}
+  />
 };
 
 /**

src/login/KcPageStory.tsx

@@ -12,7 +12,8 @@ const kcContextExtension: KcContextExtension = {
     },
     client: {
         baseUrl: "https://my-theme.keycloakify.dev"
-    }
+    },
+    darkMode: true
 };
 const kcContextExtensionPerPage: KcContextExtensionPerPage = {};
 

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>
     );
 }

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