binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-5772] chore: theme switcher and editor colors enhancements (#8436)

Browse source
This commit is contained in:
Anmol Singh Bhatia 2025-12-23 18:09:26 +05:30 • committed by GitHub
parent 6cd85a7095
commit 2bc7080d24
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 142 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

36
apps/web/app/(all)/profile/appearance/page.tsx
View file

@ -6,6 +6,7 @@ import type { I_THEME_OPTION } from "@plane/constants";
import { THEME_OPTIONS } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { setPromiseToast } from "@plane/propel/toast";
import { applyCustomTheme } from "@plane/utils";
// components
import { LogoSpinner } from "@/components/common/logo-spinner";
import { PageHead } from "@/components/core/page-title";
@ -30,22 +31,47 @@ function ProfileAppearancePage() {
}, [userProfile?.theme?.theme]);
const handleThemeChange = useCallback(
(themeOption: I_THEME_OPTION) => {
async (themeOption: I_THEME_OPTION) => {
setTheme(themeOption.value);
// If switching to custom theme and user has saved custom colors, apply them immediately
if (
themeOption.value === "custom" &&
userProfile?.theme?.primary &&
userProfile?.theme?.background &&
userProfile?.theme?.darkPalette !== undefined
) {
applyCustomTheme(
userProfile.theme.primary,
userProfile.theme.background,
userProfile.theme.darkPalette ? "dark" : "light"
);
}
const updateCurrentUserThemePromise = updateUserTheme({ theme: themeOption.value });
setPromiseToast(updateCurrentUserThemePromise, {
loading: "Updating theme...",
success: {
title: "Success!",
message: () => "Theme updated successfully.",
title: "Theme updated",
message: () => "Reloading to apply changes...",
},
error: {
title: "Error!",
message: () => "Failed to update the theme.",
message: () => "Failed to update theme. Please try again.",
},
});
// Wait for the promise to resolve, then reload after showing toast
try {
await updateCurrentUserThemePromise;
setTimeout(() => {
window.location.reload();
}, 1500);
} catch (error) {
// Error toast already shown by setPromiseToast
console.error("Error updating theme:", error);
}
},
[updateUserTheme]
[setTheme, updateUserTheme, userProfile]
);
return (

38
apps/web/ce/components/preferences/theme-switcher.tsx
View file

@ -6,6 +6,7 @@ import type { I_THEME_OPTION } from "@plane/constants";
import { THEME_OPTIONS } from "@plane/constants";
import { useTranslation } from "@plane/i18n";
import { setPromiseToast } from "@plane/propel/toast";
import { applyCustomTheme } from "@plane/utils";
// components
import { CustomThemeSelector } from "@/components/core/theme/custom-theme-selector";
import { ThemeSwitch } from "@/components/core/theme/theme-switch";
@ -34,26 +35,46 @@ export const ThemeSwitcher = observer(function ThemeSwitcher(props: {
}, [userProfile?.theme?.theme]);
const handleThemeChange = useCallback(
(themeOption: I_THEME_OPTION) => {
async (themeOption: I_THEME_OPTION) => {
try {
setTheme(themeOption.value);
// If switching to custom theme and user has saved custom colors, apply them immediately
if (
themeOption.value === "custom" &&
userProfile?.theme?.primary &&
userProfile?.theme?.background &&
userProfile?.theme?.darkPalette !== undefined
) {
applyCustomTheme(
userProfile.theme.primary,
userProfile.theme.background,
userProfile.theme.darkPalette ? "dark" : "light"
);
}
const updatePromise = updateUserTheme({ theme: themeOption.value });
setPromiseToast(updatePromise, {
loading: "Updating theme...",
success: {
title: "Success!",
message: () => "Theme updated successfully!",
title: "Theme updated",
message: () => "Reloading to apply changes...",
},
error: {
title: "Error!",
message: () => "Failed to update the theme",
message: () => "Failed to update theme. Please try again.",
},
});
// Wait for the promise to resolve, then reload after showing toast
await updatePromise;
setTimeout(() => {
window.location.reload();
}, 1500);
} catch (error) {
console.error("Error updating theme:", error);
}
},
[updateUserTheme]
[setTheme, updateUserTheme, userProfile]
);
if (!userProfile) return null;
@ -65,7 +86,12 @@ export const ThemeSwitcher = observer(function ThemeSwitcher(props: {
description={t(props.option.description)}
control={
<div>
<ThemeSwitch value={currentTheme} onChange={handleThemeChange} />
<ThemeSwitch
value={currentTheme}
onChange={(themeOption) => {
void handleThemeChange(themeOption);
}}
/>
</div>
}
/>

6
apps/web/core/components/core/theme/custom-theme-selector.tsx
View file

@ -72,8 +72,12 @@ export const CustomThemeSelector = observer(function CustomThemeSelector() {
setToast({
type: TOAST_TYPE.SUCCESS,
title: t("success"),
message: t("theme_updated_successfully"),
message: "Reloading to apply changes...",
});
// reload the page after showing the toast
setTimeout(() => {
window.location.reload();
}, 1500);
} catch (error) {
console.error("Failed to apply theme:", error);
setToast({

16
apps/web/core/components/power-k/config/preferences-commands.ts
View file

@ -28,9 +28,14 @@ export const usePowerKPreferencesCommands = (): TPowerKCommandConfig[] => {
.then(() => {
setToast({
type: TOAST_TYPE.SUCCESS,
title: t("toast.success"),
message: t("power_k.preferences_actions.toast.theme.success"),
title: "Theme updated",
message: "Reloading to apply changes...",
});
// reload the page after showing the toast
setTimeout(() => {
window.location.reload();
}, 1500);
return;
})
.catch(() => {
setToast({
@ -38,6 +43,7 @@ export const usePowerKPreferencesCommands = (): TPowerKCommandConfig[] => {
title: t("toast.error"),
message: t("power_k.preferences_actions.toast.theme.error"),
});
return;
});
},
// eslint-disable-next-line react-hooks/exhaustive-deps
@ -53,6 +59,7 @@ export const usePowerKPreferencesCommands = (): TPowerKCommandConfig[] => {
title: t("toast.success"),
message: t("power_k.preferences_actions.toast.timezone.success"),
});
return;
})
.catch(() => {
setToast({
@ -60,6 +67,7 @@ export const usePowerKPreferencesCommands = (): TPowerKCommandConfig[] => {
title: t("toast.error"),
message: t("power_k.preferences_actions.toast.timezone.error"),
});
return;
});
},
// eslint-disable-next-line react-hooks/exhaustive-deps
@ -75,6 +83,7 @@ export const usePowerKPreferencesCommands = (): TPowerKCommandConfig[] => {
title: t("toast.success"),
message: t("power_k.preferences_actions.toast.generic.success"),
});
return;
})
.catch(() => {
setToast({
@ -82,6 +91,7 @@ export const usePowerKPreferencesCommands = (): TPowerKCommandConfig[] => {
title: t("toast.error"),
message: t("power_k.preferences_actions.toast.generic.error"),
});
return;
});
},
// eslint-disable-next-line react-hooks/exhaustive-deps
@ -98,7 +108,7 @@ export const usePowerKPreferencesCommands = (): TPowerKCommandConfig[] => {
icon: Palette,
onSelect: (data) => {
const theme = data as string;
handleUpdateTheme(theme);
void handleUpdateTheme(theme);
},
isEnabled: () => true,
isVisible: () => true,