Merge pull request #375 from DJ2LS/ls-gui

gui/package.json

@@ -32,7 +32,7 @@
     "@electron/osx-sign": "^1.0.4",
     "@popperjs/core": "^2.11.6",
     "blob-util": "^2.0.2",
-    "bootstrap": "^5.2.3",
+    "bootstrap": "^5.3.0-alpha.1",
     "bootstrap-icons": "^1.10.3",
     "bootswatch": "^5.2.3",
     "browser-image-compression": "^2.0.0",

gui/preload-chat.js

@@ -144,14 +144,7 @@ updateAllChat(false);
 // WINDOW LISTENER
 window.addEventListener("DOMContentLoaded", () => {
   // theme selector
-  if (config.theme != "default") {
+  changeGuiDesign(config.theme);
-    var theme_path =
-      "../node_modules/bootswatch/dist/" + config.theme + "/bootstrap.min.css";
-    document.getElementById("bootstrap_theme").href = theme_path;
-  } else {
-    var theme_path = "../node_modules/bootstrap/dist/css/bootstrap.min.css";
-    document.getElementById("bootstrap_theme").href = theme_path;
-  }
 
   const userInfoFields = [
     "user_info_image",
@@ -975,7 +968,7 @@ update_chat = function (obj) {
         <img class="w-100 rounded-2" src="data:image/png;base64,${FD.atob(
           obj._attachments[filename]["data"]
         )}">
-       <p class="text-right mb-0 p-1 text-black" style="text-align: right; font-size : 1rem">
+       <p class="text-right mb-0 p-1" style="text-align: right; font-size : 1rem">
                     <span class="p-1" style="text-align: right; font-size : 0.8rem">${filename}</span>
                     <span class="p-1" style="text-align: right; font-size : 0.8rem">${filesize}</span>
                             <i class="bi bi-filetype-${filetype}" style="font-size: 2rem;"></i>
@@ -986,7 +979,7 @@ update_chat = function (obj) {
       } else {
         var fileheader = `
         <div class="card-header border-0 bg-transparent text-end p-0 mb-0 hover-overlay">
-       <p class="text-right mb-0 p-1 text-black" style="text-align: right; font-size : 1rem">
+       <p class="text-right mb-0 p-1" style="text-align: right; font-size : 1rem">
                     <span class="p-1" style="text-align: right; font-size : 0.8rem">${filename}</span>
                     <span class="p-1" style="text-align: right; font-size : 0.8rem">${filesize}</span>
                             <i class="bi bi-filetype-${filetype}" style="font-size: 2rem;"></i>
@@ -998,9 +991,9 @@ update_chat = function (obj) {
 
       var controlarea_transmit = `
         <div class="ms-auto" id="msg-${obj._id}-control-area">
-                <button class="btn bg-transparent p-1 m-1"><i class="bi bi-arrow-repeat" id="retransmit-msg-${obj._id}" style="font-size: 1.2rem; color: grey;"></i></button>
+                <button class="btn bg-transparent p-1 m-1"><i class="bi bi-arrow-repeat link-secondary" id="retransmit-msg-${obj._id}" style="font-size: 1.2rem;"></i></button>
-                <button class="btn bg-transparent p-1 m-1"><i class="bi bi-download" id="save-file-msg-${obj._id}" style="font-size: 1.2rem; color: grey;"></i></button>
+                <button class="btn bg-transparent p-1 m-1"><i class="bi bi-download link-secondary" id="save-file-msg-${obj._id}" style="font-size: 1.2rem;"></i></button>
-                <button class="btn bg-transparent p-1 m-1"><i class="bi bi-trash" id="del-msg-${obj._id}" style="font-size: 1.2rem; color: grey;"></i></button>
+                <button class="btn bg-transparent p-1 m-1"><i class="bi bi-trash link-secondary" id="del-msg-${obj._id}" style="font-size: 1.2rem;"></i></button>
              </div>
 
         `;
@@ -1008,8 +1001,8 @@ update_chat = function (obj) {
       var controlarea_receive = `
 
              <div class="me-auto" id="msg-${obj._id}-control-area">
-                <button class="btn bg-transparent p-1 m-1"><i class="bi bi-download" id="save-file-msg-${obj._id}" style="font-size: 1.2rem; color: grey;"></i></button>
+                <button class="btn bg-transparent p-1 m-1"><i class="bi bi-download link-secondary" id="save-file-msg-${obj._id}" style="font-size: 1.2rem;"></i></button>
-                <button class="btn bg-transparent p-1 m-1"><i class="bi bi-trash" id="del-msg-${obj._id}" style="font-size: 1.2rem; color: grey;"></i></button>
+                <button class="btn bg-transparent p-1 m-1"><i class="bi bi-trash link-secondary" id="del-msg-${obj._id}" style="font-size: 1.2rem;"></i></button>
              </div>
 
         `;
@@ -1019,13 +1012,13 @@ update_chat = function (obj) {
       var filetype = "text/plain";
       var controlarea_transmit = `
 <div class="ms-auto" id="msg-${obj._id}-control-area">
-                <button class="btn bg-transparent p-1 m-1"><i class="bi bi-arrow-repeat" id="retransmit-msg-${obj._id}" style="font-size: 1.2rem; color: grey;"></i></button>
+                <button class="btn bg-transparent p-1 m-1"><i class="bi bi-arrow-repeat link-secondary" id="retransmit-msg-${obj._id}" style="font-size: 1.2rem;"></i></button>
-                <button class="btn bg-transparent p-1 m-1"><i class="bi bi-trash" id="del-msg-${obj._id}" style="font-size: 1.2rem; color: grey;"></i></button>
+                <button class="btn bg-transparent p-1 m-1"><i class="bi bi-trash link-secondary" id="del-msg-${obj._id}" style="font-size: 1.2rem;"></i></button>
              </div>
         `;
       var controlarea_receive = `
       <div class="float-start" id="msg-${obj._id}-control-area">
-                      <button class="btn bg-transparent p-1 m-1"><i class="bi bi-trash" id="del-msg-${obj._id}" style="font-size: 1.2rem; color: grey;"></i></button>
+                      <button class="btn bg-transparent p-1 m-1"><i class="bi bi-trash link-secondary" id="del-msg-${obj._id}" style="font-size: 1.2rem;"></i></button>
                    </div>
               `;
     }
@@ -1221,7 +1214,7 @@ update_chat = function (obj) {
 
                             <!--<button type="button" id="retransmit-msg-${
                               obj._id
-                            }" class="btn btn-sm btn-light p-0" style="height:20px;width:30px"><i class="bi bi-arrow-repeat" style="font-size: 0.9rem; color: black;"></i></button>-->
+                            }" class="btn btn-sm btn-light p-0" style="height:20px;width:30px"><i class="bi bi-arrow-repeat" style="font-size: 0.9rem;"></i></button>-->
 
                         </p>
 
@@ -2236,3 +2229,59 @@ function sendFileReq(dxcall, file) {
     file: file,
   });
 }
+
+function changeGuiDesign(design) {
+  console.log(design);
+  if (
+    design != "default" &&
+    design != "default_light" &&
+    design != "default_dark" &&
+    design != "default_auto"
+  ) {
+    var theme_path =
+      "../node_modules/bootswatch/dist/" + design + "/bootstrap.min.css";
+    document.getElementById("bootstrap_theme").href = escape(theme_path);
+  } else if (design == "default" || design == "default_light") {
+    var theme_path = "../node_modules/bootstrap/dist/css/bootstrap.min.css";
+    document.getElementById("bootstrap_theme").href = escape(theme_path);
+    document.documentElement.setAttribute("data-bs-theme", "light");
+  } else if (design == "default_dark") {
+    var theme_path = "../node_modules/bootstrap/dist/css/bootstrap.min.css";
+    document.getElementById("bootstrap_theme").href = escape(theme_path);
+    document.querySelector("html").setAttribute("data-bs-theme", "dark");
+  } else if (design == "default_auto") {
+    var theme_path = "../node_modules/bootstrap/dist/css/bootstrap.min.css";
+    document.getElementById("bootstrap_theme").href = escape(theme_path);
+
+    // https://stackoverflow.com/a/57795495
+    // check if dark mode or light mode used in OS
+    if (
+      window.matchMedia &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches
+    ) {
+      // dark mode
+      document.documentElement.setAttribute("data-bs-theme", "dark");
+    } else {
+      document.documentElement.setAttribute("data-bs-theme", "light");
+    }
+
+    // also register event listener for automatic change
+    window
+      .matchMedia("(prefers-color-scheme: dark)")
+      .addEventListener("change", (event) => {
+        let newColorScheme = event.matches ? "dark" : "light";
+        if (newColorScheme == "dark") {
+          document.documentElement.setAttribute("data-bs-theme", "dark");
+        } else {
+          document.documentElement.setAttribute("data-bs-theme", "light");
+        }
+      });
+  } else {
+    var theme_path = "../node_modules/bootstrap/dist/css/bootstrap.min.css";
+    document.getElementById("bootstrap_theme").href = escape(theme_path);
+    document.documentElement.setAttribute("data-bs-theme", "light");
+  }
+
+  //update path to css file
+  document.getElementById("bootstrap_theme").href = escape(theme_path);
+}

gui/preload-main.js

@@ -337,17 +337,7 @@ window.addEventListener("DOMContentLoaded", () => {
     document.getElementById("autoTuneSwitch").checked = false;
   }
   // theme selector
-
+  changeGuiDesign(config.theme);
-  if (config.theme != "default") {
-    var theme_path =
-      "../node_modules/bootswatch/dist/" + config.theme + "/bootstrap.min.css";
-    document.getElementById("theme_selector").value = config.theme;
-    document.getElementById("bootstrap_theme").href = escape(theme_path);
-  } else {
-    var theme_path = "../node_modules/bootstrap/dist/css/bootstrap.min.css";
-    document.getElementById("theme_selector").value = "default";
-    document.getElementById("bootstrap_theme").href = escape(theme_path);
-  }
 
   // Update channel selector
   document.getElementById("update_channel_selector").value =
@@ -1161,7 +1151,9 @@ window.addEventListener("DOMContentLoaded", () => {
   });
 
   // Theme selector clicked
+
   document.getElementById("theme_selector").addEventListener("change", () => {
+    /*
     var theme = document.getElementById("theme_selector").value;
     if (theme != "default") {
       var theme_path =
@@ -1169,10 +1161,9 @@ window.addEventListener("DOMContentLoaded", () => {
     } else {
       var theme_path = "../node_modules/bootstrap/dist/css/bootstrap.min.css";
     }
-
+*/
-    //update path to css file
+    var theme = document.getElementById("theme_selector").value;
-    document.getElementById("bootstrap_theme").href = escape(theme_path);
+    changeGuiDesign(theme);
-
     config.theme = theme;
     //fs.writeFileSync(configPath, JSON.stringify(config, null, 2));
     FD.saveConfig(config, configPath);
@@ -3368,3 +3359,66 @@ function loadSettings(elements) {
     config = data;
   });
 }
+
+function changeGuiDesign(design) {
+  if (
+    design != "default" &&
+    design != "default_light" &&
+    design != "default_dark" &&
+    design != "default_auto"
+  ) {
+    var theme_path =
+      "../node_modules/bootswatch/dist/" + design + "/bootstrap.min.css";
+    document.getElementById("theme_selector").value = design;
+    document.getElementById("bootstrap_theme").href = escape(theme_path);
+  } else if (design == "default" || design == "default_light") {
+    var theme_path = "../node_modules/bootstrap/dist/css/bootstrap.min.css";
+    document.getElementById("theme_selector").value = "default_light";
+    document.getElementById("bootstrap_theme").href = escape(theme_path);
+
+    document.documentElement.setAttribute("data-bs-theme", "light");
+  } else if (design == "default_dark") {
+    var theme_path = "../node_modules/bootstrap/dist/css/bootstrap.min.css";
+    document.getElementById("theme_selector").value = "default_dark";
+    document.getElementById("bootstrap_theme").href = escape(theme_path);
+
+    document.querySelector("html").setAttribute("data-bs-theme", "dark");
+  } else if (design == "default_auto") {
+    var theme_path = "../node_modules/bootstrap/dist/css/bootstrap.min.css";
+    document.getElementById("theme_selector").value = "default_auto";
+    document.getElementById("bootstrap_theme").href = escape(theme_path);
+
+    // https://stackoverflow.com/a/57795495
+    // check if dark mode or light mode used in OS
+    if (
+      window.matchMedia &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches
+    ) {
+      // dark mode
+      document.documentElement.setAttribute("data-bs-theme", "dark");
+    } else {
+      document.documentElement.setAttribute("data-bs-theme", "light");
+    }
+
+    // also register event listener for automatic change
+    window
+      .matchMedia("(prefers-color-scheme: dark)")
+      .addEventListener("change", (event) => {
+        let newColorScheme = event.matches ? "dark" : "light";
+        if (newColorScheme == "dark") {
+          document.documentElement.setAttribute("data-bs-theme", "dark");
+        } else {
+          document.documentElement.setAttribute("data-bs-theme", "light");
+        }
+      });
+  } else {
+    var theme_path = "../node_modules/bootstrap/dist/css/bootstrap.min.css";
+    document.getElementById("theme_selector").value = "default_light";
+    document.getElementById("bootstrap_theme").href = escape(theme_path);
+
+    document.documentElement.setAttribute("data-bs-theme", "light");
+  }
+
+  //update path to css file
+  document.getElementById("bootstrap_theme").href = escape(theme_path);
+}

gui/src/chat-module.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" data-bs-theme="light">
   <head>
     <!-- Required meta tags -->
     <meta charset="utf-8" />
@@ -48,7 +48,7 @@
     </div>
     <div class="container-fluid">
       <div class="row h-100">
-        <div class="col-4 p-2 bg-light">
+        <div class="col-4 p-2">
           <! ------Chats area ---------------------------------------------------------------------->
           <div class="container-fluid m-0 p-0">
             <div class="input-group bottom-0 m-0 w-100">
@@ -284,11 +284,11 @@
             <div class="input-group bottom-0 ms-2">
               <!--<input class="form-control" maxlength="8" style="max-width: 6rem; text-transform:uppercase; display:none" id="chatModuleDxCall" placeholder="DX CALL"></input>-->
               <!--<button class="btn btn-sm btn-primary me-2" id="emojipickerbutton" type="button">-->
-              <div class="input-group-text bg-white">
+              <div class="input-group-text">
                 <i
                   id="emojipickerbutton"
                   class="bi bi-emoji-smile p-0"
-                  style="font-size: 1rem; color: grey"
+                  style="font-size: 1rem"
                 ></i>
               </div>
 
@@ -299,10 +299,10 @@
                 placeholder="Message - Send with [Enter]"
               ></textarea>
 
-              <div class="input-group-text bg-white me-3">
+              <div class="input-group-text me-3">
                 <i
                   class="bi bi-paperclip"
-                  style="font-size: 1rem; color: grey"
+                  style="font-size: 1rem"
                   id="selectFilesButton"
                 ></i>
 
@@ -311,10 +311,7 @@
                   id="sendMessage"
                   type="button"
                 >
-                  <i
+                  <i class="bi bi-send" style="font-size: 1.2rem"></i>
-                    class="bi bi-send"
-                    style="font-size: 1.2rem; color: white"
-                  ></i>
                 </button>
               </div>
             </div>
@@ -346,7 +343,7 @@
                     />
                   </div>
                   <div
-                    class="col position-absolute image-overlay text-white justify-content-center align-items-center d-flex align-middle h-100 bg-dark opacity-0"
+                    class="col position-absolute image-overlay text-white justify-content-center align-items-center d-flex align-middle h-100 opacity-0"
                     id="userImageSelector"
                   >
                     <i class="bi bi-upload" style="font-size: 2.2rem"></i>

gui/src/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-bs-theme="dark">
+<html lang="en" data-bs-theme="light">
   <head>
     <!-- Required meta tags -->
     <meta charset="utf-8" />
@@ -24,7 +24,7 @@
 
   <body>
     <!-- SECONDARY NAVBAR -->
-    <nav class="navbar fixed-top bg-light shadow-sm mt-0 mb-1 pb-1 pt-1">
+    <nav class="navbar fixed-top border-bottom rounded-3 mt-0 p-2">
       <div style="margin-left: 5px">
         <div
           class="btn-toolbar"
@@ -102,10 +102,7 @@
               type="button"
               disabled
             >
-              <i
+              <i class="bi bi-diagram-3" style="font-size: 1rem"></i>
-                class="bi bi-diagram-3"
-                style="font-size: 1rem; color: white"
-              ></i>
             </button>
           </div>
         </div>
@@ -120,8 +117,8 @@
           data-bs-html="false"
           title="Abort session and stop transmissions"
         >
-          <i class="bi bi-x-octagon-fill"></i> &nbsp;STOP &nbsp;<i
+          <i class="bi bi-sign-stop-fill"></i> &nbsp;STOP TRANSMISSION&nbsp;<i
-            class="bi bi-x-octagon-fill"
+            class="bi bi-sign-stop-fill"
           ></i>
         </button>
       </div>
@@ -273,21 +270,18 @@
       <div class="container p-0" style="margin-top: 55px">
         <div class="row collapse multi-collapse show" id="collapseFirstRow">
           <div class="col">
-            <div class="card text-dark mb-0">
+            <div class="card mb-0">
-              <div class="card-header p-1">
+              <div class="card-header p-2">
-                <i
+                <div class="">
-                  class="bi bi-volume-up"
+                  <i class="bi bi-volume-up" style="font-size: 1rem"></i
-                  style="font-size: 1rem; color: black"
+                  ><strong>AUDIO</strong>
-                ></i
+                </div>
-                ><strong>AUDIO</strong>
               </div>
-              <div class="card-body p-2 mb-1">
+
+              <div class="card-body p-1" style="height: 100px">
                 <div class="input-group input-group-sm mb-1">
                   <span class="input-group-text">
-                    <i
+                    <i class="bi bi-mic-fill" style="font-size: 1rem"></i>
-                      class="bi bi-mic-fill"
-                      style="font-size: 1rem; color: black"
-                    ></i>
                   </span>
                   <select
                     class="form-select form-select-sm"
@@ -299,10 +293,7 @@
                 </div>
                 <div class="input-group input-group-sm mb-1">
                   <span class="input-group-text">
-                    <i
+                    <i class="bi bi-volume-up" style="font-size: 1rem"></i>
-                      class="bi bi-volume-up"
-                      style="font-size: 1rem; color: black"
-                    ></i>
                   </span>
                   <select
                     class="form-select form-select-sm"
@@ -318,12 +309,9 @@
             <!--Start of TNC rig control pane-->
           </div>
           <div class="col">
-            <div class="card text-dark mb-0">
+            <div class="card mb-0">
               <div class="card-header p-1">
-                <i
+                <i class="bi bi-projector" style="font-size: 1rem"></i
-                  class="bi bi-projector"
-                  style="font-size: 1rem; color: black"
-                ></i
                 ><strong> TNC RIG CONTROL</strong>
                 <div
                   class="btn-group btn-group-sm"
@@ -384,7 +372,7 @@
                   </label>
                 </div>
               </div>
-              <div class="card-body p-2">
+              <div class="card-body p-2" style="height: 100px">
                 <!-- RADIO CONTROL DISABLED -->
                 <div id="radio-control-disabled">
                   <p class="small">
@@ -421,41 +409,43 @@
                       />
                     </div>
 
-                    <span class="input-group-text">Rigctld application</span>
+                    <div class="input-group input-group-sm mb-1">
-                    <button
+                      <span class="input-group-text">Rigctld application</span>
-                      class="btn btn-outline-success"
+                      <button
-                      type="button"
+                        class="btn btn-outline-success"
-                      id="hamlib_rigctld_start"
+                        type="button"
-                    >
+                        id="hamlib_rigctld_start"
-                      Start
+                      >
-                    </button>
+                        Start
-                    <input
+                      </button>
-                      type="text"
+                      <input
-                      class="form-control"
+                        type="text"
-                      placeholder="Status"
+                        class="form-control"
-                      id="hamlib_rigctld_status"
+                        placeholder="Status"
-                      aria-label="State"
+                        id="hamlib_rigctld_status"
-                      aria-describedby="basic-addon1"
+                        aria-label="State"
-                    />
+                        aria-describedby="basic-addon1"
-                    <button
+                      />
-                      class="btn btn-outline-danger"
+                      <button
-                      type="button"
+                        class="btn btn-outline-danger"
-                      id="hamlib_rigctld_stop"
+                        type="button"
-                    >
+                        id="hamlib_rigctld_stop"
-                      Stop
+                      >
-                    </button>
+                        Stop
-                    <button
+                      </button>
-                      type="button"
+                      <button
-                      id="testHamlib"
+                        type="button"
-                      class="btn btn-sm btn-outline-secondary"
+                        id="testHamlib"
-                      data-bs-placement="bottom"
+                        class="btn btn-sm btn-outline-secondary ms-1"
-                      data-bs-toggle="tooltip"
+                        data-bs-placement="bottom"
-                      data-bs-trigger="hover"
+                        data-bs-toggle="tooltip"
-                      data-bs-html="true"
+                        data-bs-trigger="hover"
-                      title="Test your hamlib settings and toggle PTT once. Button will become <strong class='text-success'>green</strong> on success and <strong class='text-danger'>red</strong> if fails."
+                        data-bs-html="true"
-                    >
+                        title="Test your hamlib settings and toggle PTT once. Button will become <strong class='text-success'>green</strong> on success and <strong class='text-danger'>red</strong> if fails."
-                      PTT Test
+                      >
-                    </button>
+                        PTT Test
+                      </button>
+                    </div>
                   </div>
                 </div>
 
@@ -481,8 +471,10 @@
           id="collapseSecondRow"
         >
           <div class="col">
-            <div class="card text-dark mb-1">
+            <div class="card mb-1">
-              <div class="card-header p-1"><strong>MY STATION</strong></div>
+              <div class="card-header p-2">
+                <i class="bi bi-house-door"></i><strong> MY STATION</strong>
+              </div>
               <div class="card-body p-2">
                 <div class="row">
                   <div class="col-md-auto">
@@ -497,7 +489,7 @@
                       <span class="input-group-text">
                         <i
                           class="bi bi-person-bounding-box"
-                          style="font-size: 1rem; color: black"
+                          style="font-size: 1rem"
                         ></i>
                       </span>
                       <input
@@ -545,10 +537,7 @@
                       title="Enter your gridsquare and save it"
                     >
                       <span class="input-group-text">
-                        <i
+                        <i class="bi bi-house-fill" style="font-size: 1rem"></i>
-                          class="bi bi-house-fill"
-                          style="font-size: 1rem; color: black"
-                        ></i>
                       </span>
                       <input
                         type="text"
@@ -568,11 +557,11 @@
             </div>
           </div>
           <div class="col">
-            <div class="card text-dark mb-0">
+            <div class="card mb-0">
-              <div class="card-header p-1 d-flex">
+              <div class="card-header p-2 d-flex">
                 <i
                   class="bi bi-cloud-download ms-1 me-1"
-                  style="font-size: 1rem; color: black"
+                  style="font-size: 1rem"
                 ></i>
                 <strong>UPDATER</strong>
                 <div class="progress w-75 ms-1 m-1">
@@ -630,12 +619,9 @@
       <div class="container mt-2 p-0">
         <div class="row collapse multi-collapse" id="collapseThirdRow">
           <div class="col-5">
-            <div class="card text-dark mb-1">
+            <div class="card mb-1">
               <div class="card-header p-1">
-                <i
+                <i class="bi bi-volume-up" style="font-size: 1rem"></i>
-                  class="bi bi-volume-up"
-                  style="font-size: 1rem; color: black"
-                ></i>
                 <strong>AUDIO LEVEL</strong>
                 <button
                   type="button"
@@ -769,8 +755,8 @@
             </div>
           </div>
           <div class="col">
-            <div class="card text-dark mb-1">
+            <div class="card mb-1">
-              <div class="card-header p-1">
+              <div class="card-header p-2">
                 <strong>PING, CQ & BEACON</strong>
               </div>
               <div class="card-body p-2">
@@ -879,7 +865,7 @@
         </div>
         <div class="row collapse multi-collapse" id="collapseFourthRow">
           <div class="col-5">
-            <div class="card text-dark mb-1">
+            <div class="card mb-1">
               <div class="card-header p-1">
                 <div
                   class="btn-group btn-group-sm"
@@ -976,13 +962,12 @@
             </div>
           </div>
           <div class="col">
-            <div class="card text-dark mb-1" style="height: 240px">
+            <div class="card mb-1" style="height: 240px">
               <!--325px-->
-              <div class="card-header p-1">
+              <div class="card-header p-2">
                 <i
                   class="bi bi-list-columns-reverse"
-                  style="font-size: 1rem; color: black"
+                  style="font-size: 1rem"
-                  style="font-size: 1rem; color: black"
                 ></i>
                 <strong> HEARD STATIONS</strong>
               </div>
@@ -1035,10 +1020,7 @@
           id="openReceivedFilesFolder"
           type="button"
         >
-          <i
+          <i class="bi bi-folder2-open" style="font-size: 1rem"></i>
-            class="bi bi-folder2-open"
-            style="font-size: 1rem; color: white"
-          ></i>
         </button>
         <h5 id="receivedFilesSidebarLabel">Filetransfer</h5>
         <button
@@ -1119,7 +1101,7 @@
           <div class="container mt-1">
             <div class="row mb-1">
               <div class="col">
-                <div class="card text-dark mb-0">
+                <div class="card mb-0">
                   <div class="card-header p-1"><strong>DX Station</strong></div>
                   <div class="card-body p-2">
                     <div class="row">
@@ -1164,7 +1146,7 @@
             <!--row-->
             <div class="row mb-1">
               <div class="col">
-                <div class="card text-dark mb-0">
+                <div class="card mb-0">
                   <!--
                               <div class="card-header p-1"> <strong>Data</strong>
                               </div>
@@ -1182,7 +1164,7 @@
             <!--row-->
             <div class="row mb-1">
               <div class="col">
-                <div class="card text-dark mb-0">
+                <div class="card mb-0">
                   <div class="card-header p-1"><strong>Mode</strong></div>
                   <div class="card-body p-2">
                     <div class="row">
@@ -1238,18 +1220,6 @@
                 </button>
               </div>
             </div>
-            <!--
-                     <div class="row">
-                         <div class="col">
-                             <div class="card text-dark bg-light mb-0" >
-                                 <div class="card-header p-2">Info </div>
-                                 <div class="card-body p-2">
-                                     123
-                                 </div>
-                             </div>
-                         </div>
-                     </div>
-                     -->
             <div class="row">
               <div class="col"></div>
             </div>
@@ -1263,7 +1233,9 @@
     <!--end of blur div -->
     <!---------------------------------------------------------------------- FOOTER AREA ------------------------------------------------------------>
     <div class="container-fluid">
-      <nav class="navbar fixed-bottom navbar-expand-xl navbar-light bg-light">
+      <nav
+        class="navbar fixed-bottom navbar-expand-xl navbar-light border-top rounded-3 p-2"
+      >
         <div class="col-sm-2">
           <div class="btn-toolbar" role="toolbar" style="margin-left: 2px">
             <div class="btn-group btn-group-sm me-1" role="group">
@@ -1277,10 +1249,7 @@
                 data-bs-html="true"
                 title="PTT state:<strong class='text-success'>RECEIVING</strong> / <strong class='text-danger'>TRANSMITTING</strong>"
               >
-                <i
+                <i class="bi bi-broadcast-pin" style="font-size: 0.8rem"></i>
-                  class="bi bi-broadcast-pin"
-                  style="font-size: 0.8rem; color: white"
-                ></i>
               </button>
             </div>
             <div class="btn-group btn-group-sm me-1" role="group">
@@ -1294,10 +1263,7 @@
                 data-bs-html="true"
                 title="TNC busy state: <strong class='text-success'>IDLE</strong> / <strong class='text-danger'>BUSY</strong>"
               >
-                <i
+                <i class="bi bi-cpu" style="font-size: 0.8rem"></i>
-                  class="bi bi-cpu"
-                  style="font-size: 0.8rem; color: white"
-                ></i>
               </button>
             </div>
             <div class="btn-group btn-group-sm me-1" role="group">
@@ -1311,10 +1277,7 @@
                 data-bs-html="true"
                 title="ARQ SESSION state: <strong class='text-warning'>OPEN</strong>"
               >
-                <i
+                <i class="bi bi-arrow-left-right" style="font-size: 0.8rem"></i>
-                  class="bi bi-arrow-left-right"
-                  style="font-size: 0.8rem; color: white"
-                ></i>
               </button>
             </div>
             <div class="btn-group btn-group-sm me-1" role="group">
@@ -1330,7 +1293,7 @@
               >
                 <i
                   class="bi bi-file-earmark-binary"
-                  style="font-size: 0.8rem; color: white"
+                  style="font-size: 0.8rem"
                 ></i>
               </button>
             </div>
@@ -1345,10 +1308,7 @@
                 data-bs-html="true"
                 title="rigctld state: <strong class='text-success'>CONNECTED</strong> / <strong class='text-secondary'>UNKNOWN</strong>"
               >
-                <i
+                <i class="bi bi-usb-symbol" style="font-size: 0.8rem"></i>
-                  class="bi bi-usb-symbol"
-                  style="font-size: 0.8rem; color: white"
-                ></i>
               </button>
             </div>
           </div>
@@ -1389,10 +1349,7 @@
                     data-bs-html="false"
                     title="save frequency"
                   >
-                    <i
+                    <i class="bi bi-check-lg" style="font-size: 0.8rem"></i>
-                      class="bi bi-check-lg"
-                      style="font-size: 0.8rem; color: white"
-                    ></i>
                   </button>
                 </div>
               </form>
@@ -1495,10 +1452,7 @@
         <div class="col-sm-3">
           <div class="input-group input-group-sm">
             <span class="input-group-text">
-              <i
+              <i class="bi bi-speedometer2" style="font-size: 1rem"></i>
-                class="bi bi-speedometer2"
-                style="font-size: 1rem; color: black"
-              ></i>
             </span>
             <span
               class="input-group-text"
@@ -1511,14 +1465,11 @@
               <i
                 id="speed_level"
                 class="bi bi-reception-0"
-                style="font-size: 1rem; color: black"
+                style="font-size: 1rem"
               ></i>
             </span>
             <span class="input-group-text">
-              <i
+              <i class="bi bi-file-earmark-binary" style="font-size: 1rem"></i>
-                class="bi bi-file-earmark-binary"
-                style="font-size: 1rem; color: black"
-              ></i>
             </span>
             <span
               class="input-group-text"
@@ -1749,7 +1700,9 @@
                     class="form-select form-select-sm w-50"
                     id="theme_selector"
                   >
-                    <option value="default">Default</option>
+                    <option value="default_light">Default (light)</option>
+                    <option value="default_dark">Default (dark)</option>
+                    <option value="default_auto">Default (auto)</option>
                     <option value="cerulean">Cerulean</option>
                     <option value="cosmo">Cosmo</option>
                     <option value="cyborg">Cyborg</option>
@@ -1794,7 +1747,7 @@
                 </div>
                 <div class="input-group input-group-sm mb-1">
                   <label class="input-group-text w-50">Enable fancy GUI</label>
-                  <label class="input-group-text bg-white w-50">
+                  <label class="input-group-text w-50">
                     <div class="form-check form-switch form-check-inline">
                       <input
                         class="form-check-input"
@@ -1841,7 +1794,7 @@
                   <label class="input-group-text w-50"
                     >Enable "is typing"</label
                   >
-                  <label class="input-group-text bg-white w-50">
+                  <label class="input-group-text w-50">
                     <div class="form-check form-switch form-check-inline">
                       <input
                         class="form-check-input"
@@ -1859,7 +1812,7 @@
                   <label class="input-group-text w-50"
                     >Allow requesting "user profile"</label
                   >
-                  <label class="input-group-text bg-white w-50">
+                  <label class="input-group-text w-50">
                     <div class="form-check form-switch form-check-inline">
                       <input
                         class="form-check-input"
@@ -1874,7 +1827,7 @@
                   <label class="input-group-text w-50"
                     >Allow requesting "shared folder"</label
                   >
-                  <label class="input-group-text bg-white w-50">
+                  <label class="input-group-text w-50">
                     <div class="form-check form-switch form-check-inline">
                       <input
                         class="form-check-input"
@@ -2485,7 +2438,7 @@
                   <label class="input-group-text w-50"
                     >Enable waterfall data</label
                   >
-                  <label class="input-group-text bg-white w-50">
+                  <label class="input-group-text w-50">
                     <div class="form-check form-switch form-check-inline">
                       <input
                         class="form-check-input"
@@ -2502,7 +2455,7 @@
                   <label class="input-group-text w-50"
                     >Enable scatter diagram data</label
                   >
-                  <label class="input-group-text bg-white w-50">
+                  <label class="input-group-text w-50">
                     <div class="form-check form-switch form-check-inline">
                       <input
                         class="form-check-input"
@@ -2519,7 +2472,7 @@
                   <label class="input-group-text w-50"
                     >Enable 563Hz only mode</label
                   >
-                  <label class="input-group-text bg-white w-50">
+                  <label class="input-group-text w-50">
                     <div class="form-check form-switch form-check-inline">
                       <input
                         class="form-check-input"
@@ -2534,7 +2487,7 @@
                 </div>
                 <div class="input-group input-group-sm mb-1">
                   <label class="input-group-text w-50">Respond to CQ</label>
-                  <label class="input-group-text bg-white w-50">
+                  <label class="input-group-text w-50">
                     <div class="form-check form-switch form-check-inline">
                       <input
                         class="form-check-input"
@@ -2549,7 +2502,7 @@
                 </div>
                 <div class="input-group input-group-sm mb-1">
                   <label class="input-group-text w-50">RX buffer size</label>
-                  <label class="input-group-text bg-white w-50">
+                  <label class="input-group-text w-50">
                     <select
                       class="form-select form-select-sm"
                       id="rx_buffer_size"
@@ -2581,7 +2534,7 @@
                   <label class="input-group-text w-50"
                     >Explorer publishing</label
                   >
-                  <label class="input-group-text bg-white w-50">
+                  <label class="input-group-text w-50">
                     <div class="form-check form-switch form-check-inline">
                       <input
                         class="form-check-input"
@@ -2598,7 +2551,7 @@
                   <label class="input-group-text w-50"
                     >Explorer stats publishing</label
                   >
-                  <label class="input-group-text bg-white w-50">
+                  <label class="input-group-text w-50">
                     <div class="form-check form-switch form-check-inline">
                       <input
                         class="form-check-input"
@@ -2622,7 +2575,7 @@
               >
                 <div class="input-group input-group-sm mb-1">
                   <label class="input-group-text w-50">Enable autotune</label>
-                  <label class="input-group-text bg-white w-50">
+                  <label class="input-group-text w-50">
                     <div class="form-check form-switch form-check-inline ms-2">
                       <input
                         class="form-check-input"
@@ -2637,7 +2590,7 @@
                 </div>
                 <div class="input-group input-group-sm mb-1">
                   <label class="input-group-text w-50">Enable FSK mode</label>
-                  <label class="input-group-text bg-white w-50">
+                  <label class="input-group-text w-50">
                     <div class="form-check form-switch form-check-inline ms-2">
                       <input
                         class="form-check-input"

gui/src/styles.css

@@ -93,3 +93,17 @@ https://stackoverflow.com/a/9622873
   opacity: 0.75 !important;
   transition: 0.5s;
 }
+
+/* theme area */
+
+/* default light theme mods */
+[data-bs-theme="light"] {
+  .card-header {
+    background-color: var(--bs-card-cap-bg);
+    /*--bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.3);*/
+  }
+}
+/* default dark theme mods */
+[data-bs-theme="dark"] {
+  /* default dark theme mods */
+}

tnc/config.ini

@@ -4,15 +4,15 @@ tncport = 3000
 
 [STATION]
 #station settings
-mycall = DN2LS-0
+mycall = DJ2LS-9
-mygrid = JN48cs
+mygrid = JN12AA
 ssid_list = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
 
 [AUDIO]
 #audio settings
-rx = 6
+rx = 2
-tx = 6
+tx = 3
-txaudiolevel = 20
+txaudiolevel = 78
 auto_tune = False
 
 [RADIO]
@@ -26,8 +26,8 @@ rigctld_port = 4532
 scatter = True
 fft = True
 narrowband = False
-fmin = -150.0
+fmin = -250.0
-fmax = 150.0
+fmax = 250.0
 qrv = True
 rxbuffersize = 16
 explorer = False