fixing dark color mode support + some gui adjustments

freedata_gui/src/components/chat_conversations.vue

@@ -13,7 +13,7 @@
 
   <!-- List of chats -->
   <div
-    class="list-group bg-body-tertiary m-0 p-1"
+    class="list-group m-0 p-1"
     id="chat-list-tab"
     role="tablist"
   >

freedata_gui/src/components/chat_messages_image_preview.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="isImage">
-    <img :src="imageUrl" alt="Image Preview" class="img-fluid border rounded-top bg-light w-100" />
+    <img :src="imageUrl" alt="Image Preview" class="img-fluid border rounded-top w-100" />
   </div>
 </template>
 

freedata_gui/src/components/chat_messages_received.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="row justify-content-start mb-2">
     <div :class="messageWidthClass">
-      <div class="card bg-light border rounded-top text-dark">
+      <div class="card border rounded-top ">
         <div
           v-for="attachment in message.attachments"
           :key="attachment.id"
@@ -11,14 +11,14 @@
           <chat_messages_image_preview :attachment="attachment" />
 
           <div class="btn-group w-100" role="group">
-            <button class="btn btn-light border rounded-bottom text-truncate" disabled>
+            <button class="btn w-75 btn-secondary text-truncate" disabled>
               {{ attachment.name }}
             </button>
             <button
               @click="
                 downloadAttachment(attachment.hash_sha512, attachment.name)
               "
-              class="btn btn-light border rounded-bottom w-25"
+              class="btn btn-secondary w-25"
             >
               <i class="bi bi-download strong"></i>
             </button>
@@ -31,8 +31,8 @@
         </div>
 
         <div class="card-footer p-0 border-top-0">
-          <p class="p-0 m-0 me-1 text-end text-dark">
-            <span class="badge badge-secondary mr-2 text-dark">{{ getDateTime }} {{ $t('chat.utc') }}</span>
+          <p class="p-0 m-0 me-1 text-end ">
+            <span class="mr-2 ">{{ getDateTime }} {{ $t('chat.utc') }}</span>
           </p>
           <!-- Display formatted timestamp in card-footer -->
         </div>

freedata_gui/src/components/chat_messages_sent.vue

@@ -37,14 +37,14 @@
         >
           <chat_messages_image_preview :attachment="attachment" />
           <div class="btn-group w-100" role="group">
-            <button class="btn btn-light text-truncate" disabled>
+            <button class="btn w-75 btn-secondary text-truncate" disabled>
               {{ attachment.name }}
             </button>
             <button
               @click="
                 downloadAttachment(attachment.hash_sha512, attachment.name)
               "
-              class="btn btn-light w-25"
+              class="btn btn-secondary w-25"
             >
               <i class="bi bi-download strong"></i>
             </button>

freedata_gui/src/components/chat_screen.vue

@@ -58,7 +58,7 @@ watch(
 <template>
   <div class="container-fluid d-flex p-0" style="height: calc(100vh - 48px);">
     <!-- Chat Conversations Sidebar -->
-<div class="bg-light p-0 d-flex flex-column" style="min-width: 250px; max-width: 250px;">
+<div class="bg-body-tertiary p-0 d-flex flex-column" style="min-width: 250px; max-width: 250px;">
    <div class="container-fluid overflow-auto p-0 flex-grow-1">
       <chat_conversations />
    </div>

freedata_gui/src/components/settings_gui.vue

@@ -26,7 +26,7 @@
     </select>
   </div>
 
-    <!-- Language Selector -->
+    <!-- Colormode Selector -->
   <div class="input-group input-group-sm mb-1">
     <span class="input-group-text w-50 text-wrap">
       {{ $t('settings.gui.colormode') }}
@@ -42,7 +42,7 @@
      <select
       class="form-select form-select-sm w-50"
       id="colormode_selector"
-      @change="saveSettings"
+      @change="updateColormode"
       v-model="settings.local.colormode"
     >
       <option value="light">{{ $t('settings.gui.colormodelight') }}</option>
@@ -117,6 +117,7 @@ import { setActivePinia } from "pinia";
 import pinia from "../store/index";
 import { availableLanguages } from '../js/i18n';
 import i18next from '../js/i18n';
+import {applyColorMode} from '../js/freedata.js'
 
 // Set the active Pinia store
 setActivePinia(pinia);
@@ -142,6 +143,11 @@ export default {
       i18next.changeLanguage(this.settings.local.language);
       this.$forceUpdate();
     },
+    updateColormode() {
+      saveSettings();
+      applyColorMode(this.settings.local.colormode);
+
+    },
   },
 };
 </script>

freedata_gui/src/js/freedata.js

@@ -122,3 +122,24 @@ export function removeFromLocalStorage(key) {
     console.error("Failed to remove data from localStorage:", error);
   }
 }
+
+/**
+ * Set GUI Color Mode.
+ * @param {string} colorMOde - The colormode, light, dark, auto.
+ */
+export function applyColorMode(colorMode){
+  // If set to "auto", detect the OS preference using matchMedia
+
+  console.log(colorMode);
+  if (colorMode === "auto") {
+    colorMode = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  }
+  // If it's an empty string, default to "light"
+  else if (colorMode === "") {
+    colorMode = "light";
+  }
+
+  // Apply the theme by setting the attribute on the document element
+  document.documentElement.setAttribute("data-bs-theme", colorMode);
+
+}

freedata_gui/src/js/popupHandler.js

@@ -6,9 +6,9 @@ export function displayToast(type, icon, content, duration) {
 
   const randomID = uuidv4();
   const toastCode = `
-    <div class="toast align-items-center bg-outline-${type} border-1" id="${randomID}" role="alert" aria-live="assertive" aria-atomic="true">
+    <div class="toast align-items-center border-1 bg-body-tertiary" id="${randomID}" role="alert" aria-live="assertive" aria-atomic="true">
       <div class="d-flex">
-        <div class="toast-body p-0 m-0 bg-white rounded-2 w-100">
+        <div class="toast-body  p-0 m-0 rounded-2 w-100">
           <div class="row p-1 m-0">
             <div class="col-auto bg-${type} rounded-start rounded-2 d-flex align-items-center">
               <i class="bi ${icon}" style="font-size: 1rem; color: white;"></i>

freedata_gui/src/main.js

@@ -8,6 +8,7 @@ import { Chart, Filler } from "chart.js";
 import { getRemote, settingsStore as settings } from "./store/settingsStore";
 import { initConnections } from "./js/event_sock.js";
 import { getModemState } from "./js/api";
+import {applyColorMode} from './js/freedata.js'
 
 // Register the Filler plugin globally
 Chart.register(Filler);
@@ -28,6 +29,11 @@ app.mount("#app");
 getRemote().then(() => {
   initConnections();
   getModemState();
+
   // Update the i18next language based on the stored settings
   i18next.changeLanguage(settings.local.language);
+
+  //Apply Color Mode to gui
+  applyColorMode(settings.local.colormode);
+
 });