diff --git a/app/soapbox/features/theme-editor/index.tsx b/app/soapbox/features/theme-editor/index.tsx index afe0ef51e..2cf081ea4 100644 --- a/app/soapbox/features/theme-editor/index.tsx +++ b/app/soapbox/features/theme-editor/index.tsx @@ -18,6 +18,7 @@ import Palette, { ColorGroup } from './components/palette'; const messages = defineMessages({ title: { id: 'admin.theme.title', defaultMessage: 'Theme' }, saved: { id: 'theme_editor.saved', defaultMessage: 'Theme updated!' }, + restore: { id: 'theme_editor.restore', defaultMessage: 'Restore default theme' }, export: { id: 'theme_editor.export', defaultMessage: 'Export theme' }, import: { id: 'theme_editor.import', defaultMessage: 'Import theme' }, importSuccess: { id: 'theme_editor.import_success', defaultMessage: 'Theme was successfully imported!' }, @@ -53,9 +54,13 @@ const ThemeEditor: React.FC = () => { }; }; - const resetTheme = () => { + const setTheme = (theme: any) => { setResetKey(uuidv4()); - setTimeout(() => setColors(soapbox.colors.toJS() as any)); + setTimeout(() => setColors(theme)); + }; + + const resetTheme = () => { + setTheme(soapbox.colors.toJS() as any); }; const updateTheme = async () => { @@ -63,6 +68,11 @@ const ThemeEditor: React.FC = () => { await dispatch(updateSoapboxConfig(params)); }; + const restoreDefaultTheme = () => { + const colors = normalizeSoapboxConfig({ brandColor: '#0482d8' }).colors.toJS(); + setTheme(colors); + }; + const exportTheme = () => { const data = JSON.stringify(colors, null, 2); download(data, 'theme.json'); @@ -80,7 +90,7 @@ const ThemeEditor: React.FC = () => { const json = JSON.parse(text); const colors = normalizeSoapboxConfig({ colors: json }).colors.toJS(); - setColors(colors); + setTheme(colors); dispatch(snackbar.success(intl.formatMessage(messages.importSuccess))); } }; @@ -148,6 +158,10 @@ const ThemeEditor: React.FC = () => {