pl-fe: Allow resetting user theme modifications

Signed-off-by: mkljczk <git@mkljczk.pl>

packages/pl-fe/src/features/preferences/index.tsx

@@ -4,7 +4,9 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { changeSetting, saveSettings } from 'pl-fe/actions/settings';
 import List, { ListItem } from 'pl-fe/components/list';
+import Button from 'pl-fe/components/ui/button';
 import Form from 'pl-fe/components/ui/form';
+import HStack from 'pl-fe/components/ui/hstack';
 import { Mutliselect, SelectDropdown } from 'pl-fe/features/forms';
 import SettingToggle from 'pl-fe/features/notifications/components/setting-toggle';
 import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
@@ -133,6 +135,11 @@ const Preferences = () => {
     debouncedSave(dispatch);
   };
 
+  const onThemeReset = () => {
+    dispatch(changeSetting(['themeMode'], plFeConfig.defaultSettings.themeMode, { save: false }));
+    dispatch(changeSetting(['theme', 'brandColor'], undefined, { showAlert: true }));
+  };
+
   const displayMediaOptions = React.useMemo(() => ({
     default: intl.formatMessage(messages.displayPostsDefault),
     hide_all: intl.formatMessage(messages.displayPostsHideAll),
@@ -181,6 +188,12 @@ const Preferences = () => {
         />
       </List>
 
+      <HStack justifyContent='end'>
+        <Button theme='secondary' onClick={onThemeReset}>
+          <FormattedMessage id='preferences.fields.theme_reset' defaultMessage='Reset theme' />
+        </Button>
+      </HStack>
+
       <List>
         <ListItem label={<FormattedMessage id='preferences.fields.language_label' defaultMessage='Display language' />}>
           <SelectDropdown

packages/pl-fe/src/locales/en.json

@@ -1271,6 +1271,7 @@
   "preferences.fields.spoilers_display_label": "Automatically expand text behind spoilers",
   "preferences.fields.system_font_label": "Use system's default font",
   "preferences.fields.theme": "Theme",
+  "preferences.fields.theme_reset": "Reset theme",
   "preferences.fields.underline_links_label": "Always underline links in posts",
   "preferences.fields.unfollow_modal_label": "Show confirmation dialog before unfollowing someone",
   "preferences.fields.wrench_label": "Display wrench reaction button",