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/desktop/renderer.js

@@ -0,0 +1,31 @@
+document.addEventListener('DOMContentLoaded', async () => {
+    const toggleButton = document.getElementById('toggle-dark-mode');
+    const systemButton = document.getElementById('system-dark-mode');
+    const themeStatus = document.getElementById('theme-status');
+
+    // Initial theme check
+    const currentTheme = await window.darkMode.get();
+    updateThemeStatus(currentTheme);
+
+    if (toggleButton) {
+        toggleButton.addEventListener('click', async () => {
+            const theme = await window.darkMode.toggle();
+            updateThemeStatus(theme);
+        });
+    }
+
+    if (systemButton) {
+        systemButton.addEventListener('click', async () => {
+            const theme = await window.darkMode.system();
+            updateThemeStatus(theme);
+        });
+    }
+
+    function updateThemeStatus(theme) {
+        if (themeStatus) {
+            themeStatus.textContent = `Current Theme: ${
+                theme.shouldUseDarkColors ? 'Dark' : 'Light'
+            } (Source: ${theme.themeSource})`;
+        }
+    }
+});

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

@@ -0,0 +1,22 @@
+export async function toggleDarkMode() {
+    if (window.darkMode) {
+        const isDark = await window.darkMode.toggle();
+        document.body.className = isDark ? 'dark' : 'light';
+        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';
+        return theme;
+    } else {
+        console.error('Dark mode API is not available.');
+        return null;
+    }
+}

td.vue/src/styles/colors.scss

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

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

@@ -0,0 +1,5 @@
+/* Dark Mode Styles */
+body.dark {
+    background-color: $dark-bg;
+    color: $dark-text;
+}