From 3ade29f4e1569c05c3dcff430a8317611e471c28 Mon Sep 17 00:00:00 2001
From: Shipow <shipowlata@gmail.com>
Date: Tue, 1 Dec 2020 19:35:22 +0100
Subject: [PATCH] fix(website): Sync tailwind darkmode class with docusaurus
 theme context

---
 packages/website/src/pages/index.js | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/website/src/pages/index.js b/packages/website/src/pages/index.js
index eb1d8853a..c6f76406e 100755
--- a/packages/website/src/pages/index.js
+++ b/packages/website/src/pages/index.js
@@ -1,16 +1,23 @@
 import { useBaseUrlUtils } from '@docusaurus/useBaseUrl';
 import Layout from '@theme/Layout';
 import React from 'react';
-
+import useThemeContext from '@theme/hooks/useThemeContext';
 import ApplyForm from '../components/ApplyForm.js';
 import { DocSearchLogo } from '../components/DocSearchLogo';
-
 import showcaseProjects from './showcase-projects.json';
-
 import 'tailwindcss/tailwind.css';
 
 function Home() {
   const { withBaseUrl } = useBaseUrlUtils();
+  const { isDarkTheme } = useThemeContext();
+
+  React.useEffect(() => {
+    if (isDarkTheme) {
+      document.querySelector('html').classList.add('dark')
+    } else {
+      document.querySelector('html').classList.remove('dark')
+    }
+  }, [isDarkTheme]);
 
   return (
     <>
@@ -46,7 +53,7 @@ function Home() {
               </div>
             </div>
             <div className="pl-6">
-              <img src={withBaseUrl('img/assets/tailwind.png')} width="600" />
+              <iframe className="vidyard_iframe" src="//play.vidyard.com/3NZeGgFeugUWPiEPiWoRWE.html?" width="540" height="504" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen></iframe>
             </div>
           </main>
         </div>