From 6f198fd1ca39538d0bc3355e79ccd38c070f8865 Mon Sep 17 00:00:00 2001
From: k00b <k00b@stacker.news>
Date: Sat, 28 Sep 2024 20:02:33 -0500
Subject: [PATCH] dark mode for nostr embed

---
 components/embed.js        | 17 ++++++++++++++---
 components/text.module.css |  1 +
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/components/embed.js b/components/embed.js
index fa24a660..1558f4f5 100644
--- a/components/embed.js
+++ b/components/embed.js
@@ -21,7 +21,7 @@ function TweetSkeleton ({ className }) {
   )
 }
 
-export const NostrEmbed = memo(function NostrEmbed ({ src, className, topLevel, id }) {
+export const NostrEmbed = memo(function NostrEmbed ({ src, className, topLevel, darkMode, id }) {
   const [show, setShow] = useState(false)
   const iframeRef = useRef(null)
 
@@ -35,13 +35,24 @@ export const NostrEmbed = memo(function NostrEmbed ({ src, className, topLevel,
 
     window?.addEventListener('message', setHeightFromIframe)
 
+    const handleIframeLoad = () => {
+      iframeRef.current.contentWindow.postMessage({ setDarkMode: darkMode }, '*')
+    }
+
+    if (iframeRef.current.complete) {
+      handleIframeLoad()
+    } else {
+      iframeRef.current.addEventListener('load', handleIframeLoad)
+    }
+
     // https://github.com/vercel/next.js/issues/39451
     iframeRef.current.src = `https://njump.me/${id}?embed=yes`
 
     return () => {
       window?.removeEventListener('message', setHeightFromIframe)
+      iframeRef.current?.removeEventListener('load', handleIframeLoad)
     }
-  }, [iframeRef.current])
+  }, [iframeRef.current, darkMode])
 
   return (
     <div className={classNames(styles.nostrContainer, !show && styles.twitterContained, className)}>
@@ -132,7 +143,7 @@ const Embed = memo(function Embed ({ src, provider, id, meta, className, topLeve
 
   if (provider === 'nostr') {
     return (
-      <NostrEmbed src={src} className={className} topLevel={topLevel} id={id} />
+      <NostrEmbed src={src} className={className} topLevel={topLevel} id={id} darkMode={darkMode} />
     )
   }
 
diff --git a/components/text.module.css b/components/text.module.css
index 9562cb93..539d9fc6 100644
--- a/components/text.module.css
+++ b/components/text.module.css
@@ -305,6 +305,7 @@
 .twitterContainer, .nostrContainer, .videoWrapper, .wavlakeWrapper, .spotifyWrapper {
     margin-top: calc(var(--grid-gap) * 0.5);
     margin-bottom: calc(var(--grid-gap) * 0.5);
+    background-color: var(--theme-bg);
 }
 
 .videoWrapper {