diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx index e6cd733d8..ffc19ad21 100644 --- a/app/soapbox/containers/soapbox.tsx +++ b/app/soapbox/containers/soapbox.tsx @@ -86,8 +86,17 @@ const SoapboxMount = () => { const [localeLoading, setLocaleLoading] = useState(true); const [isLoaded, setIsLoaded] = useState(false); + const colorSchemeQueryList = window.matchMedia('(prefers-color-scheme: dark)'); + const [isSystemDarkMode, setSystemDarkMode] = useState(colorSchemeQueryList.matches); + const userTheme = settings.get('themeMode'); + const darkMode = userTheme === 'dark' || (userTheme === 'system' && isSystemDarkMode); + const themeCss = generateThemeCss(soapboxConfig); + const handleSystemModeChange = (event: MediaQueryListEvent) => { + setSystemDarkMode(event.matches); + }; + // Load the user's locale useEffect(() => { MESSAGES[locale]().then(messages => { @@ -105,6 +114,12 @@ const SoapboxMount = () => { }); }, []); + useEffect(() => { + colorSchemeQueryList.addEventListener('change', handleSystemModeChange); + + return () => colorSchemeQueryList.removeEventListener('change', handleSystemModeChange); + }, []); + // @ts-ignore: I don't actually know what these should be, lol const shouldUpdateScroll = (prevRouterProps, { location }) => { return !(location.state?.soapboxModalKey && location.state?.soapboxModalKey !== prevRouterProps?.location?.state?.soapboxModalKey); @@ -128,7 +143,7 @@ const SoapboxMount = () => { return ( - + {themeCss && } @@ -147,7 +162,7 @@ const SoapboxMount = () => { return ( - + {themeCss && }