From 19ef0a608b0dbf878bbace2cb38e2de878aeb8c8 Mon Sep 17 00:00:00 2001
From: Erik Jan de Wit <erikjan.dewit@gmail.com>
Date: Thu, 31 Oct 2024 11:19:03 +0100
Subject: [PATCH] Add switch to toggle dark mode  (#33822)

Closes #33821

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>
Signed-off-by: Jon Koops <jonkoops@gmail.com>
Co-authored-by: Jon Koops <jonkoops@gmail.com>
---
 .../release_notes/topics/26_1_0.adoc          |   2 +
 .../theme/keycloak.v3/account/index.ftl       |   4 +-
 .../realm_settings/RealmSettingsPage.ts       |   8 +-
 .../theme/keycloak.v2/admin/index.ftl         |   4 +-
 .../admin/messages/messages_en.properties     |   2 +
 .../admin-ui/src/realm-settings/ThemesTab.tsx | 244 +++++-------------
 .../select-control/SingleSelectControl.tsx    |   2 +-
 .../FreeMarkerLoginFormsProvider.java         |   5 +-
 .../services/error/KeycloakErrorHandler.java  |   7 +-
 .../resources/account/AccountConsole.java     |   2 +
 .../resources/admin/AdminConsole.java         |   2 +
 .../theme/keycloak.v2/login/template.ftl      |   4 +-
 12 files changed, 93 insertions(+), 193 deletions(-)

diff --git a/docs/documentation/release_notes/topics/26_1_0.adoc b/docs/documentation/release_notes/topics/26_1_0.adoc
index 1cb30d5645..5a78be4f20 100644
--- a/docs/documentation/release_notes/topics/26_1_0.adoc
+++ b/docs/documentation/release_notes/topics/26_1_0.adoc
@@ -9,6 +9,8 @@ If you are using a custom theme that extends any of the `keycloak` themes and ar
 darkMode=false
 ----
 
+Alternatively, you can disable dark mode support for the built-in Keycloak themes on a per-realm basis by turning off the "Dark mode" setting under the "Theme" tab in the realm settings.
+
 = LDAP users are created as enabled by default when using Microsoft Active Directory
 
 If you are using Microsoft AD and creating users through the administrative interfaces, the user will created as enabled by default.
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 ea568b9116..eeef712769 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
@@ -5,7 +5,7 @@
     <base href="${resourceUrl}/">
     <link rel="icon" type="${properties.favIconType!'image/svg+xml'}" href="${resourceUrl}${properties.favIcon!'/favicon.svg'}">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="color-scheme" content="light${(properties.darkMode)?boolean?then(' dark', '')}">
+    <meta name="color-scheme" content="light${darkMode?then(' dark', '')}">
     <meta name="description" content="${properties.description!'The Account Console is a web-based interface for managing your account.'}">
     <title>${properties.title!'Account Management'}</title>
     <style>
@@ -58,7 +58,7 @@
         }
       }
     </script>
-    <#if properties.darkMode?boolean>
+    <#if darkMode>
       <script type="module" async blocking="render">
           const DARK_MODE_CLASS = "${properties.kcDarkModeClass}";
           const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
diff --git a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_settings/RealmSettingsPage.ts b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_settings/RealmSettingsPage.ts
index 50d5092afb..e064b1383d 100644
--- a/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_settings/RealmSettingsPage.ts
+++ b/js/apps/admin-ui/cypress/support/pages/admin-ui/manage/realm_settings/RealmSettingsPage.ts
@@ -24,13 +24,13 @@ export default class RealmSettingsPage extends CommonPage {
   userProfileTab = "rs-user-profile-tab";
   tokensTab = "rs-tokens-tab";
   selectLoginTheme = "#kc-login-theme";
-  loginThemeList = "[data-testid='select-login-theme']";
+  loginThemeList = "[data-testid='select-loginTheme']";
   selectAccountTheme = "#kc-account-theme";
-  accountThemeList = "[data-testid='select-account-theme']";
+  accountThemeList = "[data-testid='select-accountTheme']";
   selectAdminTheme = "#kc-admin-ui-theme";
-  adminThemeList = "[data-testid='select-admin-theme']";
+  adminThemeList = "[data-testid='select-adminTheme']";
   selectEmailTheme = "#kc-email-theme";
-  emailThemeList = "[data-testid='select-email-theme']";
+  emailThemeList = "[data-testid='select-emailTheme']";
   ssoSessionIdleSelectMenu = "#kc-sso-session-idle-select-menu";
   ssoSessionIdleSelectMenuList = "#kc-sso-session-idle-select-menu ul";
   ssoSessionMaxSelectMenu = "#kc-sso-session-max-select-menu";
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 eacd4a84e8..2a91134add 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
@@ -5,7 +5,7 @@
     <base href="${resourceUrl}/">
     <link rel="icon" type="${properties.favIconType!'image/svg+xml'}" href="${resourceUrl}${properties.favIcon!'/favicon.svg'}">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="color-scheme" content="light${(properties.darkMode)?boolean?then(' dark', '')}">
+    <meta name="color-scheme" content="light${darkMode?then(' dark', '')}">
     <meta name="description" content="${properties.description!'The Keycloak Administration Console is a web-based interface for managing Keycloak.'}">
     <title>${properties.title!'Keycloak Administration Console'}</title>
     <style>
@@ -60,7 +60,7 @@
         }
       }
     </script>
