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({...@@ -308,6 +308,7 @@ export function ThemeEditorPanel({
308 const [simpleColorsDirtyByAppearance, setSimpleColorsDirtyByAppearance] = useState<308 const [simpleColorsDirtyByAppearance, setSimpleColorsDirtyByAppearance] = useState<
309 Record<ThemeAppearance, boolean>309 Record<ThemeAppearance, boolean>
310 >({ light: false, dark: false });310 >({ light: false, dark: false });
311 const [shouldRegenerateGuidedColors, setShouldRegenerateGuidedColors] = useState(false);
311 const [error, setError] = useState<string | null>(null);312 const [error, setError] = useState<string | null>(null);
312 const [isMinimized, setIsMinimized] = useState(false);313 const [isMinimized, setIsMinimized] = useState(false);
313 const [roleQuery, setRoleQuery] = useState("");314 const [roleQuery, setRoleQuery] = useState("");
...@@ -401,6 +402,10 @@ export function ThemeEditorPanel({...@@ -401,6 +402,10 @@ export function ThemeEditorPanel({
401 // regenerate when the guided editor produced it.402 // regenerate when the guided editor produced it.
402 setIsAdvanced(sourceTheme !== null && sourceTheme.managed !== true);403 setIsAdvanced(sourceTheme !== null && sourceTheme.managed !== true);
403 setSimpleColorsDirtyByAppearance({ light: false, dark: false });404 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);
404 setColorsByAppearance(nextColors);409 setColorsByAppearance(nextColors);
405 setSelectedRole(null);410 setSelectedRole(null);
406 setUsageCount(null);411 setUsageCount(null);
...@@ -497,6 +502,7 @@ export function ThemeEditorPanel({...@@ -497,6 +502,7 @@ export function ThemeEditorPanel({
497 [activeAppearance]: true,502 [activeAppearance]: true,
498 }));503 }));
499 }504 }
505 if (isAdvanced) setShouldRegenerateGuidedColors(true);
500 },506 },
501 [activeAppearance, isAdvanced],507 [activeAppearance, isAdvanced],
502 );508 );
...@@ -735,6 +741,7 @@ export function ThemeEditorPanel({...@@ -735,6 +741,7 @@ export function ThemeEditorPanel({
735 if (selectedRole && !THEME_EDITOR_SIMPLE_ROLES.includes(selectedRole)) {741 if (selectedRole && !THEME_EDITOR_SIMPLE_ROLES.includes(selectedRole)) {
736 setSelectedRole(null);742 setSelectedRole(null);
737 }743 }
744 if (!shouldRegenerateGuidedColors) return;
738745
739 // Regenerate every appearance the theme will save, not just the visible746 // Regenerate every appearance the theme will save, not just the visible
740 // one, so the palettes shown after toggling match what gets saved.747 // one, so the palettes shown after toggling match what gets saved.
...@@ -754,8 +761,9 @@ export function ThemeEditorPanel({...@@ -754,8 +761,9 @@ export function ThemeEditorPanel({
754 }761 }
755 return next;762 return next;
756 });763 });
764 setShouldRegenerateGuidedColors(false);
757 },765 },
758 [activeAppearance, editingTheme, selectedRole],766 [activeAppearance, editingTheme, selectedRole, shouldRegenerateGuidedColors],
759 );767 );
760768
761 const handleSubmit = () => {769 const handleSubmit = () => {