From 40b0c94dbd7e4d2861842955ad9c632539d16bfb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20Barto=C5=A1?= <mabartos@redhat.com>
Date: Thu, 23 Jul 2026 15:42:35 +0200
Subject: [PATCH] Passkey icons use wrong color variant when realm disables
 dark mode (#51091)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes #51087

Signed-off-by: Martin Bartoš <mabartos@redhat.com>
(cherry picked from commit c50bfbdd2a01654bb28ec7e17a16a9e3e77c173a)
---
 .../maven-resources/theme/keycloak.v3/account/index.ftl         | 1 +
 js/apps/account-ui/src/account-security/SigningIn.tsx           | 2 +-
 .../admin-ui/maven-resources/theme/keycloak.v2/admin/index.ftl  | 1 +
 .../maven-resources/theme/my-account/account/index.ftl.mu       | 1 +
 js/libs/ui-shared/src/context/environment.ts                    | 2 ++
 .../resources/theme/keycloak.v2/login/webauthn-authenticate.ftl | 2 +-
 6 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/js/apps/account-ui/maven-resources/theme/keycloak.v3/account/index.ftl b/js/apps/account-ui/maven-resources/theme/keycloak.v3/account/index.ftl
index 225349a1cd0d..af6b1d7f43a9 100644
--- a/js/apps/account-ui/maven-resources/theme/keycloak.v3/account/index.ftl
+++ b/js/apps/account-ui/maven-resources/theme/keycloak.v3/account/index.ftl
@@ -155,6 +155,7 @@
         "resourceUrl": "${resourceUrl}",
         "logo": "${properties.logo!""}",
         "logoUrl": "${properties.logoUrl!""}",
+        "darkMode": ${darkMode?c},
         "baseUrl": "${baseUrl}",
         "locale": "${locale}",
         "referrerName": "${referrerName!""}",
diff --git a/js/apps/account-ui/src/account-security/SigningIn.tsx b/js/apps/account-ui/src/account-security/SigningIn.tsx
index 8ff4281824f4..a1325a37a1ef 100644
--- a/js/apps/account-ui/src/account-security/SigningIn.tsx
+++ b/js/apps/account-ui/src/account-security/SigningIn.tsx
@@ -130,7 +130,7 @@ export const SigningIn = () => {
             >
               <div className="pf-v5-c-icon pf-m-xl">
                 <picture>
-                  {iconDarkSrc && (
+                  {context.environment.darkMode && iconDarkSrc && (
                     <source
                       srcSet={iconDarkSrc}
                       media="(prefers-color-scheme: dark)"
diff --git a/js/apps/admin-ui/maven-resources/theme/keycloak.v2/admin/index.ftl b/js/apps/admin-ui/maven-resources/theme/keycloak.v2/admin/index.ftl
index bf7dd303df57..e68b4215a9c4 100644
--- a/js/apps/admin-ui/maven-resources/theme/keycloak.v2/admin/index.ftl
+++ b/js/apps/admin-ui/maven-resources/theme/keycloak.v2/admin/index.ftl
@@ -156,6 +156,7 @@
         "resourceUrl": "${resourceUrl}",
         "logo": "${properties.logo!""}",
         "logoUrl": "${properties.logoUrl!""}",
+        "darkMode": ${darkMode?c},
         "consoleBaseUrl": "${consoleBaseUrl}",
         "masterRealm": "${masterRealm}",
         "resourceVersion": "${resourceVersion}"
diff --git a/js/apps/create-keycloak-theme/templates/maven-resources/theme/my-account/account/index.ftl.mu b/js/apps/create-keycloak-theme/templates/maven-resources/theme/my-account/account/index.ftl.mu
index e45bb5864e10..e42d4c19d225 100644
--- a/js/apps/create-keycloak-theme/templates/maven-resources/theme/my-account/account/index.ftl.mu
+++ b/js/apps/create-keycloak-theme/templates/maven-resources/theme/my-account/account/index.ftl.mu
@@ -126,6 +126,7 @@
         "resourceUrl": "${resourceUrl}",
         "logo": "${properties.logo!""}",
         "logoUrl": "${properties.logoUrl!""}",
+        "darkMode": ${darkMode?c},
         "baseUrl": "${baseUrl}",
         "locale": "${locale}",
         "referrerName": "${referrerName!""}",
diff --git a/js/libs/ui-shared/src/context/environment.ts b/js/libs/ui-shared/src/context/environment.ts
index 3423af921261..bc8633ecd249 100644
--- a/js/libs/ui-shared/src/context/environment.ts
+++ b/js/libs/ui-shared/src/context/environment.ts
@@ -19,6 +19,8 @@ export type BaseEnvironment = {
   logo: string;
   /** The URL to be followed when the logo is clicked. */
   logoUrl: string;
+  /** Whether dark mode is enabled for the realm. */
+  darkMode: boolean;
   /** The scopes to be requested when sending authorization requests*/
   scope?: string;
 };
diff --git a/themes/src/main/resources/theme/keycloak.v2/login/webauthn-authenticate.ftl b/themes/src/main/resources/theme/keycloak.v2/login/webauthn-authenticate.ftl
index 780f492678d1..ac6cba3f335e 100644
--- a/themes/src/main/resources/theme/keycloak.v2/login/webauthn-authenticate.ftl
+++ b/themes/src/main/resources/theme/keycloak.v2/login/webauthn-authenticate.ftl
@@ -38,7 +38,7 @@
                                             <div class="${properties.kcWebAuthnDefaultIcon!}">
                                             <#if authenticator.iconLight?? || authenticator.iconDark??>
                                                 <picture>
-                                                    <#if authenticator.iconDark??>
+                                                    <#if darkMode && authenticator.iconDark??>
                                                         <source srcset="${url.resourcesPath}/img/passkeys/${authenticator.iconDark}" media="(prefers-color-scheme: dark)">
                                                     </#if>
                                                     <img src="${url.resourcesPath}/img/passkeys/${authenticator.iconLight!authenticator.iconDark!''}" alt="" width="40" height="40">