Reduce FOUC on Refinery screenshot

2 files changed, 27 insertions, 5 deletions

diff --git a/src/components/landing/sections/Software.module.css b/src/components/landing/sections/Software.module.css
index a68b5a6..758a848 100644
--- a/src/components/landing/sections/Software.module.css
+++ b/src/components/landing/sections/Software.module.css
@@ -192,8 +192,6 @@
   overflow: hidden;
   transition-property: box-shadow, transform;
   z-index: 0;
-  background-size: cover;
-  background-position: center center;
 }
 
 .software--screenshot:hover,
@@ -201,7 +199,18 @@
   transform: scale(120%);
 }
 
-.screenshot {
+.screenshot__backdrop {
+  display: none;
+  background-size: cover;
+  background-position: center center;
+}
+
+[data-theme='dark'] .screenshot__backdrop--dark,
+:root:not([data-theme='dark']) .screenshot__backdrop--light {
+  display: block;
+}
+
+.screenshot, .screenshot__backdrop {
   position: absolute;
   top: 0;
   left: 0;
diff --git a/src/components/landing/sections/Software.tsx b/src/components/landing/sections/Software.tsx
index e905e07..577939c 100644
--- a/src/components/landing/sections/Software.tsx
+++ b/src/components/landing/sections/Software.tsx
@@ -58,12 +58,25 @@ function Screenshot() {
       )}
       style={{
         aspectRatio: refineryScreenshot.width / refineryScreenshot.height,
-        backgroundImage: `url(${refineryScreenshot.placeholder})`,
       }}
     >
-      {isBrowser ? screenshot : <noscript>{screenshot}</noscript>}
       <div className={clsx(styles.content, styles['content--screenshot'])}>
         <div
+          className={clsx(styles.screenshot__backdrop, styles['screenshot__backdrop--light'])}
+          style={{
+            aspectRatio: refineryScreenshotDark.width / refineryScreenshotDark.height,
+            backgroundImage: `url(${refineryScreenshotDark.placeholder})`,
+          }}
+        />
+        <div
+          className={clsx(styles.screenshot__backdrop, styles['screenshot__backdrop--dark'])}
+          style={{
+            aspectRatio: refineryScreenshotLight.width / refineryScreenshotLight.height,
+            backgroundImage: `url(${refineryScreenshotLight.placeholder})`,
+          }}
+        />
+        {isBrowser ? screenshot : <noscript>{screenshot}</noscript>}
+        <div
           className={clsx(
             styles.overlay,
             styles['overlay--screenshot'],