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 (