diff --git a/demo/src/pages/index.astro b/demo/src/pages/index.astro
index 2686bdf..9c33185 100644
--- a/demo/src/pages/index.astro
+++ b/demo/src/pages/index.astro
@@ -32,7 +32,14 @@ import Base from '../layouts/Base.astro';
MDX integration examples
- <Tweet/>
with JavaScript
+
+ <Tweet/>
with JavaScript (Light theme)
+
+
+
+
+ <Tweet/>
with JavaScript (Dark theme)
+
diff --git a/demo/src/pages/twitter-with-js-dark.astro b/demo/src/pages/twitter-with-js-dark.astro
new file mode 100644
index 0000000..755fe92
--- /dev/null
+++ b/demo/src/pages/twitter-with-js-dark.astro
@@ -0,0 +1,44 @@
+---
+import * as Component from 'astro-embed';
+import Base from '../layouts/Base.astro';
+---
+
+
+
+ These tweets use the same component code as the main Twitter example, but also loads Twitter’s widget JavaScript to convert them to interactive
+ iframes and use dark theme:
+
+ '} />
+
+
+
+ …
+
+
+
+
+
+
diff --git a/docs/src/content/docs/components/twitter.mdx b/docs/src/content/docs/components/twitter.mdx
index effc3f2..143777a 100644
--- a/docs/src/content/docs/components/twitter.mdx
+++ b/docs/src/content/docs/components/twitter.mdx
@@ -56,6 +56,21 @@ You can do this by including the following `
+
+
+```
+
+The above code produces the following result:
+
+
+
+
+
+
diff --git a/packages/astro-embed-twitter/CHANGELOG.md b/packages/astro-embed-twitter/CHANGELOG.md
index d57c724..ec22b9b 100644
--- a/packages/astro-embed-twitter/CHANGELOG.md
+++ b/packages/astro-embed-twitter/CHANGELOG.md
@@ -1,5 +1,11 @@
# @astro-community/astro-embed-twitter
+## 0.5.7
+
+### Patch Changes
+
+- [#155](https://github.com/delucis/astro-embed/pull/155) [`11f10861177beb06fc80137e1ca918b08f317bd0`](https://github.com/delucis/astro-embed/commit/11f10861177beb06fc80137e1ca918b08f317bd0) Thanks [@anotheri](https://github.com/anotheri)! - Adds `theme` prop support to `Tweet` component
+
## 0.5.6
### Patch Changes
diff --git a/packages/astro-embed-twitter/Tweet.astro b/packages/astro-embed-twitter/Tweet.astro
index 3dc15ec..c844188 100644
--- a/packages/astro-embed-twitter/Tweet.astro
+++ b/packages/astro-embed-twitter/Tweet.astro
@@ -1,17 +1,22 @@
---
import './Tweet.css';
+type TweetTheme = 'light' | 'dark';
+
export interface Props {
id: string;
+ theme?: TweetTheme;
}
-const { id } = Astro.props;
-async function fetchTweet(id: string) {
+const { id, theme = 'light' } = Astro.props;
+
+async function fetchTweet(id: string, theme: TweetTheme | undefined = 'light') {
try {
const oembedUrl = new URL('https://publish.twitter.com/oembed');
oembedUrl.searchParams.set('url', id);
oembedUrl.searchParams.set('omit_script', 'true');
oembedUrl.searchParams.set('dnt', 'true');
+ oembedUrl.searchParams.set('theme', theme);
return (await fetch(oembedUrl).then((res) => res.json())) as {
url: string;
author_name: string;
@@ -26,7 +31,7 @@ async function fetchTweet(id: string) {
}
}
-const tweet = await fetchTweet(id);
+const tweet = await fetchTweet(id, theme);
---
{tweet && }
diff --git a/packages/astro-embed-twitter/Tweet.css b/packages/astro-embed-twitter/Tweet.css
index d691dd2..9ec7079 100644
--- a/packages/astro-embed-twitter/Tweet.css
+++ b/packages/astro-embed-twitter/Tweet.css
@@ -8,3 +8,6 @@
.twitter-tweet:not(.twitter-tweet-rendered) > :last-child {
margin-bottom: 0;
}
+.twitter-tweet.twitter-tweet-rendered {
+ color-scheme: normal;
+}
diff --git a/packages/astro-embed-twitter/package.json b/packages/astro-embed-twitter/package.json
index a82864d..e04a65f 100644
--- a/packages/astro-embed-twitter/package.json
+++ b/packages/astro-embed-twitter/package.json
@@ -1,6 +1,6 @@
{
"name": "@astro-community/astro-embed-twitter",
- "version": "0.5.6",
+ "version": "0.5.7",
"description": "Component to easily embed Tweets on your Astro site",
"type": "module",
"exports": {