authorgravatar for 71498452+StiensWout@users.noreply.github.comWout Stiens <71498452+StiensWout@users.noreply.github.com> 2026-09-02 00:04:33+02:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-09-01 18:04:33-04:00
log0222aa255d11babd242dbe5ed0947e5fc5eaefee
tree11f2802fcca168972677d612f3cb5b3f157b161b
parentc0995d2eaf8ec787b3318ed1169ae266ed1529f8
signature Signed by PGP key B5690EEEBB952194

fix(web): preserve theme when toggling advanced colors (#8500)


1 files changed, 9 insertions(+), 1 deletions(-)

apps/web/src/components/settings/ThemeEditorPanel.tsx+9-1
......@@ -308,6 +308,7 @@ export function ThemeEditorPanel({
308308 const [simpleColorsDirtyByAppearance, setSimpleColorsDirtyByAppearance] = useState<
309309 Record<ThemeAppearance, boolean>
310310 >({ light: false, dark: false });
311 const [shouldRegenerateGuidedColors, setShouldRegenerateGuidedColors] = useState(false);
311312 const [error, setError] = useState<string | null>(null);
312313 const [isMinimized, setIsMinimized] = useState(false);
313314 const [roleQuery, setRoleQuery] = useState("");
......@@ -401,6 +402,10 @@ export function ThemeEditorPanel({
401402 // regenerate when the guided editor produced it.
402403 setIsAdvanced(sourceTheme !== null && sourceTheme.managed !== true);
403404 setSimpleColorsDirtyByAppearance({ light: false, dark: false });
405 // An unmanaged palette needs conversion when the user opts into the
406 // guided editor. Merely revealing Advanced for a managed/default draft
407 // must stay read-only until a color changes.
408 setShouldRegenerateGuidedColors(sourceTheme !== null && sourceTheme.managed !== true);
404409 setColorsByAppearance(nextColors);
405410 setSelectedRole(null);
406411 setUsageCount(null);
......@@ -497,6 +502,7 @@ export function ThemeEditorPanel({
497502 [activeAppearance]: true,
498503 }));
499504 }
505 if (isAdvanced) setShouldRegenerateGuidedColors(true);
500506 },
501507 [activeAppearance, isAdvanced],
502508 );
......@@ -735,6 +741,7 @@ export function ThemeEditorPanel({
735741 if (selectedRole && !THEME_EDITOR_SIMPLE_ROLES.includes(selectedRole)) {
736742 setSelectedRole(null);
737743 }
744 if (!shouldRegenerateGuidedColors) return;
738745
739746 // Regenerate every appearance the theme will save, not just the visible
740747 // one, so the palettes shown after toggling match what gets saved.
......@@ -754,8 +761,9 @@ export function ThemeEditorPanel({
754761 }
755762 return next;
756763 });
764 setShouldRegenerateGuidedColors(false);
757765 },
758 [activeAppearance, editingTheme, selectedRole],
766 [activeAppearance, editingTheme, selectedRole, shouldRegenerateGuidedColors],
759767 );
760768
761769 const handleSubmit = () => {