Merge pull request #873 from tridz-dev/dark-theme

feat: DarkMode
frappe · Sep 9, 2024 · c285752 · c285752
2 parents 6be36f0 + 8a26d86
commit c285752
Show file tree

Hide file tree

Showing 92 changed files with 1,656 additions and 444 deletions.
diff --git a/colors.json b/colors.json
@@ -11,6 +11,9 @@
     "600": "#7C7C7C",
     "700": "#525252",
     "800": "#383838",
+    "850": "#282828",
+    "875": "#212121",
+    "890": "#1C1C1C",
     "900": "#171717"
   },
   "red": {

diff --git a/main.ts b/main.ts
@@ -102,13 +102,6 @@ export class Main {
       resizable: true,
     };
 
-    if (!this.isMac) {
-      options.titleBarOverlay = {
-        color: '#FFFFFF',
-        height: 26,
-      };
-    }
-
     if (this.isDevelopment || this.isLinux) {
       Object.assign(options, { icon: this.icon });
     }

diff --git a/main/preload.ts b/main/preload.ts
@@ -27,6 +27,42 @@ const ipc = {
     return ipcRenderer.send(IPC_MESSAGES.RELOAD_MAIN_WINDOW);
   },
 
+  minimizeWindow() {
+    return ipcRenderer.send(IPC_MESSAGES.MINIMIZE_MAIN_WINDOW);
+  },
+
+  toggleMaximize() {
+    return ipcRenderer.send(IPC_MESSAGES.MAXIMIZE_MAIN_WINDOW);
+  },
+
+  isMaximized() {
+    return new Promise((resolve, reject) => {
+      ipcRenderer.send(IPC_MESSAGES.ISMAXIMIZED_MAIN_WINDOW);
+      ipcRenderer.once(
+        IPC_MESSAGES.ISMAXIMIZED_RESULT,
+        (_event, isMaximized) => {
+          resolve(isMaximized);
+        }
+      );
+    });
+  },
+
+  isFullscreen() {
+    return new Promise((resolve, reject) => {
+      ipcRenderer.send(IPC_MESSAGES.ISFULLSCREEN_MAIN_WINDOW);
+      ipcRenderer.once(
+        IPC_MESSAGES.ISFULLSCREEN_RESULT,
+        (_event, isFullscreen) => {
+          resolve(isFullscreen);
+        }
+      );
+    });
+  },
+
+  closeWindow() {
+    return ipcRenderer.send(IPC_MESSAGES.CLOSE_MAIN_WINDOW);
+  },
+
   async getCreds() {
     return (await ipcRenderer.invoke(IPC_ACTIONS.GET_CREDS)) as Creds;
   },

diff --git a/main/registerIpcMainMessageListeners.ts b/main/registerIpcMainMessageListeners.ts
@@ -21,6 +21,30 @@ export default function registerIpcMainMessageListeners(main: Main) {
     main.mainWindow!.reload();
   });
 
+  ipcMain.on(IPC_MESSAGES.MINIMIZE_MAIN_WINDOW, () => {
+    main.mainWindow!.minimize();
+  });
+
+  ipcMain.on(IPC_MESSAGES.MAXIMIZE_MAIN_WINDOW, () => {
+    main.mainWindow!.isMaximized()
+      ? main.mainWindow!.unmaximize()
+      : main.mainWindow!.maximize();
+  });
+
+  ipcMain.on(IPC_MESSAGES.ISMAXIMIZED_MAIN_WINDOW, (event) => {
+    const isMaximized = main.mainWindow?.isMaximized() ?? false;
+    event.sender.send(IPC_MESSAGES.ISMAXIMIZED_RESULT, isMaximized);
+  });
+
+  ipcMain.on(IPC_MESSAGES.ISFULLSCREEN_MAIN_WINDOW, (event) => {
+    const isFullscreen = main.mainWindow?.isFullScreen() ?? false;
+    event.sender.send(IPC_MESSAGES.ISFULLSCREEN_RESULT, isFullscreen);
+  });
+
+  ipcMain.on(IPC_MESSAGES.CLOSE_MAIN_WINDOW, () => {
+    main.mainWindow!.close();
+  });
+
   ipcMain.on(IPC_MESSAGES.OPEN_EXTERNAL, (_, link: string) => {
     shell.openExternal(link).catch((err) => emitMainProcessError(err));
   });

diff --git a/schemas/core/SystemSettings.json b/schemas/core/SystemSettings.json
@@ -117,6 +117,14 @@
       "fieldtype": "Data",
       "readOnly": true,
       "hidden": true
