diff --git a/quartz/components/Head.tsx b/quartz/components/Head.tsx
index f640b0ebf..e3e433d11 100644
--- a/quartz/components/Head.tsx
+++ b/quartz/components/Head.tsx
@@ -17,7 +17,7 @@ async function generateSocialImage(opts: ImageOptions, userOpts: SocialImageOpti
   const { cfg, description, fileName, fontsPromise, title, imageHtml } = opts
   const fonts = await fontsPromise
 
-  const defaultImg = defaultImage(cfg, title, description, fonts)
+  const defaultImg = defaultImage(cfg, userOpts, title, description, fonts)
 
   // If imageHtml was passed, use it. otherwise, use default image element
   let imageElement: JSXInternal.Element = defaultImg
diff --git a/quartz/util/defaultImage.tsx b/quartz/util/defaultImage.tsx
index 7cc8c00dc..88b18f978 100644
--- a/quartz/util/defaultImage.tsx
+++ b/quartz/util/defaultImage.tsx
@@ -5,6 +5,7 @@ import { SocialImageOptions } from "./imageHelper"
 // TODO: proper typing
 export const defaultImage = (
   cfg: GlobalConfiguration,
+  userOpts: SocialImageOptions,
   title: string,
   description: string,
   fonts: SatoriOptions["fonts"],
@@ -13,11 +14,7 @@ export const defaultImage = (
   const fontBreakPoint = 22
   const useSmallerFont = title.length > fontBreakPoint
 
-  // Get color scheme preference from config (use lightMode by default)
-  let colorScheme: SocialImageOptions["colorScheme"] = "lightMode"
-  if (typeof cfg.generateSocialImages !== "boolean" && cfg.generateSocialImages.colorScheme) {
-    colorScheme = cfg.generateSocialImages.colorScheme
-  }
+  const { colorScheme } = userOpts
   return (
     <div
       style={{