Dark mode persistance

Author: garronej

README.md

@@ -47,6 +47,29 @@ If you are deploying Keycloak on Kubernetes using Helm, here's how to configure
     ...
 ```
 
+### 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](https://oidc-spa.dev) and [react-dsfr](https://github.com/codegouvfr/react-dsfr) for the login theme:  
+
+`src/oidc.ts`
+```tsx
+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
 

src/account/Template.tsx

@@ -1,3 +1,4 @@
+import "@codegouvfr/react-dsfr/main.css";
 import { useEffect } from "react";
 import { clsx } from "keycloakify/tools/clsx";
 import { kcSanitize } from "keycloakify/lib/kcSanitize";
@@ -7,17 +8,16 @@ import { useInitialize } from "keycloakify/account/Template.useInitialize";
 import type { TemplateProps } from "keycloakify/account/TemplateProps";
 import type { I18n } from "./i18n";
 import type { KcContext } from "./KcContext";
-import "@codegouvfr/react-dsfr/main.css";
 import { startReactDsfr } from "@codegouvfr/react-dsfr/spa";
-import { getReferrerUrl } from "../login/shared/getReferrerUrl";
 import { Header as DsfrHeader } from "@codegouvfr/react-dsfr/Header";
 import { Footer as DsfrFooter } from "@codegouvfr/react-dsfr/Footer";
 import { SideMenu } from "@codegouvfr/react-dsfr/SideMenu";
 import { Alert } from "@codegouvfr/react-dsfr/Alert";
 import { headerFooterDisplayItem } from "@codegouvfr/react-dsfr/Display";
 import { fr } from "@codegouvfr/react-dsfr";
+import { getColorScheme } from "../shared/getColorScheme";
 
-startReactDsfr({ defaultColorScheme: "system" });
+startReactDsfr({ defaultColorScheme: getColorScheme() ?? "system" });
 
 export default function Template(props: TemplateProps<KcContext, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, active, classes, children } = props;
@@ -59,7 +59,7 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                     />
                 }
                 homeLinkProps={{
-                    href: getReferrerUrl(),
+                    href: referrer?.url ?? "#",
                     title: "Accueil"
                 }}
                 serviceTitle={
@@ -70,7 +70,6 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                     />
                 }
                 quickAccessItems={[
-                    headerFooterDisplayItem,
                     ...(referrer?.url
                         ? [
                               <a key="back-to-link" href={referrer.url} id="referrer" className={fr.cx("fr-btn", "fr-btn--tertiary-no-outline")}>

src/login/Template.tsx

@@ -15,8 +15,9 @@ import { Alert } from "@codegouvfr/react-dsfr/Alert";
 import { fr } from "@codegouvfr/react-dsfr";
 import "@codegouvfr/react-dsfr/main.css";
 import { startReactDsfr } from "@codegouvfr/react-dsfr/spa";
+import { getColorScheme } from "../shared/getColorScheme";
 
-startReactDsfr({ defaultColorScheme: "system" });
+startReactDsfr({ defaultColorScheme: getColorScheme() ?? "system" });
 
 type Props = TemplateProps<KcContext, I18n>;
 
@@ -65,7 +66,27 @@ export default function Template(props: Props) {
 
     return (
         <div style={{ minHeight: "100vh", display: "flex", flexDirection: "column" }}>
-            <Header kcContext={kcContext} />
+            <DsfrHeader
+                brandTop={
+                    <div
+                        dangerouslySetInnerHTML={{
+                            __html: kcContext.properties.DSFR_THEME_BRAND_TOP
+                        }}
+                    />
+                }
+                homeLinkProps={{
+                    href: getReferrerUrl(),
+                    title: kcContext.realm.displayName
+                }}
+                serviceTitle={
+                    <span
+                        dangerouslySetInnerHTML={{
+                            __html:
+                                kcContext.properties.DSFR_THEME_SERVICE_TITLE || kcContext.realm.displayNameHtml || kcContext.realm.displayName || ""
+                        }}
+                    />
+                }
+            />
             <div
                 style={{
                     flex: 1,
@@ -159,29 +180,3 @@ export default function Template(props: Props) {
         </div>
     );
 }
-
-export function Header({ kcContext }: { kcContext: Props["kcContext"] }) {
-    return (
-        <DsfrHeader
-            brandTop={
-                <div
-                    dangerouslySetInnerHTML={{
-                        __html: kcContext.properties.DSFR_THEME_BRAND_TOP
-                    }}
-                />
-            }
-            homeLinkProps={{
-                href: getReferrerUrl(),
-                title: kcContext.realm.displayName
-            }}
-            quickAccessItems={[headerFooterDisplayItem]}
-            serviceTitle={
-                <span
-                    dangerouslySetInnerHTML={{
-                        __html: kcContext.properties.DSFR_THEME_SERVICE_TITLE || kcContext.realm.displayNameHtml || kcContext.realm.displayName || ""
-                    }}
-                />
-            }
-        />
-    );
-}

src/login/shared/getReferrerUrl.ts

@@ -11,7 +11,7 @@ function getRefererUrlFromUrl() {
     return redirectUrl.origin;
 }
 
-const sessionStorageKey = "theme_refererUrl";
+const sessionStorageKey = "keycloak-theme-dsfr:referrer";
 
 export function getReferrerUrl() {
     const refererUrl = getRefererUrlFromUrl();

src/shared/getColorScheme.ts

@@ -0,0 +1,51 @@
+const SESSION_STORAGE_KEY = "keycloak-theme-dsfr:isDark";
+
+function getIsDark(): boolean | undefined {
+    from_url: {
+
+        const url = new URL(window.location.href);
+
+        const value = url.searchParams.get("dark");
+
+        if (value === null) {
+            break from_url;
+        }
+
+        {
+            url.searchParams.delete("dark");
+            window.history.replaceState({}, "", url.toString());
+        }
+
+        const isDark = value === "true";
+
+        sessionStorage.setItem(SESSION_STORAGE_KEY, `${isDark}`);
+
+        return isDark;
+    }
+
+    from_session_storage: {
+
+        const value = sessionStorage.getItem(SESSION_STORAGE_KEY);
+
+        if (value === null) {
+            break from_session_storage;
+        }
+
+        return value === "true";
+
+    }
+
+    return undefined;
+}
+
+export function getColorScheme(){
+
+    const isDark = getIsDark();
+
+    if( isDark === undefined ) {
+        return undefined;
+    }
+
+    return isDark ? "dark" : "light";
+
+}