From 5916041fecf9abceb623adf213fbb76a7bcd5450 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 22 Jul 2022 17:25:52 -0500
Subject: [PATCH] Add useTheme hook

---
 app/soapbox/components/site-logo.tsx |  9 ++-------
 app/soapbox/containers/soapbox.tsx   |  6 ++----
 app/soapbox/hooks/index.ts           |  1 +
 app/soapbox/hooks/useTheme.ts        | 20 ++++++++++++++++++++
 4 files changed, 25 insertions(+), 11 deletions(-)
 create mode 100644 app/soapbox/hooks/useTheme.ts

diff --git a/app/soapbox/components/site-logo.tsx b/app/soapbox/components/site-logo.tsx
index 01bfc54ed..1e8751ac5 100644
--- a/app/soapbox/components/site-logo.tsx
+++ b/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 systemTheme = useSystemTheme();
-  const userTheme = settings.get('themeMode');
-  const darkMode = theme
-    ? theme === 'dark'
-    : (userTheme === 'dark' || (userTheme === 'system' && systemTheme === 'dark'));
+  const darkMode = useTheme() === 'dark';
 
   /** Soapbox logo. */
   const soapboxLogo = darkMode
diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx
index 21b80a503..8be5b2814 100644
--- a/app/soapbox/containers/soapbox.tsx
+++ b/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 = userTheme === 'dark' || (userTheme === 'system' && systemTheme === 'dark');
+  const darkMode = useTheme() === 'dark';
   const themeCss = generateThemeCss(soapboxConfig);
 
   const bodyClass = classNames('bg-white dark:bg-slate-900 text-base h-full', {
diff --git a/app/soapbox/hooks/index.ts b/app/soapbox/hooks/index.ts
index 270f44c84..49f4f6b8b 100644
--- a/app/soapbox/hooks/index.ts
+++ b/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';
diff --git a/app/soapbox/hooks/useTheme.ts b/app/soapbox/hooks/useTheme.ts
new file mode 100644
index 000000000..22ececd7a
--- /dev/null
+++ b/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 };