From fed6a7aa51ea35502c9414d3b8443e227b6279ab Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 18 Dec 2022 12:29:31 -0600
Subject: [PATCH] Fix demo mode

---
 app/soapbox/containers/soapbox.tsx                 | 4 +++-
 app/soapbox/features/developers/settings-store.tsx | 7 +++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx
index a47eaa6d1..2beaa516c 100644
--- a/app/soapbox/containers/soapbox.tsx
+++ b/app/soapbox/containers/soapbox.tsx
@@ -41,6 +41,7 @@ import {
   useInstance,
 } from 'soapbox/hooks';
 import MESSAGES from 'soapbox/locales/messages';
+import { normalizeSoapboxConfig } from 'soapbox/normalizers';
 import { queryClient } from 'soapbox/queries/client';
 import { useCachedLocationHandler } from 'soapbox/utils/redirect';
 import { generateThemeCss } from 'soapbox/utils/theme';
@@ -267,8 +268,9 @@ const SoapboxHead: React.FC<ISoapboxHead> = ({ children }) => {
   const settings = useSettings();
   const soapboxConfig = useSoapboxConfig();
 
+  const demo = !!settings.get('demo');
   const darkMode = useTheme() === 'dark';
-  const themeCss = generateThemeCss(soapboxConfig);
+  const themeCss = generateThemeCss(demo ? normalizeSoapboxConfig({ brandColor: '#0482d8' }) : soapboxConfig);
 
   const bodyClass = classNames('bg-white dark:bg-gray-800 text-base h-full', {
     'no-reduce-motion': !settings.get('reduceMotion'),
diff --git a/app/soapbox/features/developers/settings-store.tsx b/app/soapbox/features/developers/settings-store.tsx
index 521ed0dab..6342ef1ae 100644
--- a/app/soapbox/features/developers/settings-store.tsx
+++ b/app/soapbox/features/developers/settings-store.tsx
@@ -103,6 +103,13 @@ const SettingsStore: React.FC = () => {
       </CardHeader>
 
       <List>
+        <ListItem
+          label={<FormattedMessage id='preferences.fields.demo_label' defaultMessage='Demo mode' />}
+          hint={<FormattedMessage id='preferences.fields.demo_hint' defaultMessage='Use the default Soapbox logo and color scheme. Useful for taking screenshots.' />}
+        >
+          <SettingToggle settings={settings} settingPath={['demo']} onChange={onToggleChange} />
+        </ListItem>
+
         <ListItem label={<FormattedMessage id='preferences.notifications.advanced' defaultMessage='Show all notification categories' />}>
           <SettingToggle settings={settings} settingPath={['notifications', 'quickFilter', 'advanced']} onChange={onToggleChange} />
         </ListItem>