diff --git a/src/features/soapbox-config/components/site-preview.tsx b/src/features/soapbox-config/components/site-preview.tsx
index 346a88330..3ef7fa4a0 100644
--- a/src/features/soapbox-config/components/site-preview.tsx
+++ b/src/features/soapbox-config/components/site-preview.tsx
@@ -21,7 +21,7 @@ const SitePreview: React.FC<ISitePreview> = ({ soapbox }) => {
   const userTheme = settings.get('themeMode');
   const systemTheme = useSystemTheme();
 
-  const dark = ['dark', 'black'].includes(userTheme as string) || (userTheme === 'system' && systemTheme === 'dark');
+  const dark = ['dark', 'black'].includes(userTheme as string) || (userTheme === 'system' && systemTheme === 'black');
 
   const bodyClass = clsx(
     'site-preview',
diff --git a/src/hooks/useSystemTheme.ts b/src/hooks/useSystemTheme.ts
index a427fc3c0..1b0c574d9 100644
--- a/src/hooks/useSystemTheme.ts
+++ b/src/hooks/useSystemTheme.ts
@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 
-type SystemTheme = 'light' | 'dark';
+type SystemTheme = 'light' | 'black';
 
 /** Get the system color scheme of the system. */
 const useSystemTheme = (): SystemTheme => {
@@ -29,7 +29,7 @@ const useSystemTheme = (): SystemTheme => {
     };
   }, []);
 
-  return dark ? 'dark' : 'light';
+  return dark ? 'black' : 'light';
 };
 
 export { useSystemTheme };