Dark mode Implimentation for Desktop

td.vue/public/preload.js

@@ -1,9 +1,18 @@
-const { contextBridge, ipcRenderer } = require('electron')
+console.log('Preload script loaded2');
+const { contextBridge, ipcRenderer } = require('electron');
 
 if (process.env.IS_TEST === 'true') {
     require('wdio-electron-service/preload');
 }
 
+// Expose Dark Mode API to the renderer process
+contextBridge.exposeInMainWorld('darkMode', {
+    toggle: () => ipcRenderer.invoke('dark-mode:toggle'),
+    system: () => ipcRenderer.invoke('dark-mode:system'),
+    get: () => ipcRenderer.invoke('dark-mode:get'),
+});
+
+// Expose Electron API methods to the renderer process
 contextBridge.exposeInMainWorld('electronAPI', {
     // renderer to electron main
     appClose: () => ipcRenderer.send('close-app'),

td.vue/src/components/FormButton.vue

@@ -19,6 +19,8 @@ button {
 </style>
 
 <script>
+import { toggleDarkMode, setSystemTheme } from '@/plugins/dark-mode';
+
 export default {
     name: 'TdFormButton',
     props: {
@@ -44,6 +46,10 @@ export default {
             required: false,
             default: false
         }
+    },
+    methods: {
+        toggleDarkMode,
+        setSystemTheme
     }
 };
 </script>

td.vue/src/components/Navbar.vue

@@ -14,6 +14,12 @@
       </b-navbar-nav>
 
       <b-navbar-nav class="ml-auto">
+        <b-nav-item>
+          <b-button size="sm" variant="outline-light" @click="handleToggleDarkMode">Toggle Dark Mode</b-button>
+        </b-nav-item>
+        <b-nav-item>
+          <b-button size="sm" variant="outline-light" @click="handleSetSystemTheme">System Theme</b-button>
+        </b-nav-item>
         <b-nav-text v-show="username" class="logged-in-as">{{ $t('nav.loggedInAs')}} {{ username }}</b-nav-text>
         <b-nav-item v-show="username" @click="onLogOut" id="nav-sign-out">
           <font-awesome-icon
@@ -113,7 +119,7 @@ $icon-height: 1.2rem;
 
 <script>
 import { mapGetters } from 'vuex';
-
+import { toggleDarkMode, setSystemTheme } from '../plugins/dark-mode';
 import { LOGOUT } from '@/store/actions/auth.js';
 import TdLocaleSelect from './LocaleSelect.vue';
 
@@ -128,6 +134,12 @@ export default {
         ])
     },
     methods: {
+        async handleToggleDarkMode() {
+            await toggleDarkMode(); // Call the utility function
+        },
+        async handleSetSystemTheme() {
+            await setSystemTheme(); // Call the utility function
+        },
         onLogOut(evt) {
             evt.preventDefault();
             this.$store.dispatch(LOGOUT);

td.vue/src/desktop/desktop.js

@@ -1,6 +1,7 @@
-'use strict';
 
-import { app, protocol, BrowserWindow, Menu, ipcMain } from 'electron';
+'use strict';
+console.log('desktop.js is loaded');
+import { app, protocol, BrowserWindow, Menu, ipcMain, nativeTheme } from 'electron';
 import { createProtocol } from 'vue-cli-plugin-electron-builder/lib';
 import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer';
 import menu from './menu.js';
@@ -64,6 +65,33 @@ async function createWindow () {
     }
 }
 
+// Dark Mode IPC Handlers
+function setupDarkModeHandlers() {
+    // Toggle Dark Mode
+    ipcMain.handle('dark-mode:toggle', () => {
+        if (nativeTheme.shouldUseDarkColors) {
+            nativeTheme.themeSource = 'light';
+        } else {
+            nativeTheme.themeSource = 'dark';
+        }
+        return nativeTheme.shouldUseDarkColors;
+    });
+
+    // Set System Dark Mode
+    ipcMain.handle('dark-mode:system', () => {
+        nativeTheme.themeSource = 'system';
+        return nativeTheme.shouldUseDarkColors;
+    });
+
+    // Get Current Theme
+    ipcMain.handle('dark-mode:get', () => {
+        return {
+            shouldUseDarkColors: nativeTheme.shouldUseDarkColors,
+            themeSource: nativeTheme.themeSource
+        };
+    });
+}
+
 // Quit when all windows are closed.
 app.on('window-all-closed', () => {
     // On macOS it is common for applications and their menu bar
@@ -102,6 +130,9 @@ app.on('ready', async () => {
         }
     }
 
+    // Setup Dark Mode Handlers
+    setupDarkModeHandlers();
+    // Existing IPC Handlers
     ipcMain.on('close-app', handleCloseApp);
     ipcMain.on('model-closed', handleModelClosed);
     ipcMain.on('model-open-confirmed', handleModelOpenConfirmed);

td.vue/src/plugins/dark-mode.js

@@ -0,0 +1,24 @@
+export async function toggleDarkMode() {
+    if (window.darkMode) {
+        const isDark = await window.darkMode.toggle();
+        document.body.className = isDark ? 'dark' : 'light';
+        console.log('Darkmode status: ' + isDark);
+        return isDark;
+    } else {
+        console.error('Dark mode API is not available.');
+        return null;
+    }
+}
+
+export async function setSystemTheme() {
+    if (window.darkMode) {
+        await window.darkMode.system();
+        const theme = await window.darkMode.get();
+        document.body.className = theme.shouldUseDarkColors ? 'dark' : 'light';
+        console.log('Darkmode status: ' + theme.shouldUseDarkColors);
+        return theme;
+    } else {
+        console.error('Dark mode API is not available.');
+        return null;
+    }
+}

td.vue/src/styles/colors.scss

@@ -4,3 +4,9 @@ $gray: #aea79f;
 $white: #ffffff;
 $black: #333333;
 
+$dark-bg: #121212;
+$dark-but-lighter-bg: #2C2C2C;
+$dark-text: #e0e0e0;
+$dark-border: #424242;
+$dark-hover-bg: #1e1e1e;
+$dark-hover-text: #f5f5f5;

td.vue/src/styles/dark-mode.scss

@@ -0,0 +1,103 @@
+/* Dark Mode Styles */
+body.dark {
+    background-color: $dark-bg;
+    color: $dark-text;
+}
+
+/* Dark mode overrides for Jumbotron when body has .dark */
+body.dark .jumbotron,
+body.dark .b-jumbotron {
+  background-color: $dark-but-lighter-bg !important;  // from your colors.scss: e.g. #121212
+  color: $dark-text !important;          // e.g. #e0e0e0
+  // If a border or other styling is needed:
+  border: 1px solid $dark-border !important;
+}
+
+body.dark .jumbotron a,
+body.dark .b-jumbotron a {
+  color: $orange !important;             // or any accent color
+}
+
+body.dark .td-cupcake {
+  filter: invert(1);
+}
+
+body.dark .b-form-textarea,
+body.dark .form-control {
+  background-color: $dark-but-lighter-bg !important; /* or your chosen dark color */
+  color: $dark-text !important;
+  border-color: $dark-border !important;
+}
+
+/* For <b-card> */
+body.dark .card {
+  background-color: $dark-but-lighter-bg !important; /* or your chosen dark color */
+  color: $dark-text !important;
+  border-color: $dark-border !important;
+}
+
+body.dark .dropdown-menu {
+  background-color: $dark-but-lighter-bg !important;  /* Dark background */
+  color: $dark-text !important;            /* Light text */
+  border: 1px solid $dark-border !important; /* Optional border */
+}
+
+body.dark .dropdown-item {
+  color: $dark-text !important; 
+}
+
+/* Optional hover/focus states */
+body.dark .dropdown-item:hover, 
+body.dark .dropdown-item:focus {
+  background-color: $dark-hover-bg !important; 
+  color: $dark-hover-text !important;
+}
+
+body.dark .modal-content{
+  background-color: $dark-bg !important; /* or your preferred dark color */
+  color: $dark-text !important;
+}
+
+body.dark .list-group-item {
+  background-color: $dark-but-lighter-bg !important;
+  color: $dark-text !important;
+  border-color: $dark-border !important; /* optional border override */
+}
+
+/* If you want a hover effect: */
+body.dark .list-group-item:hover {
+  background-color: $dark-bg !important;
+}
+
+body.dark .td-report-options {
+  background-color: $dark-but-lighter-bg !important;
+  color: $dark-text !important;
+}
+
+// body.dark .td-report-section {
+//   background-color: $dark-but-lighter-bg !important;
+//   color: cyan !important;
+// }
+
+body.dark .table {
+  background-color: $dark-bg !important;
+  color: $dark-text !important;
+}
+
+/* This ensures text inside td-diagram-detail is light on a dark background */
+body.dark .x6-graph-svg {
+  filter: invert(1);
+}
+
+body.dark .diagram-header-text a{
+  color: $dark-text !important;
+}
+
+body.dark .diagram-description-text a{
+  color: $dark-text !important;
+}
+
+body.dark .x6-widget-stencil {
+  background-color: $dark-bg !important;
+  color: $dark-text !important;
+}