Observe the admin policy regarding dark mode allowance set by the Keycloak admin

Author: garronej

README.md

@@ -47,9 +47,9 @@ If you are deploying Keycloak on Kubernetes using Helm, here's how to configure
     ...
 ```
 
-### Dark Mode Persistence
+### Dark Mode
 
-If you want to ensure the color scheme preference from your app to be persisted when navigating to the Keycloak pages
+If you want to ensure the color scheme preference from your app to be carried 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:  
@@ -71,6 +71,10 @@ For the Account page:
 https://<your keycloak url>/realms/<your realm>/account?referrer={encodeURIComponent(location.href))}l&dark=true
 ```
 
+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.  
+
 # License
 
 This project is licensed under the [MIT License](LICENSE), courtesy of the Direction interministérielle du numérique.

src/login/KcContext.ts

@@ -10,6 +10,7 @@ export type KcContextExtension = {
     client: {
         baseUrl?: string;
     };
+    darkMode?: boolean;
 };
 
 export type KcContextExtensionPerPage = {};

src/main.tsx

@@ -1,6 +1,7 @@
 import { createRoot } from "react-dom/client";
 import { StrictMode } from "react";
 import { KcPage } from "./kc.gen";
+import { setKcContextDarkModePolicy } from "./shared/getColorScheme";
 
 // The following block can be uncommented to test a specific page with `yarn dev`
 // Don't forget to comment back or your bundle size will increase
@@ -14,6 +15,12 @@ import { KcPage } from "./kc.gen";
 //     });
 // }
 
+if (window.kcContext !== undefined && window.kcContext.themeType === "login") {
+    setKcContextDarkModePolicy({
+        kcContextDarkMode: window.kcContext.darkMode
+    });
+}
+
 createRoot(document.getElementById("root")!).render(
     <StrictMode>
         {!window.kcContext ? (

src/shared/getColorScheme.ts

@@ -1,8 +1,22 @@
 const SESSION_STORAGE_KEY = "keycloak-theme-dsfr:isDark";
 
+let kcContextDarkMode: boolean | undefined = undefined;
+
+export function setKcContextDarkModePolicy(params: {
+    kcContextDarkMode: boolean | undefined;
+}): void {
+    kcContextDarkMode = params.kcContextDarkMode;
+}
+
 function getIsDark(): boolean | undefined {
-    from_url: {
+    from_admin_policy: {
+        if (kcContextDarkMode === undefined || kcContextDarkMode === true) {
+            break from_admin_policy;
+        }
+        return false;
+    }
 
+    from_url: {
         const url = new URL(window.location.href);
 
         const value = url.searchParams.get("dark");
@@ -24,28 +38,24 @@ function getIsDark(): boolean | undefined {
     }
 
     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(){
-
+export function getColorScheme() {
     const isDark = getIsDark();
 
-    if( isDark === undefined ) {
+    if (isDark === undefined) {
         return undefined;
     }
 
     return isDark ? "dark" : "light";
-
 }