Add useTheme hook

app/soapbox/components/site-logo.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
 
-import { useSoapboxConfig, useSettings, useSystemTheme } from 'soapbox/hooks';
+import { useSoapboxConfig, useSettings, useTheme } from 'soapbox/hooks';
 
 interface ISiteLogo extends React.ComponentProps<'img'> {
   /** Extra class names for the <img> element. */
@@ -14,12 +14,7 @@ interface ISiteLogo extends React.ComponentProps<'img'> {
 const SiteLogo: React.FC<ISiteLogo> = ({ className, theme, ...rest }) => {
   const { logo, logoDarkMode } = useSoapboxConfig();
   const settings = useSettings();
-
+  const darkMode = useTheme() === 'dark';
-  const systemTheme = useSystemTheme();
-  const userTheme = settings.get('themeMode');
-  const darkMode = theme
-    ? theme === 'dark'
-    : (userTheme === 'dark' || (userTheme === 'system' && systemTheme === 'dark'));
 
   /** Soapbox logo. */
   const soapboxLogo = darkMode

app/soapbox/containers/soapbox.tsx

@@ -32,7 +32,7 @@ import {
   useFeatures,
   useSoapboxConfig,
   useSettings,
-  useSystemTheme,
+  useTheme,
   useLocale,
   useGdpr,
 } from 'soapbox/hooks';
@@ -250,10 +250,8 @@ const SoapboxHead: React.FC<ISoapboxHead> = ({ children }) => {
   const locale = useLocale();
   const settings = useSettings();
   const soapboxConfig = useSoapboxConfig();
-  const systemTheme = useSystemTheme();
 
-  const userTheme = settings.get('themeMode');
+  const darkMode = useTheme() === 'dark';
-  const darkMode = userTheme === 'dark' || (userTheme === 'system' && systemTheme === 'dark');
   const themeCss = generateThemeCss(soapboxConfig);
 
   const bodyClass = classNames('bg-white dark:bg-slate-900 text-base h-full', {

app/soapbox/hooks/index.ts

@@ -11,3 +11,4 @@ export { useRefEventHandler } from './useRefEventHandler';
 export { useSettings } from './useSettings';
 export { useSoapboxConfig } from './useSoapboxConfig';
 export { useSystemTheme } from './useSystemTheme';
+export { useTheme } from './useTheme';

app/soapbox/hooks/useTheme.ts

@@ -0,0 +1,20 @@
+import { useSettings } from './useSettings';
+import { useSystemTheme } from './useSystemTheme';
+
+type Theme = 'light' | 'dark';
+
+/**
+ * Returns the actual theme being displayed (eg "light" or "dark")
+ * regardless of whether that's by system theme or direct setting.
+ */
+const useTheme = (): Theme => {
+  const settings = useSettings();
+  const systemTheme = useSystemTheme();
+
+  const userTheme = settings.get('themeMode');
+  const darkMode = userTheme === 'dark' || (userTheme === 'system' && systemTheme === 'dark');
+
+  return darkMode ? 'dark' : 'light';
+};
+
+export { useTheme };