[mirotalksfu] - add Themes

public/css/Room.css

@@ -32,16 +32,16 @@
 }
 
 :root {
-    --body-bg: linear-gradient(to left, #1f1e1e, #000000);
+    --body-bg: radial-gradient(#393939, #000000);
     --border: 1px solid rgb(255 255 255 / 32%);
     --msger-top: 50%;
     --msger-left: 50%;
     --msger-height: 680px;
     --msger-width: 420px;
-    --msger-bg: linear-gradient(to left, #1f1e1e, #000000);
+    --msger-bg: radial-gradient(#393939, #000000);
     --wb-width: 800px;
     --wb-height: 600px;
-    --wb-bg: linear-gradient(to left, #1f1e1e, #000000);
+    --wb-bg: radial-gradient(#393939, #000000);
     --left-msg-bg: #222328;
     --right-msg-bg: #0a0b0c;
     --private-msg-bg: #510717;
@@ -469,7 +469,7 @@ emoji-picker {
 }
 .swal2-html-container {
     text-align: center;
-    color: #7c7c7c !important;
+    color: #858585 !important;
     background-color: transparent !important;
 }
 

public/js/Room.js

@@ -4,8 +4,7 @@ if (location.href.substr(0, 5) !== 'https') location.href = 'https' + location.h
 
 const RoomURL = window.location.href;
 
-const swalBackground = 'linear-gradient(to left, #1f1e1e, #000000)';
-const swalBg = 'rgba(0, 0, 0, 0.7)';
+let swalBackground = 'radial-gradient(#393939, #000000)';
 const swalImageUrl = '../images/pricing-illustration.svg';
 
 const url = {
@@ -81,6 +80,7 @@ function initClient() {
         setTippy('tabRecordingBtn', 'Recording', 'top');
         setTippy('tabRoomBtn', 'Room', 'top');
         setTippy('tabYoutubeBtn', 'YouTube', 'top');
+        setTippy('tabAspectBtn', 'Aspect', 'top');
         setTippy('tabStylingBtn', 'Styling', 'top');
         setTippy('wbBackgroundColorEl', 'Background color', 'top');
         setTippy('wbDrawingColorEl', 'Drawing color', 'top');
@@ -642,6 +642,9 @@ function handleButtons() {
     tabYoutubeBtn.onclick = (e) => {
         rc.openTab(e, 'tabYoutube');
     };
+    tabAspectBtn.onclick = (e) => {
+        rc.openTab(e, 'tabAspect');
+    };
     tabStylingBtn.onclick = (e) => {
         rc.openTab(e, 'tabStyling');
     };
@@ -821,6 +824,10 @@ function handleSelects() {
         handleVideoObjectFit(BtnVideoObjectFit.value);
     }; // cover
     BtnVideoObjectFit.selectedIndex = 2;
+
+    selectTheme.onchange = () => {
+        setTheme(selectTheme.value);
+    };
     BtnsBarPosition.onchange = () => {
         rc.changeBtnsBarPosition(BtnsBarPosition.value);
     };
@@ -1536,6 +1543,28 @@ function handleVideoObjectFit(value) {
     document.documentElement.style.setProperty('--videoObjFit', value);
 }
 
+// ####################################################
+// SET THEME
+// ####################################################
+
+function setTheme(theme) {
+    switch (theme) {
+        case 'dark':
+            swalBackground = 'radial-gradient(#393939, #000000)';
+            document.documentElement.style.setProperty('--body-bg', 'radial-gradient(#393939, #000000)');
+            document.documentElement.style.setProperty('--msger-bg', 'radial-gradient(#393939, #000000)');
+            document.documentElement.style.setProperty('--wb-bg', 'radial-gradient(#393939, #000000)');
+            break;
+        case 'grey':
+            swalBackground = 'radial-gradient(#666, #333)';
+            document.documentElement.style.setProperty('--body-bg', 'radial-gradient(#666, #333)');
+            document.documentElement.style.setProperty('--msger-bg', 'radial-gradient(#666, #333)');
+            document.documentElement.style.setProperty('--wb-bg', 'radial-gradient(#797979, #000)');
+            break;
+        //...
+    }
+}
+
 // ####################################################
 // HANDLE ASPECT RATIO
 // ####################################################

public/js/RoomClient.js

@@ -1185,7 +1185,7 @@ class RoomClient {
         this.sound('open');
 
         Swal.fire({
-            background: swalBg,
+            background: swalBackground,
             imageAlt: 'mirotalksfu-leave-room',
             imageUrl: image.exit,
             position: 'center',

public/view/Room.html

@@ -124,6 +124,7 @@ access to use this app.
                     <button id="tabRoomBtn" class="fas fa-home tablinks"></button>
                     <button id="tabRecordingBtn" class="fas fa-record-vinyl tablinks"></button>
                     <button id="tabYoutubeBtn" class="fab fa-youtube tablinks"></button>
+                    <button id="tabAspectBtn" class="fas fa-cog tablinks"></button>
                     <button id="tabStylingBtn" class="fas fa-palette tablinks"></button>
                 </div>
 
@@ -227,7 +228,7 @@ access to use this app.
                     <br />
                 </div>
 
-                <div id="tabStyling" class="tabcontent">
+                <div id="tabAspect" class="tabcontent">
                     <br />
                     <p>Aspect ratio:</p>
                     <br />
@@ -249,6 +250,17 @@ access to use this app.
                         <option value="none">none</option>
                     </select>
                     <br />
+                </div>
+
+                <div id="tabStyling" class="tabcontent">
+                    <br />
+                    <p>Theme:</p>
+                    <br />
+                    <select id="selectTheme" class="form-select text-light bg-dark">
+                        <option value="dark">⚫ &nbsp;Dark</option>
+                        <option value="grey">⚪ &nbsp;Grey</option>
+                    </select>
+                    <br />
                     <p>Buttons bar:</p>
                     <br />
                     <select id="BtnsBarPosition" class="form-select text-light bg-dark">