Merge pull request #756 from ryoppippi/feature/tweet-dark

feat(tweet): darkmode support

Author: spences10

apps/web/src/routes/+page.md

@@ -680,17 +680,24 @@ Props:
 
 ```ts
 tweetLink: string = '';
+theme: string = 'dark' | 'light' = 'light';
 ```
 
 Usage:
 
 ```html
-<Tweet tweetLink="adamwathan/status/959078631434731521" />
+<Tweet
+	tweetLink="adamwathan/status/959078631434731521"
+	theme="dark"
+/>
 ```
 
 Output:
 
-<Tweet tweetLink="adamwathan/status/959078631434731521" />
+<Tweet 
+  tweetLink="adamwathan/status/959078631434731521" 
+  theme="dark"
+/>
 
 ## Vimeo
 

packages/sveltekit-embed/src/lib/components/tweet.svelte

@@ -1,14 +1,26 @@
 <script lang="ts">
 	interface Props {
 		tweetLink?: string;
+		theme?: 'light' | 'dark';
 	}
 
-	let { tweetLink = '' }: Props = $props();
+	let { tweetLink = '', theme = 'light' }: Props = $props();
 
-	let twitter_widgets_script: HTMLScriptElement | null = null;
+	let twitter_widgets_script = $state.raw<HTMLScriptElement | null>(
+		null,
+	);
 
 	const load_twitter_widgets_script = () => {
+		if (
+			document.querySelector(
+				'script[src*="platform.twitter.com/widgets.js"]',
+			)
+		) {
+			return;
+		}
+
 		if (twitter_widgets_script) return;
+
 		twitter_widgets_script = document.createElement('script');
 		twitter_widgets_script.src =
 			'https://platform.twitter.com/widgets.js';
@@ -17,22 +29,25 @@
 	};
 
 	const remove_twitter_widget_script = () => {
-		if (twitter_widgets_script) {
-			document.head.removeChild(twitter_widgets_script);
-			twitter_widgets_script = null;
-		}
+		if (!twitter_widgets_script) return;
+		document.head.removeChild(twitter_widgets_script);
+		twitter_widgets_script = null;
 	};
 
-	$effect(() => {
+	$effect.root(() => {
 		load_twitter_widgets_script();
 		return () => {
 			remove_twitter_widget_script();
 		};
 	});
 </script>
 
-<div class="tweet-wrapper">
-	<blockquote class="twitter-tweet">
+<div
+	class="tweet-wrapper"
+	data-theme={theme}
+	data-loaded={twitter_widgets_script != null}
+>
+	<blockquote class="twitter-tweet" data-theme={theme}>
 		<a href={`https://twitter.com/${tweetLink}`}>Loading Tweet...</a>
 	</blockquote>
 </div>
@@ -42,6 +57,12 @@
 		display: flex;
 		justify-content: center;
 		margin-bottom: 12px;
+		border-radius: 13px;
+		overflow: hidden;
+	}
+
+	.tweet-wrapper :global(iframe) {
+		border-radius: 13px !important;
 	}
 
 	.twitter-tweet {