{instance.get('title')}
), - }; - return soapbox.getIn(['banner']) ? logos.imgLogo : logos.textLogo; - } - -} - -export default connect(mapStateToProps)(SiteBanner); diff --git a/app/soapbox/features/public_layout/components/site_logo.js b/app/soapbox/features/public_layout/components/site_logo.js deleted file mode 100644 index 0ee382e7b..000000000 --- a/app/soapbox/features/public_layout/components/site_logo.js +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import ImmutablePureComponent from 'react-immutable-pure-component'; -import { connect } from 'react-redux'; - -import { getSoapboxConfig } from 'soapbox/actions/soapbox'; - -const mapStateToProps = (state, props) => ({ - instance: state.get('instance'), - soapbox: getSoapboxConfig(state), -}); - -class SiteLogo extends ImmutablePureComponent { - - render() { - const { instance, soapbox } = this.props; - const logos = { - imgLogo: ({instance.get('title')}
), - }; - return soapbox.getIn(['logo']) ? logos.imgLogo : logos.textLogo; - } - -} - -export default connect(mapStateToProps)(SiteLogo); diff --git a/app/soapbox/features/soapbox_config/components/site-preview.tsx b/app/soapbox/features/soapbox_config/components/site-preview.tsx index 12a5a1de3..82b35974a 100644 --- a/app/soapbox/features/soapbox_config/components/site-preview.tsx +++ b/app/soapbox/features/soapbox_config/components/site-preview.tsx @@ -4,6 +4,7 @@ import { FormattedMessage } from 'react-intl'; import { defaultSettings } from 'soapbox/actions/settings'; import BackgroundShapes from 'soapbox/features/ui/components/background_shapes'; +import { useSystemTheme } from 'soapbox/hooks'; import { normalizeSoapboxConfig } from 'soapbox/normalizers'; import { generateThemeCss } from 'soapbox/utils/theme'; @@ -17,7 +18,10 @@ const SitePreview: React.FC
diff --git a/app/soapbox/features/ui/components/navbar.tsx b/app/soapbox/features/ui/components/navbar.tsx
index 25085f6d7..7e76e9844 100644
--- a/app/soapbox/features/ui/components/navbar.tsx
+++ b/app/soapbox/features/ui/components/navbar.tsx
@@ -4,9 +4,10 @@ import { FormattedMessage } from 'react-intl';
import { useDispatch } from 'react-redux';
import { Link } from 'react-router-dom';
-import { Avatar, Button, Icon } from 'soapbox/components/ui';
+import SiteLogo from 'soapbox/components/site-logo';
+import { Avatar, Button } from 'soapbox/components/ui';
import Search from 'soapbox/features/compose/components/search';
-import { useOwnAccount, useSoapboxConfig, useSettings } from 'soapbox/hooks';
+import { useOwnAccount, useSoapboxConfig } from 'soapbox/hooks';
import { openSidebar } from '../../../actions/sidebar';
@@ -17,14 +18,9 @@ const Navbar = () => {
const node = React.useRef(null);
const account = useOwnAccount();
- const settings = useSettings();
const soapboxConfig = useSoapboxConfig();
const singleUserMode = soapboxConfig.get('singleUserMode');
- // In demo mode, use the Soapbox logo
- const logo = settings.get('demo') ? require('images/soapbox-logo.svg') : soapboxConfig.logo;
- const logoDarkMode = soapboxConfig.logoDarkMode;
-
const onOpenSidebar = () => dispatch(openSidebar());
return (
@@ -46,21 +42,10 @@ const Navbar = () => {
'justify-start': !account,
})}
>
- {logo ? (
-
- 
- {logoDarkMode && (
- 
- )}
-
-
diff --git a/app/soapbox/features/verification/waitlist_page.js b/app/soapbox/features/verification/waitlist_page.js
index ef2d573ae..606038c56 100644
--- a/app/soapbox/features/verification/waitlist_page.js
+++ b/app/soapbox/features/verification/waitlist_page.js
@@ -1,11 +1,11 @@
import PropTypes from 'prop-types';
import React from 'react';
import { useIntl } from 'react-intl';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch } from 'react-redux';
import { Link } from 'react-router-dom';
-import { getSoapboxConfig } from 'soapbox/actions/soapbox';
import LandingGradient from 'soapbox/components/landing-gradient';
+import SiteLogo from 'soapbox/components/site-logo';
import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
import { NotificationsContainer } from 'soapbox/features/ui/util/async-components';
@@ -16,8 +16,6 @@ const WaitlistPage = ({ account }) => {
const dispatch = useDispatch();
const intl = useIntl();
- const logo = useSelector((state) => getSoapboxConfig(state).get('logo'));
-
const onClickLogOut = (event) => {
event.preventDefault();
dispatch(logOut(intl));
@@ -31,7 +29,7 @@ const WaitlistPage = ({ account }) => {
-
+
diff --git a/app/soapbox/hooks/index.ts b/app/soapbox/hooks/index.ts
index 0c6698988..66fd31059 100644
--- a/app/soapbox/hooks/index.ts
+++ b/app/soapbox/hooks/index.ts
@@ -6,3 +6,4 @@ export { useOnScreen } from './useOnScreen';
export { useOwnAccount } from './useOwnAccount';
export { useSettings } from './useSettings';
export { useSoapboxConfig } from './useSoapboxConfig';
+export { useSystemTheme } from './useSystemTheme';
diff --git a/app/soapbox/hooks/useSystemTheme.ts b/app/soapbox/hooks/useSystemTheme.ts
new file mode 100644
index 000000000..3258851f5
--- /dev/null
+++ b/app/soapbox/hooks/useSystemTheme.ts
@@ -0,0 +1,21 @@
+import { useState, useEffect } from 'react';
+
+type SystemTheme = 'light' | 'dark';
+
+/** Get the system color scheme of the system. */
+export const useSystemTheme = (): SystemTheme => {
+ const query = window.matchMedia('(prefers-color-scheme: dark)');
+ const [dark, setDark] = useState(query.matches);
+
+ const handleChange = (event: MediaQueryListEvent) => {
+ setDark(event.matches);
+ };
+
+ useEffect(() => {
+ query.addEventListener('change', handleChange);
+
+ return () => query.removeEventListener('change', handleChange);
+ }, []);
+
+ return dark ? 'dark' : 'light';
+};