Added theme descriptions in the Admin UI

Closes #45909 Signed-off-by: Benjamin DeWeese <bdeweesevans@gmail.com> Signed-off-by: Alexander Schwartz <alexander.schwartz@ibm.com> Co-authored-by: Alexander Schwartz <alexander.schwartz@ibm.com>
2026-02-18 18:37:54 -05:00 · 2026-02-10 16:42:09 -05:00 · 2026-02-10 16:42:09 -05:00 · 67bbdf3dd2
commit 67bbdf3dd2
parent d6e112fd85
13 changed files with 48 additions and 2 deletions
--- a/core/src/main/java/org/keycloak/representations/info/ThemeInfoRepresentation.java
+++ b/core/src/main/java/org/keycloak/representations/info/ThemeInfoRepresentation.java
@ -27,6 +27,7 @@ public class ThemeInfoRepresentation {

    private String name;
    private String[] locales;
+    private String description;

    public String getName() {
        return name;
@ -43,4 +44,12 @@ public class ThemeInfoRepresentation {
    public void setLocales(String[] locales) {
        this.locales = locales;
    }
+
+    public String getDescription() {
+        return description;
+    }
+
+    public void setDescription(String description) {
+        this.description = description;
+    }
 }
--- a/js/apps/account-ui/maven-resources/theme/keycloak.v3/account/theme.properties
+++ b/js/apps/account-ui/maven-resources/theme/keycloak.v3/account/theme.properties
@ -2,5 +2,7 @@ parent=base
 deprecatedMode=false
 darkMode=true

+description=Refined, v3 is more cohesive and dynamic. (Default for Account)
+
 kcDarkModeClass=pf-v5-theme-dark
 contentHashPattern=assets/.*
--- a/js/apps/admin-ui/maven-resources/theme/keycloak.v2/admin/theme.properties
+++ b/js/apps/admin-ui/maven-resources/theme/keycloak.v2/admin/theme.properties
@ -1,5 +1,7 @@
 parent=base
 darkMode=true

+description=Cleaner and more modern, v2 supports automatic light/dark mode switching. (Default for Admin)
+
 kcDarkModeClass=pf-v5-theme-dark
 contentHashPattern=assets/.*
--- a/js/apps/admin-ui/src/realm-settings/themes/ThemeSettings.tsx
+++ b/js/apps/admin-ui/src/realm-settings/themes/ThemeSettings.tsx
@ -57,6 +57,7 @@ export const ThemeSettingsTab = ({ realm, save }: ThemeSettingsTabProps) => {
              themeTypes.login.map((theme) => ({
                key: theme.name,
                value: theme.name,
+                description: theme.description,
              })),
            )}
          />
@ -71,6 +72,7 @@ export const ThemeSettingsTab = ({ realm, save }: ThemeSettingsTabProps) => {
              themeTypes.account.map((theme) => ({
                key: theme.name,
                value: theme.name,
+                description: theme.description,
              })),
            )}
          />
@ -85,6 +87,7 @@ export const ThemeSettingsTab = ({ realm, save }: ThemeSettingsTabProps) => {
              themeTypes.admin.map((theme) => ({
                key: theme.name,
                value: theme.name,
+                description: theme.description,
              })),
            )}
          />
@ -99,6 +102,7 @@ export const ThemeSettingsTab = ({ realm, save }: ThemeSettingsTabProps) => {
              themeTypes.email.map((theme) => ({
                key: theme.name,
                value: theme.name,
+                description: theme.description,
              })),
            )}
          />
