Thanks to visit codestin.com
Credit goes to github.com

Skip to content

[quick-theme] Merge the dark/light selector tabs #46247

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vmuzikar merged 1 commit into from
Feb 12, 2026
Merged

[quick-theme] Merge the dark/light selector tabs #46247

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions js/apps/admin-ui/maven-resources/theme/keycloak.v2/admin/messages/messages_en.properties
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1398,9 +1398,11 @@ deleteClientPolicyConditionConfirm=This action will permanently delete {{conditi
selectATheme=Select a theme
themeColors=Theme colors
defaults=Reset to defaults
themeColorsLight=Theme colors [light]
themeColorsDark=Theme colors [dark]
themePreviewInfo=In order to preview the theme colors, the current themen needs to be set to the one you want to preview, so we have automatically switched you to the one you want to preview.
quickTheme=Quick Theme
themeMode=Theme mode
lightMode=Light
darkMode=Dark
themePreviewInfo=In order to preview the theme colors, the current theme needs to be set to the one you want to preview, so we have automatically switched you to the one you want to preview.
backgroundImage=Login background image
favicon=Favicon
errorColor=Error color
Expand Down
2 changes: 1 addition & 1 deletion js/apps/admin-ui/src/realm-settings/routes/ThemesTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import type { Path } from "react-router-dom";
import { generateEncodedPath } from "../../utils/generateEncodedPath";
import type { AppRouteObject } from "../../routes";

export type ThemesTabType = "settings" | "lightColors" | "darkColors";
export type ThemesTabType = "settings" | "quickTheme";

export type ThemesParams = {
realm: string;
Expand Down
42 changes: 36 additions & 6 deletions js/apps/admin-ui/src/realm-settings/themes/ThemeColors.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,10 @@ import {
Text,
TextContent,
TextInputProps,
ToggleGroup,
ToggleGroupItem,
} from "@patternfly/react-core";
import { useEffect, useMemo } from "react";
import { useEffect, useMemo, useState } from "react";
import {
FormProvider,
useForm,
Expand Down Expand Up @@ -74,10 +76,14 @@ const switchTheme = (theme: ThemeType) => {
type ThemeColorsProps = {
realm: RealmRepresentation;
save: (realm: ThemeRealmRepresentation) => void;
theme: "light" | "dark";
theme?: "light" | "dark";
};

export const ThemeColors = ({ realm, save, theme }: ThemeColorsProps) => {
export const ThemeColors = ({
realm,
save,
theme: initialTheme,
}: ThemeColorsProps) => {
const { t } = useTranslation();
const form = useForm();
const { handleSubmit, watch } = form;
Expand All @@ -86,9 +92,17 @@ export const ThemeColors = ({ realm, save, theme }: ThemeColorsProps) => {
const [open, toggle, setOpen] = useToggle();

const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
const getDarkModeFromRealm = () => {
const darkMode = realm.attributes?.darkMode;
if (darkMode === "false") return "light";
if (darkMode === "true") return "dark";
return mediaQuery.matches ? "dark" : "light";
};
const originalTheme = useMemo(() => getDarkModeFromRealm(), []);
const [theme, setTheme] = useState<ThemeType>(initialTheme || originalTheme);
const mapping = useMemo(
() => (theme === "light" ? lightTheme() : darkTheme()),
[],
[theme],
);

const reset = () => {
Expand Down Expand Up @@ -136,9 +150,9 @@ export const ThemeColors = ({ realm, save, theme }: ThemeColorsProps) => {
setupForm();
switchTheme(theme);
return () => {
switchTheme(mediaQuery.matches ? "dark" : "light");
switchTheme(originalTheme);
};
}, [realm]);
}, [realm, theme]);

return (
<>
Expand All @@ -162,6 +176,22 @@ export const ThemeColors = ({ realm, save, theme }: ThemeColorsProps) => {
<FlexItem>
<FormAccess isHorizontal role="manage-realm">
<FormProvider {...form}>
{!initialTheme && (
<FormGroup label={t("themeMode")}>
<ToggleGroup aria-label={t("themeMode")}>
<ToggleGroupItem
text={t("lightMode")}
isSelected={theme === "light"}
onChange={() => setTheme("light")}
/>
<ToggleGroupItem
text={t("darkMode")}
isSelected={theme === "dark"}
onChange={() => setTheme("dark")}
/>
</ToggleGroup>
</FormGroup>
)}
<FormGroup label={t("favicon")}>
<ImageUpload name="favicon" />
</FormGroup>
Expand Down
23 changes: 6 additions & 17 deletions js/apps/admin-ui/src/realm-settings/themes/ThemesTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,8 +152,7 @@ styles=css/login.css css/theme-styles.css
});

const settingsTab = useRoutableTab(toThemesTab(param("settings")));
const lightColorsTab = useRoutableTab(toThemesTab(param("lightColors")));
const darkColorsTab = useRoutableTab(toThemesTab(param("darkColors")));
const quickThemeTab = useRoutableTab(toThemesTab(param("quickTheme")));

if (!isFeatureEnabled(Feature.QuickTheme)) {
return <ThemeSettingsTab realm={realm} save={save} />;
Expand All @@ -177,23 +176,13 @@ styles=css/login.css css/theme-styles.css
<ThemeSettingsTab realm={realm} save={save} />
</Tab>
<Tab
id="lightColors"
title={<TabTitleText>{t("themeColorsLight")}</TabTitleText>}
data-testid="lightColors-tab"
{...lightColorsTab}
id="quickTheme"
title={<TabTitleText>{t("quickTheme")}</TabTitleText>}
data-testid="quickTheme-tab"
{...quickThemeTab}
>
<LogoContext>
<ThemeColors realm={realm} save={saveTheme} theme="light" />
</LogoContext>
</Tab>
<Tab
id="darkColors"
title={<TabTitleText>{t("themeColorsDark")}</TabTitleText>}
data-testid="darkColors-tab"
{...darkColorsTab}
>
<LogoContext>
<ThemeColors realm={realm} save={saveTheme} theme="dark" />
<ThemeColors realm={realm} save={saveTheme} />
</LogoContext>
</Tab>
</RoutableTabs>
Expand Down
Loading