miklo
/
soapbox
sforkowany z mirror/soapbox
1
0
Forkuj 0
Kod Zgłoszenia Oczekujące zmiany Packages Projekty Wydania Wiki Aktywność

Support System theme

api-accept
Justin 2022-05-04 09:08:40 -04:00
rodzic 0fd17f2863
commit 4e7c5b5819
1 zmienionych plików z 17 dodań i 2 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

19
app/soapbox/containers/soapbox.tsx
Wyświetl plik

@ -86,8 +86,17 @@ const SoapboxMount = () => {
const [localeLoading, setLocaleLoading] = useState(true); const [localeLoading, setLocaleLoading] = useState(true);
const [isLoaded, setIsLoaded] = useState(false); 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 themeCss = generateThemeCss(soapboxConfig);
const handleSystemModeChange = (event: MediaQueryListEvent) => {
setSystemDarkMode(event.matches);
};
// Load the user's locale // Load the user's locale
useEffect(() => { useEffect(() => {
MESSAGES[locale]().then(messages => { 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 // @ts-ignore: I don't actually know what these should be, lol
const shouldUpdateScroll = (prevRouterProps, { location }) => { const shouldUpdateScroll = (prevRouterProps, { location }) => {
return !(location.state?.soapboxModalKey && location.state?.soapboxModalKey !== prevRouterProps?.location?.state?.soapboxModalKey); return !(location.state?.soapboxModalKey && location.state?.soapboxModalKey !== prevRouterProps?.location?.state?.soapboxModalKey);
@ -128,7 +143,7 @@ const SoapboxMount = () => {
return ( return (
<IntlProvider locale={locale} messages={messages}> <IntlProvider locale={locale} messages={messages}>
<Helmet> <Helmet>
<html lang={locale} className={classNames({ dark: settings.get('themeMode') === 'dark' })} /> <html lang={locale} className={classNames({ dark: darkMode })} />
<body className={bodyClass} /> <body className={bodyClass} />
{themeCss && <style id='theme' type='text/css'>{`:root{${themeCss}}`}</style>} {themeCss && <style id='theme' type='text/css'>{`:root{${themeCss}}`}</style>}
<meta name='theme-color' content={soapboxConfig.brandColor} /> <meta name='theme-color' content={soapboxConfig.brandColor} />
@ -147,7 +162,7 @@ const SoapboxMount = () => {
return ( return (
<IntlProvider locale={locale} messages={messages}> <IntlProvider locale={locale} messages={messages}>
<Helmet> <Helmet>
<html lang={locale} className={classNames({ dark: settings.get('themeMode') === 'dark' })} /> <html lang={locale} className={classNames({ dark: darkMode })} />
<body className={bodyClass} /> <body className={bodyClass} />
{themeCss && <style id='theme' type='text/css'>{`:root{${themeCss}}`}</style>} {themeCss && <style id='theme' type='text/css'>{`:root{${themeCss}}`}</style>}
<meta name='theme-color' content={soapboxConfig.brandColor} /> <meta name='theme-color' content={soapboxConfig.brandColor} />