--- a/js/libs/keycloak-admin-client/src/defs/serverInfoRepesentation.ts
+++ b/js/libs/keycloak-admin-client/src/defs/serverInfoRepesentation.ts
@ -32,6 +32,7 @@ export interface ServerInfoRepresentation {
 export interface ThemeInfoRepresentation {
  name: string;
  locales?: string[];
+  description?: string;
 }

 export interface SpiInfoRepresentation {
--- a/js/libs/ui-shared/src/controls/select-control/SelectControl.tsx
+++ b/js/libs/ui-shared/src/controls/select-control/SelectControl.tsx
@ -19,6 +19,7 @@ export enum SelectVariant {
 export type SelectControlOption = {
  key: string;
  value: string;
+  description?: string;
 };

 export type OptionType = string[] | SelectControlOption[];
--- a/js/libs/ui-shared/src/controls/select-control/SingleSelectControl.tsx
+++ b/js/libs/ui-shared/src/controls/select-control/SingleSelectControl.tsx
@ -108,7 +108,15 @@ export const SingleSelectControl = <
          >
            <SelectList data-testid={`select-${name}`}>
              {[...options, ...selectedOptions].map((option) => (
-                <SelectOption key={key(option)} value={key(option)}>
+                <SelectOption
+                  key={key(option)}
+                  value={key(option)}
+                  description={
+                    !isString(option) && "description" in option
+                      ? option.description
+                      : undefined
+                  }
+                >
                  {isString(option) ? option : option.value}
                </SelectOption>
              ))}
--- a/js/libs/ui-shared/src/controls/select-control/TypeaheadSelectControl.tsx
+++ b/js/libs/ui-shared/src/controls/select-control/TypeaheadSelectControl.tsx
@ -304,6 +304,11 @@ export const TypeaheadSelectControl = <
                  value={key(option)}
                  isFocused={focusedItemIndex === index}
                  isActive={field.value.includes(getValue(option))}
+                  description={
+                    !isString(option) && "description" in option
+                      ? option.description
+                      : undefined
+                  }
                >
                  {getValue(option)}
                </SelectOption>
--- a/services/src/main/java/org/keycloak/services/resources/admin/info/ServerInfoAdminResource.java
+++ b/services/src/main/java/org/keycloak/services/resources/admin/info/ServerInfoAdminResource.java
@ -249,6 +249,8 @@ public class ServerInfoAdminResource {
                            ti.setLocales(locales.replaceAll(" ", "").split(","));
                        }

+                        ti.setDescription(getThemeDescription(theme));
+
                        themes.add(ti);
                    }
                } catch (IOException e) {
@ -258,6 +260,10 @@ public class ServerInfoAdminResource {
        }
    }

+    private String getThemeDescription(Theme theme) throws IOException {
+        return theme.getProperties().getProperty("description");
+    }
+
    private LinkedList<String> filterThemes(Theme.Type type, LinkedList<String> themeNames) {
        LinkedList<String> filteredNames = new LinkedList<>(themeNames);
        boolean filterAdminV2 = (type == Theme.Type.ADMIN) &&
--- a/themes/src/main/resources/theme/keycloak.v2/login/theme.properties
+++ b/themes/src/main/resources/theme/keycloak.v2/login/theme.properties
@ -1,6 +1,8 @@
 parent=base
 import=common/keycloak

+description=Cleaner and more modern, v2 supports automatic light/dark mode switching. (Default for Login)
+
 styles=css/styles.css
 stylesCommon=vendor/patternfly-v5/patternfly.min.css vendor/patternfly-v5/patternfly-addons.css

--- a/themes/src/main/resources/theme/keycloak/email/theme.properties
+++ b/themes/src/main/resources/theme/keycloak/email/theme.properties
@ -1 +1,3 @@
-parent=base
+parent=base
+
+description=High contrast, sharp, utilitarian, basic. (Default for Email)
--- a/themes/src/main/resources/theme/keycloak/login/theme.properties
+++ b/themes/src/main/resources/theme/keycloak/login/theme.properties
@ -1,6 +1,8 @@
 parent=base
 import=common/keycloak

+description=High contrast, sharp, utilitarian, basic.
+
 styles=css/login.css
 stylesCommon=vendor/patternfly-v4/patternfly.min.css vendor/patternfly-v3/css/patternfly.min.css vendor/patternfly-v3/css/patternfly-additions.min.css lib/pficon/pficon.css

--- a/themes/src/main/resources/theme/keycloak/welcome/theme.properties
+++ b/themes/src/main/resources/theme/keycloak/welcome/theme.properties
@ -1,5 +1,7 @@
 import=common/keycloak

+description=High contrast, sharp, utilitarian, basic.
+
 stylesCommon=vendor/patternfly-v5/patternfly.min.css vendor/patternfly-v5/patternfly-addons.css
 styles=css/welcome.css