upstream/keycloak
1
0
Fork 0
mirror of https://github.com/keycloak/keycloak.git synced 2026-05-28 04:13:22 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

fix quick theme export to contain variables for both light and dark mode (#49125) (#49322)

Browse source 
Signed-off-by: bu6n <b@u6n.ch>
This commit is contained in:
bu6n 2026-05-26 11:00:23 +02:00 committed by GitHub
parent 2e2d06dab7
commit 3ed18221ec
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 45 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
js/apps/admin-ui/src/realm-settings/themes/PatternflyVars.ts
View file

@ -159,8 +159,8 @@ const flattenVariables = (theme: ThemeType): FlattenedVariable[] => {
const defaultValue = convert(v.defaultValue, theme);
const variable = convert(v.variable, theme);
// Skip variables that don't have a value for this theme
if (defaultValue === undefined && variable === undefined) return;
// Skip variables that don't apply to this theme (no CSS variable name to set)
if (variable === undefined) return;
const flattenedVar: FlattenedVariable = {
name: v.name,

8
js/apps/admin-ui/src/realm-settings/themes/QuickTheme.tsx
View file

@ -31,9 +31,13 @@ export const QuickTheme = ({ realm, theme }: QuickThemeProps) => {
const { favicon, logo, bgimage, fileName } = realm;
const logoName =
"img/logo" + logo?.name.substring(logo.name.lastIndexOf("."));
logo instanceof File
? "img/logo" + logo.name.substring(logo.name.lastIndexOf("."))
: undefined;
const bgimageName =
"img/bgimage" + bgimage?.name.substring(bgimage.name.lastIndexOf("."));
bgimage instanceof File
? "img/bgimage" + bgimage.name.substring(bgimage.name.lastIndexOf("."))
: undefined;
const themeNameClean =
(realm.themeName ?? "quick-theme")

62
js/apps/admin-ui/src/realm-settings/themes/ThemeColors.tsx
View file

@ -144,34 +144,42 @@ export const ThemeColors = ({
const defaultValue = (v: DefaultValueType | undefined, theme: ThemeType) =>
typeof v === "string" ? v : v?.[theme];
const reset = () => {
setOverriddenColors(new Set());
const buildThemeDefaults = (themeType: ThemeType): Record<string, string> => {
const themeMapping = themeType === "light" ? lightTheme() : darkTheme();
const parentDefaults: Record<string, string> = {};
mapping.forEach((m) => {
themeMapping.forEach((m) => {
if (m.defaultValue && !m.parentName) {
parentDefaults[m.name] = defaultValue(m.defaultValue, theme)!;
parentDefaults[m.name] = defaultValue(m.defaultValue, themeType)!;
}
});
return themeMapping.reduce<Record<string, string>>((acc, m) => {
if (!m.variable) return acc;
let value = defaultValue(m.defaultValue, themeType);
if (m.parentName && value?.includes("{{")) {
const parentValue = parentDefaults[m.parentName];
if (parentValue) {
const resolved = resolveColorReferences(
value,
parentValue,
themeType,
);
value = resolveColorToHex(resolved);
}
}
if (value !== undefined) {
acc[defaultValue(m.variable, themeType)!] = value;
}
return acc;
}, {});
};
const reset = () => {
setOverriddenColors(new Set());
const currentValues = form.getValues();
form.reset({
[theme]: mapping.reduce<Record<string, string>>((acc, m) => {
if (!m.variable) return acc;
let value = defaultValue(m.defaultValue, theme);
if (m.parentName && value?.includes("{{")) {
const parentValue = parentDefaults[m.parentName];
if (parentValue) {
const resolved = resolveColorReferences(value, parentValue, theme);
value = resolveColorToHex(resolved);
}
}
if (value !== undefined) {
acc[defaultValue(m.variable, theme)!] = value;
}
return acc;
}, {}),
...currentValues,
light: buildThemeDefaults("light"),
dark: buildThemeDefaults("dark"),
});
};
@ -222,11 +230,15 @@ export const ThemeColors = ({
useEffect(() => {
setupForm();
}, [realm]);
useEffect(() => {
setOverriddenColors(new Set());
switchTheme(theme);
return () => {
switchTheme(originalTheme);
};
}, [realm, theme]);
}, [theme]);
return (
<>
@ -300,14 +312,14 @@ export const ThemeColors = ({
<DefaultColorAccordion
label={m.name}
color={defaultValue(m.defaultValue, theme)!}
key={m.name}
key={`${theme}-${m.name}`}
name={`${theme}.${m.variable}`}
colorName={m.name}
onOverride={markAsOverridden}
/>
) : (
<ColorControl
key={m.name}
key={`${theme}-${m.name}`}
color={defaultValue(m.defaultValue, theme)!}
name={`${theme}.${m.variable!}`}
label={m.name}