From 4e7c5b5819ee2467d69f4ab3fdc9afd88eba9795 Mon Sep 17 00:00:00 2001
From: Justin
Date: Wed, 4 May 2022 09:08:40 -0400
Subject: [PATCH] Support System theme
---
app/soapbox/containers/soapbox.tsx | 19 +++++++++++++++++--
1 file changed, 17 insertions(+), 2 deletions(-)
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 &&