diff --git a/app/images/soapbox-logo-white.svg b/app/images/soapbox-logo-white.svg
new file mode 100644
index 000000000..f09e910ea
--- /dev/null
+++ b/app/images/soapbox-logo-white.svg
@@ -0,0 +1 @@
+
diff --git a/app/soapbox/components/site-logo.tsx b/app/soapbox/components/site-logo.tsx
index 9e05b2490..8a614d08c 100644
--- a/app/soapbox/components/site-logo.tsx
+++ b/app/soapbox/components/site-logo.tsx
@@ -11,14 +11,19 @@ const SiteLogo: React.FC> = (props) => {
const userTheme = settings.get('themeMode');
const darkMode = userTheme === 'dark' || (userTheme === 'system' && systemTheme === 'dark');
+ /** Soapbox logo. */
+ const soapboxLogo = darkMode
+ ? require('images/soapbox-logo-white.svg')
+ : require('images/soapbox-logo.svg');
+
// Use the right logo if provided, then use fallbacks.
const getSrc = () => {
// In demo mode, use the Soapbox logo.
- if (settings.get('demo')) return require('images/soapbox-logo.svg');
+ if (settings.get('demo')) return soapboxLogo;
return (darkMode && logoDarkMode)
? logoDarkMode
- : logo || logoDarkMode || require('@tabler/icons/icons/home.svg');
+ : logo || logoDarkMode || soapboxLogo;
};
return (