-    <#if properties.darkMode?boolean>
+    <#if darkMode>
       <script type="module" async blocking="render">
           const DARK_MODE_CLASS = "${properties.kcDarkModeClass}";
           const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
diff --git a/js/apps/admin-ui/maven-resources/theme/keycloak.v2/admin/messages/messages_en.properties b/js/apps/admin-ui/maven-resources/theme/keycloak.v2/admin/messages/messages_en.properties
index c997bb2083..dee176cac3 100644
--- a/js/apps/admin-ui/maven-resources/theme/keycloak.v2/admin/messages/messages_en.properties
+++ b/js/apps/admin-ui/maven-resources/theme/keycloak.v2/admin/messages/messages_en.properties
@@ -3273,6 +3273,8 @@ groupDuplicated=Group duplicated
 duplicateAGroup=Duplicate group
 couldNotFetchClientRoleMappings=Could not fetch client role mappings\: {{error}}
 duplicateGroupWarning=Duplication of groups with a large number of subgroups is not supported. Please ensure that the group you are duplicating does not have a large number of subgroups.
+darkModeEnabled=Dark mode
+darkModeEnabledHelp=If enabled the dark variant of the theme will be applied based on user preference through an operating system setting (e.g. light or dark mode) or a user agent setting, if disabled only the light variant will be used. This setting only applies to themes that support dark and light variants, on themes that do not support this feature it will have no effect.
 showMemberships=Show memberships
 showMembershipsTitle={{username}} Group Memberships
 noGroupMembershipsText=This user is not a member of any groups.
diff --git a/js/apps/admin-ui/src/realm-settings/ThemesTab.tsx b/js/apps/admin-ui/src/realm-settings/ThemesTab.tsx
index 4083734df9..5e79c35de6 100644
--- a/js/apps/admin-ui/src/realm-settings/ThemesTab.tsx
+++ b/js/apps/admin-ui/src/realm-settings/ThemesTab.tsx
@@ -1,20 +1,11 @@
 import type RealmRepresentation from "@keycloak/keycloak-admin-client/lib/defs/realmRepresentation";
-import {
-  HelpItem,
-  KeycloakSelect,
-  SelectVariant,
-} from "@keycloak/keycloak-ui-shared";
-import {
-  ActionGroup,
-  Button,
-  FormGroup,
-  PageSection,
-  SelectOption,
-} from "@patternfly/react-core";
-import { useEffect, useState } from "react";
-import { Controller, useForm } from "react-hook-form";
+import { SelectControl } from "@keycloak/keycloak-ui-shared";
+import { ActionGroup, Button, PageSection } from "@patternfly/react-core";
+import { useEffect } from "react";
+import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { FormAccess } from "../components/form/FormAccess";
+import { DefaultSwitchControl } from "../components/SwitchControl";
 import { useServerInfo } from "../context/server-info/ServerInfoProvider";
 import { convertToFormValues } from "../util";
 
