feat: 🎸 add support for dark mode in Twitter

src/ReactEmbed.tsx

@@ -16,6 +16,7 @@ export type EmbedBlockId = string;
 export interface BlockProps extends ParsedUrl {
   id: EmbedBlockId;
   width: number;
+  isDark: boolean;
   renderVoid: (error?: Error) => React.ReactElement<any> | null;
   renderWrap: ReactEmbedWrapRenderer;
 }
@@ -64,6 +65,12 @@ export interface ReactEmbedProps {
    */
   url: string;
 
+  /**
+   * True if dark mode enable. In that case will try to render content on dark
+   * background.
+   */
+  isDark?: boolean;
+
   /**
    * Number of pixels the maximum space available to the component. If not provided
    * defaults to window width.
@@ -91,6 +98,7 @@ export interface ReactEmbedState {
 export class ReactEmbed extends React.PureComponent<ReactEmbedProps, ReactEmbedState> {
   static defaultProps = {
     width: typeof window === 'object' ? window.innerWidth : 0,
+    isDark: false,
     blocks: defaultBlocks,
     router: defaultRouter,
     render: defaultRender,

src/__story__/tweet.story.tsx

@@ -13,4 +13,7 @@ storiesOf('tweet', module)
         <Embed url={'https://twitter.com/hercuppacoffee/status/911958476678561792'} />
       </Box>
     );
+  })
+  .add('[isDark]', () => {
+    return <Embed url={'https://twitter.com/hercuppacoffee/status/911958476678561792'} isDark />;
   });

src/blocks/tweet/index.tsx

@@ -22,7 +22,7 @@ class TwitterTweet extends React.PureComponent<BlockProps, {}> {
         console.error('Failed to load Twitter lib.');
         return;
       }
-      wnd.twttr.widgets.createTweet(this.props.id, this.refs.ref);
+      wnd.twttr.widgets.createTweet(this.props.id, this.refs.ref, {theme: this.props.isDark ? 'dark' : 'light'});
     });
   }
 

src/renderer.tsx

@@ -4,7 +4,16 @@ import {ReactEmbedRenderer} from '.';
 const renderer: ReactEmbedRenderer = (Block: any, id, props, state) => {
   const renderVoid = (error) => props.renderVoid!(props, state, error);
 
-  return <Block {...state.url} id={id} width={props.width} renderWrap={props.renderWrap!} renderVoid={renderVoid} />;
+  return (
+    <Block
+      {...state.url}
+      id={id}
+      width={props.width}
+      isDark={props.isDark!}
+      renderWrap={props.renderWrap!}
+      renderVoid={renderVoid}
+    />
+  );
 };
 
 export default renderer;