From 593a56e2d760ce0f951a711164339f57df2975bc Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Mon, 19 Oct 2020 18:51:16 +0100
Subject: [PATCH] Jitsi accept theme variable and restyle

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/vector/jitsi/index.scss | 20 ++++++++++++++++----
 src/vector/jitsi/index.ts   |  5 +++++
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/vector/jitsi/index.scss b/src/vector/jitsi/index.scss
index 9b5f4b5b92..a4ae84cacf 100644
--- a/src/vector/jitsi/index.scss
+++ b/src/vector/jitsi/index.scss
@@ -23,11 +23,19 @@ limitations under the License.
     src: url('~matrix-react-sdk/res/fonts/Nunito/Nunito-Regular.ttf') format('truetype');
 }
 
-$fg-color: #edf3ff;
+$dark-fg: #edf3ff;
+$dark-bg: rgba(141, 151, 165, 0.2);
+$light-fg: #2e2f32;
+$light-bg: #fff;
 body {
     font-family: Nunito, Arial, Helvetica, sans-serif;
-    background-color: #181b21;
-    color: $fg-color;
+    background-color: $dark-bg;
+    color: $dark-fg;
+}
+
+body.theme-light {
+    background-color: $light-bg;
+    color: $light-fg;
 }
 
 body, html {
@@ -82,7 +90,7 @@ body, html {
     &::before {
         content: '';
         background-size: contain;
-        background-color: $fg-color;
+        background-color: $dark-fg;
         mask-repeat: no-repeat;
         mask-position: center;
         mask-image: url("~matrix-react-sdk/res/img/element-icons/call/video-call.svg");
@@ -93,3 +101,7 @@ body, html {
         margin: 0 auto; // center
     }
 }
+
+body.theme-light .icon::before {
+    background-color: $light-fg;
+}
diff --git a/src/vector/jitsi/index.ts b/src/vector/jitsi/index.ts
index aa8cb6585c..6aeba8f7aa 100644
--- a/src/vector/jitsi/index.ts
+++ b/src/vector/jitsi/index.ts
@@ -67,6 +67,11 @@ let meetApi: any; // JitsiMeetExternalAPI
         // out into a browser.
         const parentUrl = qsParam('parentUrl', true);
         const widgetId = qsParam('widgetId', true);
+        const theme = qsParam('theme', true);
+
+        if (theme) {
+            document.body.classList.add(`theme-${theme}`);
+        }
 
         // Set this up as early as possible because Element will be hitting it almost immediately.
         let readyPromise: Promise<[void, void]>;