@@ -29,12 +20,8 @@ export const RealmSettingsThemesTab = ({
 }: RealmSettingsThemesTabProps) => {
   const { t } = useTranslation();
 
-  const [loginThemeOpen, setLoginThemeOpen] = useState(false);
-  const [accountThemeOpen, setAccountThemeOpen] = useState(false);
-  const [adminUIThemeOpen, setAdminUIThemeOpen] = useState(false);
-  const [emailThemeOpen, setEmailThemeOpen] = useState(false);
-
-  const { control, handleSubmit, setValue } = useForm<RealmRepresentation>();
+  const form = useForm<RealmRepresentation>();
+  const { handleSubmit, setValue } = form;
   const themeTypes = useServerInfo().themes!;
 
   const setupForm = () => {
@@ -42,6 +29,11 @@ export const RealmSettingsThemesTab = ({
   };
   useEffect(setupForm, []);
 
+  const appendEmptyChoice = (items: { key: string; value: string }[]) => [
+    { key: "", value: t("choose") },
+    ...items,
+  ];
+
   return (
     <PageSection variant="light">
       <FormAccess
@@ -50,178 +42,70 @@ export const RealmSettingsThemesTab = ({
         className="pf-v5-u-mt-lg"
         onSubmit={handleSubmit(save)}
       >
-        <FormGroup
-          label={t("loginTheme")}
-          fieldId="kc-login-theme"
-          labelIcon={
-            <HelpItem
-              helpText={t("loginThemeHelp")}
-              fieldLabelId="loginTheme"
-            />
-          }
-        >
-          <Controller
+        <FormProvider {...form}>
+          <DefaultSwitchControl
+            name="attributes.darkMode"
+            labelIcon={t("darkModeEnabledHelp")}
+            label={t("darkModeEnabled")}
+            defaultValue="true"
+            stringify
+          />
+          <SelectControl
+            id="kc-login-theme"
             name="loginTheme"
-            control={control}
-            defaultValue=""
-            render={({ field }) => (
-              <KeycloakSelect
-                toggleId="kc-login-theme"
-                onToggle={() => setLoginThemeOpen(!loginThemeOpen)}
-                onSelect={(value) => {
-                  field.onChange(value as string);
-                  setLoginThemeOpen(false);
-                }}
-                selections={field.value}
-                variant={SelectVariant.single}
-                isOpen={loginThemeOpen}
-                placeholderText={t("selectATheme")}
-                data-testid="select-login-theme"
-                aria-label={t("selectLoginTheme")}
-              >
-                {themeTypes.login.map((theme, idx) => (
-                  <SelectOption
-                    selected={theme.name === field.value}
-                    key={`login-theme-${idx}`}
-                    value={theme.name}
-                  >
-                    {theme.name}
-                  </SelectOption>
-                ))}
-              </KeycloakSelect>
+            label={t("loginTheme")}
+            labelIcon={t("loginThemeHelp")}
+            controller={{ defaultValue: "" }}
+            options={appendEmptyChoice(
+              themeTypes.login.map((theme) => ({
+                key: theme.name,
+                value: theme.name,
+              })),
             )}
           />
-        </FormGroup>
-        <FormGroup
-          label={t("accountTheme")}
-          fieldId="kc-account-theme"
-          labelIcon={
-            <HelpItem
-              helpText={t("accountThemeHelp")}
-              fieldLabelId="accountTheme"
-            />
-          }
-        >
-          <Controller
+          <SelectControl
+            id="kc-account-theme"
             name="accountTheme"
-            control={control}
-            defaultValue=""
-            render={({ field }) => (
-              <KeycloakSelect
-                toggleId="kc-account-theme"
-                onToggle={() => setAccountThemeOpen(!accountThemeOpen)}
-                onSelect={(value) => {
-                  field.onChange(value as string);
-                  setAccountThemeOpen(false);
-                }}
-                selections={field.value}
-                variant={SelectVariant.single}
-                aria-label={t("selectAccountTheme")}
-                isOpen={accountThemeOpen}
-                placeholderText={t("selectATheme")}
-                data-testid="select-account-theme"
-              >
-                {themeTypes.account
-                  .filter((theme) => theme.name !== "base")
-                  .map((theme, idx) => (
-                    <SelectOption
-                      selected={theme.name === field.value}
-                      key={`account-theme-${idx}`}
-                      value={theme.name}
-                    >
-                      {t(theme.name)}
-                    </SelectOption>
-                  ))}
-              </KeycloakSelect>
+            label={t("accountTheme")}
+            labelIcon={t("accountThemeHelp")}
+            placeholderText={t("selectATheme")}
+            controller={{ defaultValue: "" }}
+            options={appendEmptyChoice(
+              themeTypes.account.map((theme) => ({
+                key: theme.name,
+                value: theme.name,
+              })),
             )}
           />
-        </FormGroup>
-        <FormGroup
-          label={t("adminTheme")}
-          fieldId="kc-admin-ui-theme"
-          labelIcon={
-            <HelpItem
-              helpText={t("adminThemeHelp")}
-              fieldLabelId="adminTheme"
-            />
-          }
-        >
-          <Controller
+          <SelectControl
+            id="kc-admin-theme"
             name="adminTheme"
-            control={control}
-            defaultValue=""
-            render={({ field }) => (
-              <KeycloakSelect
-                toggleId="kc-admin-ui-theme"
-                onToggle={() => setAdminUIThemeOpen(!adminUIThemeOpen)}
-                onSelect={(value) => {
-                  field.onChange(value as string);
-                  setAdminUIThemeOpen(false);
-                }}
-                selections={field.value}
-                variant={SelectVariant.single}
-                isOpen={adminUIThemeOpen}
-                placeholderText={t("selectATheme")}
-                data-testid="select-admin-theme"
-                aria-label={t("selectAdminTheme")}
-              >
-                {themeTypes.admin
-                  .filter((theme) => theme.name !== "base")
-                  .map((theme, idx) => (
-                    <SelectOption
-                      selected={theme.name === field.value}
-                      key={`admin-theme-${idx}`}
-                      value={theme.name}
-                    >
-                      {t(theme.name)}
-                    </SelectOption>
-                  ))}
-              </KeycloakSelect>
+            label={t("adminTheme")}
+            labelIcon={t("adminThemeHelp")}
+            placeholderText={t("selectATheme")}
+            controller={{ defaultValue: "" }}
+            options={appendEmptyChoice(
+              themeTypes.admin.map((theme) => ({
+                key: theme.name,
+                value: theme.name,
+              })),
             )}
           />
-        </FormGroup>
-        <FormGroup
-          label={t("emailTheme")}
-          fieldId="kc-email-theme"
-          labelIcon={
-            <HelpItem
-              helpText={t("emailThemeHelp")}
-              fieldLabelId="emailTheme"
-            />
-          }
-        >
-          <Controller
+          <SelectControl
+            id="kc-email-theme"
             name="emailTheme"
-            control={control}
-            defaultValue=""
-            render={({ field }) => (
-              <KeycloakSelect
-                toggleId="kc-email-theme"
-                onToggle={() => setEmailThemeOpen(!emailThemeOpen)}
-                onSelect={(value) => {
-                  field.onChange(value as string);
-                  setEmailThemeOpen(false);
-                }}
-                selections={field.value}
-                variant={SelectVariant.single}
-                isOpen={emailThemeOpen}
-                placeholderText={t("selectATheme")}
-                data-testid="select-email-theme"
-                aria-label={t("selectEmailTheme")}
-              >
-                {themeTypes.email.map((theme, idx) => (
-                  <SelectOption
-                    selected={theme.name === field.value}
-                    key={`email-theme-${idx}`}
-                    value={theme.name}
-                  >
-                    {t(theme.name)}
-                  </SelectOption>
-                ))}
-              </KeycloakSelect>
+            label={t("emailTheme")}
+            labelIcon={t("emailThemeHelp")}
+            placeholderText={t("selectATheme")}
+            controller={{ defaultValue: "" }}
+            options={appendEmptyChoice(
+              themeTypes.email.map((theme) => ({
+                key: theme.name,
+                value: theme.name,
+              })),
             )}
           />
-        </FormGroup>
+        </FormProvider>
         <ActionGroup>
           <Button variant="primary" type="submit" data-testid="themes-tab-save">
             {t("save")}
diff --git a/js/libs/ui-shared/src/controls/select-control/SingleSelectControl.tsx b/js/libs/ui-shared/src/controls/select-control/SingleSelectControl.tsx
index e239b2ee2a..1864990559 100644
--- a/js/libs/ui-shared/src/controls/select-control/SingleSelectControl.tsx
+++ b/js/libs/ui-shared/src/controls/select-control/SingleSelectControl.tsx
@@ -94,7 +94,7 @@ export const SingleSelectControl = <
             }}
             isOpen={open}
           >
-            <SelectList>
+            <SelectList data-testid={`select-${name}`}>
               {options.map((option) => (
                 <SelectOption key={key(option)} value={key(option)}>
                   {isString(option) ? option : option.value}
diff --git a/services/src/main/java/org/keycloak/forms/login/freemarker/FreeMarkerLoginFormsProvider.java b/services/src/main/java/org/keycloak/forms/login/freemarker/FreeMarkerLoginFormsProvider.java
index f00cb58ba8..2e276080d3 100755
--- a/services/src/main/java/org/keycloak/forms/login/freemarker/FreeMarkerLoginFormsProvider.java
+++ b/services/src/main/java/org/keycloak/forms/login/freemarker/FreeMarkerLoginFormsProvider.java
@@ -418,7 +418,10 @@ public class FreeMarkerLoginFormsProvider implements LoginFormsProvider {
         }
 
         try {
-            attributes.put("properties", theme.getProperties());
+            Properties properties = theme.getProperties();
+            attributes.put("properties", properties);
+            attributes.put("darkMode", "true".equals(properties.getProperty("darkMode"))
+                    && realm.getAttribute("darkMode", true));
         } catch (IOException e) {
             logger.warn("Failed to load properties", e);
         }
diff --git a/services/src/main/java/org/keycloak/services/error/KeycloakErrorHandler.java b/services/src/main/java/org/keycloak/services/error/KeycloakErrorHandler.java
index a6629d27f9..6f0fec2aa3 100644
--- a/services/src/main/java/org/keycloak/services/error/KeycloakErrorHandler.java
+++ b/services/src/main/java/org/keycloak/services/error/KeycloakErrorHandler.java
@@ -194,6 +194,8 @@ public class KeycloakErrorHandler implements ExceptionMapper<Throwable> {
         String errorMessage = messagesBundle.getProperty(errorKey);
 
         attributes.put("message", new MessageBean(errorMessage, MessageType.ERROR));
+        // Default fallback in case an error occurs determining the dark mode later on.
+        attributes.put("darkMode", true);
 
         try {
             attributes.put("msg", new MessageFormatterMethod(locale, theme.getMessages(locale)));
@@ -202,7 +204,10 @@ public class KeycloakErrorHandler implements ExceptionMapper<Throwable> {
         }
 
         try {
-            attributes.put("properties", theme.getProperties());
+            Properties properties = theme.getProperties();
+            attributes.put("properties", properties);
+            attributes.put("darkMode", "true".equals(properties.getProperty("darkMode"))
+                    && realm.getAttribute("darkMode", true));
         } catch (IOException e) {
             e.printStackTrace();
         }
diff --git a/services/src/main/java/org/keycloak/services/resources/account/AccountConsole.java b/services/src/main/java/org/keycloak/services/resources/account/AccountConsole.java
index a5896e6225..e5ba51814e 100644
--- a/services/src/main/java/org/keycloak/services/resources/account/AccountConsole.java
+++ b/services/src/main/java/org/keycloak/services/resources/account/AccountConsole.java
@@ -159,6 +159,8 @@ public class AccountConsole implements AccountResourceProvider {
         map.put("msgJSON", messagesToJsonString(messages));
         map.put("supportedLocales", supportedLocales(messages));
         map.put("properties", theme.getProperties());
+        map.put("darkMode", "true".equals(theme.getProperties().getProperty("darkMode"))
+                && realm.getAttribute("darkMode", true));
         map.put("theme", (Function<String, String>) file -> {
             try {
                 final InputStream resource = theme.getResourceAsStream(file);
diff --git a/services/src/main/java/org/keycloak/services/resources/admin/AdminConsole.java b/services/src/main/java/org/keycloak/services/resources/admin/AdminConsole.java
index aff187dee1..615e83f08b 100644
--- a/services/src/main/java/org/keycloak/services/resources/admin/AdminConsole.java
+++ b/services/src/main/java/org/keycloak/services/resources/admin/AdminConsole.java
@@ -367,6 +367,8 @@ public class AdminConsole {
             map.put("loginRealm", realm.getName());
             map.put("clientId", Constants.ADMIN_CONSOLE_CLIENT_ID);
             map.put("properties", theme.getProperties());
+            map.put("darkMode", "true".equals(theme.getProperties().getProperty("darkMode"))
+                    && realm.getAttribute("darkMode", true));
 
             final var devServerUrl = Environment.isDevMode() ? System.getenv(ViteManifest.ADMIN_VITE_URL) : null;
 
diff --git a/themes/src/main/resources/theme/keycloak.v2/login/template.ftl b/themes/src/main/resources/theme/keycloak.v2/login/template.ftl
index 6af93683b3..a587a5b1a0 100644
--- a/themes/src/main/resources/theme/keycloak.v2/login/template.ftl
+++ b/themes/src/main/resources/theme/keycloak.v2/login/template.ftl
@@ -29,7 +29,7 @@
     <meta charset="utf-8">
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <meta name="robots" content="noindex, nofollow">
-    <meta name="color-scheme" content="light${(properties.darkMode)?boolean?then(' dark', '')}">
+    <meta name="color-scheme" content="light${darkMode?then(' dark', '')}">
 
     <#if properties.meta?has_content>
         <#list properties.meta?split(' ') as meta>
@@ -55,7 +55,7 @@
             }
         }
     </script>
-    <#if properties.darkMode?boolean>
+    <#if darkMode>
       <script type="module" async blocking="render">
           const DARK_MODE_CLASS = "${properties.kcDarkModeClass}";
           const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");