Merge pull request #15499 from vector-im/t3chguy/feat/widgets

Jitsi accept theme variable and restyle

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;
+}

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]>;