allow user to select theme they want to use

meshchat.py

@@ -1530,6 +1530,10 @@ class ReticulumMeshChat:
         if "display_name" in data and data["display_name"] != "":
             self.config.display_name.set(data["display_name"])
 
+        # update theme in config
+        if "theme" in data and data["theme"] != "":
+            self.config.theme.set(data["theme"])
+
         # update auto announce interval
         if "auto_announce_interval_seconds" in data:
 
@@ -1796,6 +1800,7 @@ class ReticulumMeshChat:
             "auto_announce_enabled": self.config.auto_announce_enabled.get(),
             "auto_announce_interval_seconds": self.config.auto_announce_interval_seconds.get(),
             "last_announced_at": self.config.last_announced_at.get(),
+            "theme": self.config.theme.get(),
             "auto_resend_failed_messages_when_announce_received": self.config.auto_resend_failed_messages_when_announce_received.get(),
             "allow_auto_resending_failed_messages_with_attachments": self.config.allow_auto_resending_failed_messages_with_attachments.get(),
             "auto_send_failed_messages_to_propagation_node": self.config.auto_send_failed_messages_to_propagation_node.get(),
@@ -2725,6 +2730,7 @@ class Config:
     auto_announce_enabled = BoolConfig("auto_announce_enabled", False)
     auto_announce_interval_seconds = IntConfig("auto_announce_interval_seconds", 0)
     last_announced_at = IntConfig("last_announced_at", None)
+    theme = StringConfig("theme", "light")
     auto_resend_failed_messages_when_announce_received = BoolConfig("auto_resend_failed_messages_when_announce_received", True)
     allow_auto_resending_failed_messages_with_attachments = BoolConfig("allow_auto_resending_failed_messages_with_attachments", False)
     auto_send_failed_messages_to_propagation_node = BoolConfig("auto_send_failed_messages_to_propagation_node", False)

package.json

@@ -16,8 +16,12 @@
     "node": ">=18"
   },
   "devDependencies": {
+    "@tailwindcss/forms": "^0.5.9",
+    "autoprefixer": "^10.4.20",
     "electron": "^30.0.8",
-    "electron-builder": "^24.6.3"
+    "electron-builder": "^24.6.3",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.16"
   },
   "build": {
     "appId": "com.liamcottle.reticulummeshchat",

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/frontend/components/App.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="{'dark': config?.dark_mode}" class="h-screen w-full flex flex-col">
+    <div :class="{'dark': config?.theme === 'dark'}" class="h-screen w-full flex flex-col">
 
         <!-- header -->
         <div class="flex bg-white dark:bg-zinc-950 p-2 border-gray-300 dark:border-zinc-900 border-b">

src/frontend/components/settings/SettingsPage.vue

@@ -2,6 +2,23 @@
     <div class="flex flex-col flex-1 overflow-hidden min-w-full sm:min-w-[500px] dark:bg-zinc-950">
         <div class="overflow-y-auto space-y-2 p-2">
 
+            <!-- appearance -->
+            <div class="bg-white dark:bg-zinc-800 rounded shadow">
+                <div class="flex border-b border-gray-300 dark:border-zinc-700 text-gray-700 dark:text-gray-200 p-2 font-semibold">Appearance</div>
+                <div class="divide-y divide-gray-300 dark:divide-zinc-700 text-gray-900 dark:text-gray-100">
+
+                    <div class="p-2">
+                        <div class="flex">
+                            <select v-model="config.theme" @change="onThemeChange" class="bg-gray-50 dark:bg-zinc-700 border border-gray-300 dark:border-zinc-600 text-gray-900 dark:text-gray-100 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-600 dark:focus:border-blue-600 block w-full p-2.5">
+                                <option value="light">Light Mode</option>
+                                <option value="dark">Dark Mode</option>
+                            </select>
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+
             <!-- interfaces -->
             <div class="bg-white dark:bg-zinc-800 rounded shadow">
                 <div class="flex border-b border-gray-300 dark:border-zinc-700 text-gray-700 dark:text-gray-200 p-2 font-semibold">Interfaces</div>
@@ -190,6 +207,11 @@ export default {
                 console.log(e);
             }
         },
+        async onThemeChange() {
+            await this.updateConfig({
+                "theme": this.config.theme,
+            });
+        },
         async onAutoResendFailedMessagesWhenAnnounceReceivedChange() {
             await this.updateConfig({
                 "auto_resend_failed_messages_when_announce_received": this.config.auto_resend_failed_messages_when_announce_received,

src/frontend/index.html

@@ -9,7 +9,6 @@
     <title>Reticulum MeshChat</title>
 
     <!-- scripts -->
-    <script src="assets/js/tailwindcss/tailwind-v3.4.3-forms-v0.5.7.js"></script>
     <script src="assets/js/axios@1.6.8/dist/axios.min.js"></script>
     <script src="assets/js/micron-parser.js"></script>
 

src/frontend/main.js

@@ -1,6 +1,7 @@
 import { createApp, defineAsyncComponent } from 'vue';
 import { createRouter, createWebHashHistory } from 'vue-router';
 import vClickOutside from "click-outside-vue3";
+import "./style.css";
 import "./fonts/RobotoMonoNerdFont/font.css";
 
 import App from './components/App.vue';

src/frontend/public/call.html

@@ -20,10 +20,18 @@
     <script src="assets/js/codec2-emscripten/sox.js"></script>
     <script src="assets/js/codec2-emscripten/codec2-lib.js"></script>
 
-</head>
-<body class="bg-gray-100 dark:bg-zinc-950">
-<div id="app" class="flex h-full">
+    <!-- tailwind config since we are not using vite compiling for this page -->
+    <!-- fixme: call.html should be refactored to be a proper vue component, instead of standalone html file -->
+    <script>
+        window.tailwind.config = {
+            darkMode: 'selector',
+        };
+    </script>
 
+</head>
+<body>
+<div id="app" class="flex h-full">
+    <div class="flex w-full h-full bg-gray-100 dark:bg-zinc-950" :class="{'dark': config?.theme === 'dark'}">
         <div class="mx-auto my-auto w-full max-w-xl p-4">
 
             <!-- in active call -->
@@ -278,7 +286,7 @@
             </div>
 
         </div>
-
+    </div>
 </div>
 
 <script>
@@ -286,6 +294,8 @@
         data() {
             return {
 
+                config: null,
+
                 audioCall: null,
                 audioCalls: [],
 
@@ -659,6 +669,7 @@
                     const response = await axios.get("/api/v1/config");
 
                     // update ui
+                    this.config = response.data.config;
                     this.myAudioCallAddressHash = response.data.config.audio_call_address_hash;
 
                 } catch(e) {

src/frontend/style.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind.config.js

@@ -0,0 +1,17 @@
+import formsPlugin from '@tailwindcss/forms';
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    darkMode: 'selector',
+    content: [
+        "./src/frontend/index.html",
+        "./src/**/*.{vue,js,ts,jsx,tsx,html}",
+    ],
+    theme: {
+        extend: {},
+    },
+    plugins: [
+        formsPlugin,
+    ],
+}
+