+    },
+    {
+      "fieldname": "darkMode",
+      "label": "Dark mode",
+      "fieldtype": "Check",
+      "default": false,
+      "description": "Sets the theme of the app.",
+      "section": "Theme"
     }
   ],
   "quickEditFields": [

diff --git a/src/App.vue b/src/App.vue
@@ -1,7 +1,14 @@
 <template>
   <div
     id="app"
-    class="h-screen flex flex-col font-sans overflow-hidden antialiased"
+    class="
+      dark:bg-gray-900
+      h-screen
+      flex flex-col
+      font-sans
+      overflow-hidden
+      antialiased
+    "
     :dir="languageDirection"
     :language="language"
   >
@@ -14,6 +21,7 @@
     <Desk
       v-if="activeScreen === 'Desk'"
       class="flex-1"
+      :darkMode="darkMode"
       @change-db-file="showDbSelector"
     />
     <DatabaseSelector
@@ -61,6 +69,7 @@ import { Search } from './utils/search';
 import { Shortcuts } from './utils/shortcuts';
 import { routeTo } from './utils/ui';
 import { useKeys } from './utils/vueUtils';
+import { setDarkMode } from 'src/utils/theme';
 
 enum Screen {
   Desk = 'Desk',
@@ -106,10 +115,12 @@ export default defineComponent({
       activeScreen: null,
       dbPath: '',
       companyName: '',
+      darkMode: false,
     } as {
       activeScreen: null | Screen;
       dbPath: string;
       companyName: string;
+      darkMode: boolean | undefined;
     };
   },
   computed: {
@@ -124,6 +135,9 @@ export default defineComponent({
   },
   async mounted() {
     await this.setInitialScreen();
+    const { darkMode } = await fyo.doc.getDoc('SystemSettings');
+    setDarkMode(!!darkMode);
+    this.darkMode = !!darkMode;
   },
   methods: {
     async setInitialScreen(): Promise<void> {

diff --git a/src/components/Avatar.vue b/src/components/Avatar.vue
@@ -15,6 +15,7 @@
         items-center
         justify-center
         text-white
+        dark:text-gray-900
         w-full
         text-base
         uppercase

diff --git a/src/components/Button.vue b/src/components/Button.vue
@@ -39,10 +39,12 @@ export default defineComponent({
     _class() {
       return {
         'opacity-50 cursor-not-allowed pointer-events-none': this.disabled,
-        'text-white': this.type === 'primary',
-        'bg-black': this.type === 'primary' && this.background,
-        'text-gray-700': this.type !== 'primary',
-        'bg-gray-200': this.type !== 'primary' && this.background,
+        'text-white dark:text-black': this.type === 'primary',
+        'bg-black dark:bg-gray-300 dark:font-semibold':
+          this.type === 'primary' && this.background,
+        'text-gray-700 dark:text-gray-200': this.type !== 'primary',
+        'bg-gray-200 dark:bg-gray-900':
+          this.type !== 'primary' && this.background,
         'h-8': this.background,
         'px-3': this.padding && this.icon,
         'px-6': this.padding && !this.icon,

diff --git a/src/components/Charts/BarChart.vue b/src/components/Charts/BarChart.vue
@@ -118,7 +118,17 @@
       ref="tooltip"
       :offset="15"
       placement="top"
-      class="text-sm shadow-md px-2 py-1 bg-white text-gray-900 border-s-4"
+      class="
+        text-sm
+        shadow-md
+        px-2
+        py-1
+        bg-white
+        dark:bg-gray-900
+        text-gray-900
+        dark:text-gray-200
+        border-s-4
+      "
       :style="{ borderColor: activeColor }"
     >
       <div class="flex flex-col justify-center items-center">

diff --git a/src/components/Charts/DonutChart.vue b/src/components/Charts/DonutChart.vue
@@ -45,7 +45,7 @@
           :key="i"
           clip-path="url(#donut-hole)"
           :d="getArcPath(cx, cy, radius, start_, theta)"
-          :stroke="sectors[i].color"
+          :stroke="getSectorColor(i)"
           :stroke-width="thickness + (active === i ? 4 : 0)"
           :style="{ transformOrigin: `${cx}px ${cy}px` }"
           class="sector"
@@ -57,7 +57,11 @@
         :x="cx"
         :y="cy"
         text-anchor="middle"
-        style="font-size: 6px; font-weight: bold; fill: #415668"
+        :style="{
+          fontSize: '6px',
+          fontWeight: 'bold',
+          fill: darkMode ? '#FFFFFF' : '#415668',
+        }"
       >
         {{
           valueFormatter(
@@ -101,6 +105,7 @@ export default {
     offsetY: { default: 0, type: Number },
     textOffsetX: { default: 0, type: Number },
     textOffsetY: { default: 0, type: Number },
+    darkMode: { type: Boolean, default: false },
   },
   emits: ['change'],
   computed: {
@@ -150,6 +155,13 @@ export default {
 
       return `M ${startX} ${startY} A ${r} ${r} 0 ${largeArcFlag} ${sweepFlag} ${endX} ${endY}`;
     },
+    getSectorColor(index) {
+      if (this.darkMode) {
+        return this.sectors[index].color.darkColor;
+      } else {
+        return this.sectors[index].color.color;
+      }
+    },
   },
 };
 </script>

diff --git a/src/components/Charts/LineChart.vue b/src/components/Charts/LineChart.vue
@@ -117,7 +117,17 @@
       ref="tooltip"
       :offset="15"
       placement="top"
-      class="text-sm shadow-md px-2 py-1 bg-white text-gray-900 border-s-4"
+      class="
+        text-sm
+        shadow-md
+        px-2
+        py-1
+        bg-white
+        dark:bg-gray-900
+        text-gray-900
+        dark:text-gray-200
+        border-s-4
+      "
       :style="{ borderColor: colors[yi] }"
     >
       <div class="flex flex-col justify-center items-center">

diff --git a/src/components/Controls/AttachImage.vue b/src/components/Controls/AttachImage.vue
@@ -1,6 +1,15 @@
 <template>
   <div
-    class="relative bg-white border flex-center overflow-hidden group"
+    class="
+      relative
+      bg-white
+      dark:bg-gray-900
+      border
+      dark:border-gray-800
+      flex-center
+      overflow-hidden
+      group
+    "
     :class="{
       rounded: size === 'form',
       'w-20 h-20 rounded-full': size !== 'small' && size !== 'form',
@@ -19,6 +28,7 @@
           items-center
           justify-center
           text-gray-400
+          dark:text-gray-600
           font-semibold
           w-full
           text-4xl
@@ -29,7 +39,7 @@
       </div>
       <svg
         v-else
-        class="w-6 h-6 text-gray-300"
+        class="w-6 h-6 text-gray-300 dark:text-gray-600"
         viewBox="0 0 24 21"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -45,10 +55,13 @@
       :class="[!isReadOnly ? 'group-hover:flex' : '']"
       style="background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(2px)"
     >
-      <button class="bg-gray-100 p-0.5 rounded mb-1" @click="handleClick">
+      <button
+        class="bg-gray-100 dark:bg-gray-800 p-0.5 rounded mb-1"
+        @click="handleClick"
+      >
         <FeatherIcon
           :name="shouldClear ? 'x' : 'upload'"
-          class="w-4 h-4 text-gray-600"
+          class="w-4 h-4 text-gray-600 dark:text-gray-400"
         />
       </button>
     </div>

diff --git a/src/components/Controls/Attachment.vue b/src/components/Controls/Attachment.vue
@@ -7,7 +7,10 @@
       <label
         for="attachment"
         class="block whitespace-nowrap overflow-auto no-scrollbar"
-        :class="[inputClasses, !value ? 'text-gray-600' : 'cursor-default']"
+        :class="[
+          inputClasses,
+          !value ? 'text-gray-600 dark:text-gray-400' : 'cursor-default',
+        ]"
         >{{ label }}</label
       >
       <input
@@ -24,12 +27,18 @@
       <div class="me-2 flex gap-1">
         <!-- Upload Button -->
         <button v-if="!value" class="p-0.5 rounded" @click="upload">
-          <FeatherIcon name="upload" class="h-4 w-4 text-gray-600" />
+          <FeatherIcon
+            name="upload"
+            class="h-4 w-4 text-gray-600 dark:text-gray-400"
+          />
         </button>
 
         <!-- Download Button -->
         <button v-if="value" class="p-0.5 rounded" @click="download">
-          <FeatherIcon name="download" class="h-4 w-4 text-gray-600" />
+          <FeatherIcon
+            name="download"
+            class="h-4 w-4 text-gray-600 dark:text-gray-400"
+          />
         </button>
 
         <!-- Clear Button -->
@@ -38,7 +47,10 @@
           class="p-0.5 rounded"
           @click="clear"
         >
-          <FeatherIcon name="x" class="h-4 w-4 text-gray-600" />
+          <FeatherIcon
+            name="x"
+            class="h-4 w-4 text-gray-600 dark:text-gray-400"
+          />
         </button>
       </div>
     </div>

diff --git a/src/components/Controls/AutoComplete.vue b/src/components/Controls/AutoComplete.vue
@@ -47,7 +47,9 @@
           <path
             d="M1 2.636L2.636 1l1.637 1.636M1 7.364L2.636 9l1.637-1.636"
             class="stroke-current"
-            :class="showMandatory ? 'text-red-400' : 'text-gray-400'"
+            :class="
+              showMandatory ? 'text-red-400 dark:text-red-600' : 'text-gray-400'
+            "
             fill="none"
             fill-rule="evenodd"
             stroke-linecap="round"
@@ -70,7 +72,7 @@
             <template #target>
               <feather-icon
                 name="chevron-right"
-                class="w-4 h-4 text-gray-600"
+                class="w-4 h-4 text-gray-600 dark:text-gray-400"
               />
             </template>
             <template #content>