feat: windowstitlebar, sidebar and Dashboard changed to darkmode

colors.json

@@ -11,6 +11,9 @@
     "600": "#7C7C7C",
     "700": "#525252",
     "800": "#383838",
+    "850": "#282828",
+    "875": "#212121",
+    "890": "#1C1C1C",
     "900": "#171717"
   },
   "red": {

fyo/core/types.ts

@@ -36,6 +36,7 @@ export type ConfigMap = {
   lastSelectedFilePath: null | string;
   language: string 
   deviceId: string
+  darkMode: boolean
 };
 
 export interface ConfigFile {

src/App.vue

@@ -1,7 +1,7 @@
 <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,7 +14,9 @@
     <Desk
       v-if="activeScreen === 'Desk'"
       class="flex-1"
+      :darkMode="darkMode"
       @change-db-file="showDbSelector"
+      @toggle-darkmode="toggleDMode"
     />
     <DatabaseSelector
       v-if="activeScreen === 'DatabaseSelector'"
@@ -61,6 +63,7 @@ import { Search } from './utils/search';
 import { Shortcuts } from './utils/shortcuts';
 import { routeTo } from './utils/ui';
 import { useKeys } from './utils/vueUtils';
+import { toggleDarkMode } from 'src/utils/theme';
 
 enum Screen {
   Desk = 'Desk',
@@ -106,10 +109,12 @@ export default defineComponent({
       activeScreen: null,
       dbPath: '',
       companyName: '',
+      darkMode: false,
     } as {
       activeScreen: null | Screen;
       dbPath: string;
       companyName: string;
+      darkMode: boolean | undefined;
     };
   },
   computed: {
@@ -124,6 +129,7 @@ export default defineComponent({
   },
   async mounted() {
     await this.setInitialScreen();
+    this.darkMode = fyo.config.get('darkMode') as boolean;
   },
   methods: {
     async setInitialScreen(): Promise<void> {
@@ -247,6 +253,10 @@ export default defineComponent({
       this.searcher = null;
       this.companyName = '';
     },
+    async toggleDMode(): Promise<void> {
+      toggleDarkMode();
+      this.darkMode = fyo.config.get('darkMode');
+    },
   },
 });
 

src/components/Button.vue

@@ -39,10 +39,10 @@ export default defineComponent({
     _class() {
       return {
         'opacity-50 cursor-not-allowed pointer-events-none': this.disabled,
-        'text-white': this.type === 'primary',
+        'text-white dark:text-black': this.type === 'primary',
-        'bg-black': this.type === 'primary' && this.background,
+        'bg-black dark:bg-gray-400': this.type === 'primary' && this.background,
-        'text-gray-700': this.type !== 'primary',
+        'text-gray-700 dark:text-gray-200': this.type !== 'primary',
-        'bg-gray-200': this.type !== 'primary' && this.background,
+        '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,

src/components/Charts/BarChart.vue

@@ -118,7 +118,7 @@
       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">

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: Boolean,
   },
   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>

src/components/Charts/LineChart.vue

@@ -117,7 +117,7 @@
       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">

src/components/Dropdown.vue

@@ -15,14 +15,19 @@
       </div>
     </template>
     <template #content>
-      <div class="bg-white rounded w-full min-w-40 overflow-hidden">
+      <div
+        class="bg-white dark:bg-gray-850 dark:text-white rounded w-full min-w-40 overflow-hidden"
+      >
         <div class="p-1 max-h-64 overflow-auto custom-scroll text-sm">
-          <div v-if="isLoading" class="p-2 text-gray-600 italic">
+          <div
+            v-if="isLoading"
+            class="p-2 text-gray-600 dark:text-gray-400 italic"
+          >
             {{ t`Loading...` }}
           </div>
           <div
             v-else-if="dropdownItems.length === 0"
-            class="p-2 text-gray-600 italic"
+            class="p-2 text-gray-600 dark:text-gray-400 italic"
           >
             {{ getEmptyMessage() }}
           </div>
@@ -34,31 +39,18 @@
             >
               <div
                 v-if="d.isGroup"
-                class="
+                class="px-2 pt-3 pb-1 text-xs uppercase text-gray-700 dark:text-gray-400 font-semibold tracking-wider"
-                  px-2
-                  pt-3
-                  pb-1
-                  text-xs
-                  uppercase
-                  text-gray-700
-                  font-semibold
-                  tracking-wider
-                "
               >
                 {{ d.label }}
               </div>
               <a
                 v-else
-                class="
+                class="block p-2 rounded-md mt-1 first:mt-0 cursor-pointer truncate"
-                  block
+                :class="
-                  p-2
+                  index === highlightedIndex
-                  rounded-md
+                    ? 'bg-gray-100 dark:bg-gray-875'
-                  mt-1
+                    : ''
-                  first:mt-0
-                  cursor-pointer
-                  truncate
                 "
-                :class="index === highlightedIndex ? 'bg-gray-100' : ''"
                 @mouseenter="highlightedIndex = index"
                 @mousedown.prevent
                 @click="selectItem(d)"

src/components/FilterDropdown.vue

@@ -7,7 +7,11 @@
     <template #target="{ togglePopover }">
       <Button :icon="true" @click="togglePopover()">
         <span class="flex items-center">
-          <Icon name="filter" size="12" class="stroke-current text-gray-700" />
+          <Icon
+            name="filter"
+            size="12"
+            class="stroke-current text-gray-700 dark:text-gray-400"
+          />
           <span class="ms-1">
             <template v-if="activeFilterCount > 0">
               {{ filterAppliedMessage }}
@@ -30,18 +34,7 @@
                 class="flex items-center justify-between text-base gap-2"
               >
                 <div
-                  class="
+                  class="cursor-pointer w-4 h-4 flex items-center justify-center text-gray-600 hover:text-gray-800 rounded-md group"
-                    cursor-pointer
-                    w-4
-                    h-4
-                    flex
-                    items-center
-                    justify-center
-                    text-gray-600
-                    hover:text-gray-800
-                    rounded-md
-                    group
-                  "
                 >
                   <span class="hidden group-hover:inline-block">
                     <feather-icon
@@ -106,16 +99,7 @@
           </template>
         </div>
         <div
-          class="
+          class="text-base border-t p-2 flex items-center text-gray-600 cursor-pointer hover:bg-gray-100"
-            text-base
-            border-t
-            p-2
-            flex
-            items-center
-            text-gray-600
-            cursor-pointer
-            hover:bg-gray-100
-          "
           @click="addNewFilter"
         >
           <feather-icon name="plus" class="w-4 h-4" />
@@ -149,7 +133,7 @@ const conditions = [
   { label: t`Is Not Empty`, value: 'is not null' },
 ] as const;
 
-type Condition = typeof conditions[number]['value'];
+type Condition = (typeof conditions)[number]['value'];
 
 type Filter = {
   fieldname: string;

src/components/Icon.vue

@@ -4,6 +4,7 @@
     :is="iconComponent"
     :class="iconClasses"
     :active="active"
+    :darkMode="darkMode"
   />
 </template>
 
@@ -26,6 +27,7 @@ export default {
   props: {
     name: { type: String, required: true },
     active: { type: Boolean, default: false },
+    darkMode: { type: Boolean, default: false },
     size: {
       type: String,
       required: true,

src/components/Icons/base.vue

@@ -1,15 +1,30 @@
-<script>
+<script lang="ts">
 import { uicolors } from 'src/utils/colors';
 
 export default {
   name: 'IconBase',
-  props: ['active'],
+  props: {
+    active: Boolean,
+    darkMode: Boolean,
+  },
   computed: {
-    lightColor() {
+    lightColor(): string {
-      return this.active ? uicolors.gray['600'] : uicolors.gray['400'];
+      const activeGray = this.darkMode
+        ? uicolors.gray['500']
+        : uicolors.gray['600'];
+      const passiveGray = this.darkMode
+        ? uicolors.gray['700']
+        : uicolors.gray['400'];
+      return this.active ? activeGray : passiveGray;
     },
-    darkColor() {
+    darkColor(): string {
-      return this.active ? uicolors.gray['800'] : uicolors.gray['600'];
+      const activeGray = this.darkMode
+        ? uicolors.gray['200']
+        : uicolors.gray['800'];
+      const passiveGray = this.darkMode
+        ? uicolors.gray['500']
+        : uicolors.gray['600'];
+      return this.active ? activeGray : passiveGray;
     },
   },
 };

src/components/PageHeader.vue

@@ -1,8 +1,8 @@
 <template>
   <div
-    class="px-4 flex justify-between items-center h-row-largest flex-shrink-0"
+    class="px-4 flex justify-between items-center h-row-largest flex-shrink-0 dark:bg-gray-875"
     :class="[
-      border ? 'border-b' : '',
+      border ? 'border-b dark:border-gray-800' : '',
       platform !== 'Windows' ? 'window-drag' : '',
     ]"
   >
@@ -22,7 +22,7 @@
       <PageHeaderNavGroup />
       <h1
         v-if="title"
-        class="text-xl font-semibold select-none whitespace-nowrap"
+        class="text-xl font-semibold select-none whitespace-nowrap dark:text-white"
       >
         {{ title }}
       </h1>

src/components/PageHeaderNavGroup.vue

@@ -4,9 +4,11 @@
     <!-- Back Button -->
     <a
       ref="backlink"
-      class="nav-link border-l border-r border-white"
+      class="nav-link border-l border-r border-white dark:border-gray-850 dark:bg-gray-900"
       :class="
-        historyState.back ? 'text-gray-700 cursor-pointer' : 'text-gray-400'
+        historyState.back
+          ? 'text-gray-700 dark:text-gray-300 cursor-pointer'
+          : 'text-gray-400 dark:text-gray-700'
       "
       @click="$router.back()"
     >
@@ -14,9 +16,11 @@
     </a>
     <!-- Forward Button -->
     <a
-      class="nav-link rounded-md rounded-l-none"
+      class="nav-link rounded-md rounded-l-none dark:bg-gray-900"
       :class="
-        historyState.forward ? 'text-gray-700 cursor-pointer' : 'text-gray-400'
+        historyState.forward
+          ? 'text-gray-700 dark:text-gray-400 cursor-pointer'
+          : 'text-gray-400 dark:text-gray-700'
       "
       @click="$router.forward()"
     >

src/components/Popover.vue

@@ -12,15 +12,7 @@
         v-show="isOpen"
         ref="popover"
         :class="popoverClass"
-        class="
+        class="bg-white dark:bg-gray-850 rounded-md border dark:border-gray-875 shadow-lg popover-container relative z-10"
-          bg-white
-          rounded-md
-          border
-          shadow-lg
-          popover-container
-          relative
-          z-10
-        "
         :style="{ 'transition-delay': `${isOpen ? entryDelay : exitDelay}ms` }"
       >
         <slot name="content" :toggle-popover="togglePopover"></slot>

src/components/SearchBar.vue

@@ -1,8 +1,15 @@
 <template>
   <div>
     <!-- Search Bar Button -->
-    <Button class="px-3 py-2 rounded-r-none" :padding="false" @click="open">
+    <Button
-      <feather-icon name="search" class="w-4 h-4 text-gray-700" />
+      class="px-3 py-2 rounded-r-none dark:bg-gray-900"
+      :padding="false"
+      @click="open"
+    >
+      <feather-icon
+        name="search"
+        class="w-4 h-4 text-gray-700 dark:text-gray-300"
+      />
     </Button>
   </div>
 
@@ -22,16 +29,7 @@
           autocomplete="off"
           spellcheck="false"
           :placeholder="t`Type to search...`"
-          class="
+          class="bg-gray-100 text-2xl focus:outline-none w-full placeholder-gray-500 text-gray-900 rounded-md p-3"
-            bg-gray-100
-            text-2xl
-            focus:outline-none
-            w-full
-            placeholder-gray-500
-            text-gray-900
-            rounded-md
-            p-3
-          "
           @keydown.up="up"
           @keydown.down="down"
           @keydown.enter="() => select()"
@@ -129,14 +127,7 @@
             <button
               v-for="sf in schemaFilters"
               :key="sf.value"
-              class="
+              class="border px-1 py-0.5 rounded-lg border-blue-100 whitespace-nowrap"
-                border
-                px-1
-                py-0.5
-                rounded-lg
-                border-blue-100
-                whitespace-nowrap
-              "
               :class="{
                 'bg-blue-100': searcher?.filters.schemaFilters[sf.value],
               }"

src/components/Sidebar.vue

@@ -1,12 +1,12 @@
 <template>
   <div
-    class="py-2 h-full flex justify-between flex-col bg-gray-25 relative"
+    class="py-2 h-full flex justify-between flex-col bg-gray-25 dark:bg-gray-900 relative"
     :class="{
       'window-drag': platform !== 'Windows',
     }"
   >
     <div>
-      <!-- Company name and DB Switcher -->
+      <!-- Company name -->
       <div
         class="px-4 flex flex-row items-center justify-between mb-4"
         :class="
@@ -15,13 +15,7 @@
       >
         <h6
           data-testid="company-name"
-          class="
+          class="font-semibold dark:text-gray-200 whitespace-nowrap overflow-auto no-scrollbar select-none"
-            font-semibold
-            whitespace-nowrap
-            overflow-auto
-            no-scrollbar
-            select-none
-          "
         >
           {{ companyName }}
         </h6>
@@ -30,10 +24,10 @@
       <!-- Sidebar Items -->
       <div v-for="group in groups" :key="group.label">
         <div
-          class="px-4 flex items-center cursor-pointer hover:bg-gray-100 h-10"
+          class="px-4 flex items-center cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-875 h-10"
           :class="
             isGroupActive(group) && !group.items
-              ? 'bg-gray-100 border-s-4 border-gray-800'
+              ? 'bg-gray-100 dark:bg-gray-875 border-s-4 border-gray-800 dark:border-gray-100'
               : ''
           "
           @click="routeToSidebarItem(group)"
@@ -44,11 +38,16 @@
             :size="group.iconSize || '18'"
             :height="group.iconHeight ?? 0"
             :active="!!isGroupActive(group)"
+            :darkMode="darkMode"
             :class="isGroupActive(group) && !group.items ? '-ms-1' : ''"
           />
           <div
             class="ms-2 text-lg text-gray-700"
-            :class="isGroupActive(group) && !group.items && 'text-gray-900'"
+            :class="
+              isGroupActive(group) && !group.items
+                ? 'text-gray-900 dark:text-gray-25'
+                : 'dark:text-gray-300'
+            "
           >
             {{ group.label }}
           </div>
@@ -59,19 +58,11 @@
           <div
             v-for="item in group.items"
             :key="item.label"
-            class="
+            class="text-base h-10 ps-10 cursor-pointer flex items-center hover:bg-gray-100 dark:hover:bg-gray-800"
-              text-base
-              h-10
-              ps-10
-              cursor-pointer
-              flex
-              items-center
-              hover:bg-gray-100
-            "
             :class="
               isItemActive(item)
-                ? 'bg-gray-100 text-gray-900 border-s-4 border-gray-800'
+                ? 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 border-s-4 border-gray-800 dark:border-gray-100'
-                : 'text-gray-700'
+                : 'text-gray-700 dark:text-gray-400'
             "
             @click="routeToSidebarItem(item)"
           >
@@ -83,16 +74,20 @@
       </div>
     </div>
 
-    <!-- Report Issue and App Version -->
+    <!-- Report Issue, DB Switcher and Darkmode Switcher -->
     <div class="window-no-drag flex flex-col gap-2 py-2 px-4">
       <button
-        class="
+        class="flex text-sm text-gray-600 dark:text-gray-500 hover:text-gray-800 dark:hover:text-gray-400 gap-1 items-center"
-          flex
+        @click="$emit('toggle-darkmode')"
-          text-sm text-gray-600
+      >
-          hover:text-gray-800
+        <feather-icon :name="darkMode?'sun':'moon'" class="h-4 w-4 flex-shrink-0" />
-          gap-1
+        <p>
-          items-center
+          {{ t`Dark Mode` }}
-        "
+        </p>
+      </button>
+
+      <button
+        class="flex text-sm text-gray-600 dark:text-gray-500 hover:text-gray-800 dark:hover:text-gray-400 gap-1 items-center"
         @click="openDocumentation"
       >
         <feather-icon name="help-circle" class="h-4 w-4 flex-shrink-0" />
@@ -102,13 +97,7 @@
       </button>
 
       <button
-        class="
+        class="flex text-sm text-gray-600 dark:text-gray-500 hover:text-gray-800 dark:hover:text-gray-400 gap-1 items-center"
-          flex
-          text-sm text-gray-600
-          hover:text-gray-800
-          gap-1
-          items-center
-        "
         @click="viewShortcuts = true"
       >
         <feather-icon name="command" class="h-4 w-4 flex-shrink-0" />
@@ -117,13 +106,7 @@
 
       <button
         data-testid="change-db"
-        class="
+        class="flex text-sm text-gray-600 dark:text-gray-500 hover:text-gray-800 dark:hover:text-gray-400 gap-1 items-center"
-          flex
-          text-sm text-gray-600
-          hover:text-gray-800
-          gap-1
-          items-center
-        "
         @click="$emit('change-db-file')"
       >
         <feather-icon name="database" class="h-4 w-4 flex-shrink-0" />
@@ -131,13 +114,7 @@
       </button>
 
       <button
-        class="
+        class="flex text-sm text-gray-600 dark:text-gray-500 hover:text-gray-800 dark:hover:text-gray-400 gap-1 items-center"
-          flex
-          text-sm text-gray-600
-          hover:text-gray-800
-          gap-1
-          items-center
-        "
         @click="() => reportIssue()"
       >
         <feather-icon name="flag" class="h-4 w-4 flex-shrink-0" />
@@ -158,17 +135,7 @@
 
     <!-- Hide Sidebar Button -->
     <button
-      class="
+      class="absolute bottom-0 end-0 text-gray-600 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-875 rounded p-1 m-4 rtl-rotate-180"
-        absolute
-        bottom-0
-        end-0
-        text-gray-600
-        hover:bg-gray-100
-        rounded
-        p-1
-        m-4
-        rtl-rotate-180
-      "
       @click="() => toggleSidebar()"
     >
       <feather-icon name="chevrons-left" class="w-4 h-4" />
@@ -201,7 +168,10 @@ export default defineComponent({
     Modal,
     ShortcutsHelper,
   },
-  emits: ['change-db-file'],
+  props: {
+    darkMode: Boolean,
+  },
+  emits: ['change-db-file', 'toggle-darkmode'],
   setup() {
     return {
       languageDirection: inject(languageDirectionKey),

src/components/WindowsTitleBar.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="window-drag flex items-center border-b text-gray-900 border-gray-100"
+    class="window-drag flex items-center border-b dark:bg-gray-900 text-gray-900 dark:text-gray-100 border-gray-100 dark:border-gray-800"
     style="height: 28px"
   >
     <Fb class="ms-2" />

src/pages/Dashboard/Cashflow.vue

@@ -2,20 +2,26 @@
   <div>
     <!-- Title and Period Selector -->
     <div class="flex items-center justify-between">
-      <div class="font-semibold text-base">{{ t`Cashflow` }}</div>
+      <div class="font-semibold text-base dark:text-white">
+        {{ t`Cashflow` }}
+      </div>
 
       <!-- Chart Legend -->
       <div v-if="hasData" class="flex text-base gap-8">
         <div class="flex items-center gap-2">
-          <span class="w-3 h-3 rounded-sm inline-block bg-blue-500" />
+          <span
-          <span class="text-gray-900">{{ t`Inflow` }}</span>
+            class="w-3 h-3 rounded-sm inline-block bg-blue-500 dark:bg-blue-600"
+          />
+          <span class="text-gray-900 dark:text-gray-25">{{ t`Inflow` }}</span>
         </div>
         <div class="flex items-center gap-2">
-          <span class="w-3 h-3 rounded-sm inline-block bg-pink-500" />
+          <span
-          <span class="text-gray-900">{{ t`Outflow` }}</span>
+            class="w-3 h-3 rounded-sm inline-block bg-pink-500 dark:bg-pink-600"
+          />
+          <span class="text-gray-900 dark:text-gray-25">{{ t`Outflow` }}</span>
         </div>
       </div>
-      <div v-else class="w-16 h-5 bg-gray-200 rounded" />
+      <div v-else class="w-16 h-5 bg-gray-200 dark:bg-gray-700 rounded" />
 
       <PeriodSelector
         v-if="hasData"
@@ -23,7 +29,7 @@
         :options="periodOptions"
         @change="(value) => (period = value)"
       />
-      <div v-else class="w-20 h-5 bg-gray-200 rounded" />
+      <div v-else class="w-20 h-5 bg-gray-200 dark:bg-gray-700 rounded" />
     </div>
 
     <!-- Line Chart -->
@@ -32,6 +38,8 @@
       class="mt-4"
       :aspect-ratio="4.15"
       :colors="chartData.colors"
+      :gridColor="chartData.gridColor"
+      :fontColor="chartData.fontColor"
       :points="chartData.points"
       :x-labels="chartData.xLabels"
       :format="chartData.format"
@@ -68,6 +76,9 @@ export default defineComponent({
     PeriodSelector,
     LineChart,
   },
+  props: {
+    darkMode: Boolean,
+  },
   extends: DashboardChartBase,
   data: () => ({
     data: [] as { inflow: number; outflow: number; yearmonth: string }[],
@@ -78,10 +89,16 @@ export default defineComponent({
   computed: {
     chartData() {
       let data = this.data;
-      let colors = [uicolors.blue['500'], uicolors.pink['500']];
+      let colors = [
+        uicolors.blue[this.darkMode ? '600' : '500'],
+        uicolors.pink[this.darkMode ? '600' : '500'],
+      ];
       if (!this.hasData) {
         data = dummyData;
-        colors = [uicolors.gray['200'], uicolors.gray['100']];
+        colors = [
+          this.darkMode ? uicolors.gray['700'] : uicolors.gray['200'],
+          this.darkMode ? uicolors.gray['800'] : uicolors.gray['100'],
+        ];
       }
 
       const xLabels = data.map((cf) => cf.yearmonth);
@@ -91,7 +108,16 @@ export default defineComponent({
 
       const format = (value: number) => fyo.format(value ?? 0, 'Currency');
       const yMax = getYMax(points);
-      return { points, xLabels, colors, format, yMax, formatX: formatXLabels };
+      return {
+        points,
+        xLabels,
+        colors,
+        format,
+        yMax,
+        formatX: formatXLabels,
+        gridColor: this.darkMode ? 'rgba(200, 200, 200, 0.2)' : undefined,
+        fontColor: this.darkMode ? uicolors.gray['400'] : undefined,
+      };
     },
   },
   async activated() {

src/pages/Dashboard/Dashboard.vue

@@ -2,14 +2,7 @@
   <div class="h-screen" style="width: var(--w-desk)">
     <PageHeader :title="t`Dashboard`">
       <div
-        class="
+        class="border dark:border-gray-900 rounded bg-gray-50 dark:bg-gray-890 focus-within:bg-gray-100 dark:focus-within:bg-gray-900 flex items-center"
-          border
-          rounded
-          bg-gray-50
-          focus-within:bg-gray-100
-          flex
-          items-center
-        "
       >
         <PeriodSelector
           class="px-3"
@@ -21,43 +14,48 @@
     </PageHeader>
 
     <div
-      class="no-scrollbar overflow-auto"
+      class="no-scrollbar overflow-auto dark:bg-gray-875"
       style="height: calc(100vh - var(--h-row-largest) - 1px)"
     >
       <div style="min-width: var(--w-desk-fixed)" class="overflow-auto">
         <Cashflow
           class="p-4"
           :common-period="period"
+          :darkMode="darkMode"
           @period-change="handlePeriodChange"
         />
-        <hr />
+        <hr class="dark:border-gray-800" />
         <div class="flex w-full">
           <UnpaidInvoices
             :schema-name="'SalesInvoice'"
             :common-period="period"
-            class="border-e"
+            :darkMode="darkMode"
+            class="border-e dark:border-gray-800"
             @period-change="handlePeriodChange"
           />
           <UnpaidInvoices
             :schema-name="'PurchaseInvoice'"
             :common-period="period"
+            :darkMode="darkMode"
             @period-change="handlePeriodChange"
           />
         </div>
-        <hr />
+        <hr class="dark:border-gray-800" />
         <div class="flex">
           <ProfitAndLoss
-            class="w-full p-4 border-e"
+            class="w-full p-4 border-e dark:border-gray-800"
             :common-period="period"
+            :darkMode="darkMode"
             @period-change="handlePeriodChange"
           />
           <Expenses
             class="w-full p-4"
             :common-period="period"
+            :darkMode="darkMode"
             @period-change="handlePeriodChange"
           />
         </div>
-        <hr />
+        <hr class="dark:border-gray-800" />
       </div>
     </div>
   </div>
@@ -82,6 +80,9 @@ export default {
     PeriodSelector,
     UnpaidInvoices,
   },
+  props: {
+    darkMode: Boolean,
+  },
   data() {
     return { period: 'This Year' };
   },

src/pages/Dashboard/Expenses.vue

@@ -9,7 +9,7 @@
 
     <div v-show="hasData" class="flex relative">
       <!-- Chart Legend -->
-      <div class="w-1/2 flex flex-col gap-4 justify-center">
+      <div class="w-1/2 flex flex-col gap-4 justify-center dark:text-gray-25">
         <!-- Ledgend Item -->
         <div
           v-for="(d, i) in expenses"
@@ -36,6 +36,7 @@
         :text-offset-x="6.5"
         :value-formatter="(value: number) => fyo.format(value, 'Currency')"
         :total-label="t`Total Spending`"
+        :darkMode="darkMode"
         @change="(value: number) => (active = value)"
       />
     </div>
@@ -45,7 +46,7 @@
       v-if="expenses.length === 0"
       class="flex-1 w-full h-full flex-center my-20"
     >
-      <span class="text-base text-gray-600">
+      <span class="text-base text-gray-600 dark:text-gray-500">
         {{ t`No expenses in this period` }}
       </span>
     </div>
@@ -64,8 +65,8 @@ import PeriodSelector from './PeriodSelector.vue';
 import SectionHeader from './SectionHeader.vue';
 
 // Linting broken in this file cause of `extends: ...`
-/* 
+/*
-  eslint-disable @typescript-eslint/no-unsafe-argument, 
+  eslint-disable @typescript-eslint/no-unsafe-argument,
   @typescript-eslint/no-unsafe-return,
   @typescript-eslint/restrict-plus-operands
 */
@@ -76,14 +77,17 @@ export default defineComponent({
     PeriodSelector,
     SectionHeader,
   },
+  props: {
+    darkMode: Boolean,
+  },
   extends: DashboardChartBase,
   data: () => ({
     active: null as null | number,
     expenses: [] as {
       account: string;
       total: number;
-      color: string;
+      color: { color: string; darkColor: string };
-      class: string;
+      class: { class: string; darkClass: string };
     }[],
   }),
   computed: {
@@ -93,7 +97,11 @@ export default defineComponent({
     hasData(): boolean {
       return this.expenses.length > 0;
     },
-    sectors(): { color: string; label: string; value: number }[] {
+    sectors(): {
+      color: { color: string; darkColor: string };
+      label: string;
+      value: number;
+    }[] {
       return this.expenses.map(({ account, color, total }) => ({
         color,
         label: truncate(account, { length: 21 }),
@@ -111,7 +119,6 @@ export default defineComponent({
         fromDate.toISO(),
         toDate.toISO()
       );
-
       const shades = [
         { class: 'bg-pink-500', hex: uicolors.pink['500'] },
         { class: 'bg-pink-400', hex: uicolors.pink['400'] },
@@ -120,13 +127,25 @@ export default defineComponent({
         { class: 'bg-pink-100', hex: uicolors.pink['100'] },
       ];
 
+      const darkshades = [
+        { class: 'bg-pink-600', hex: uicolors.pink['600'] },
+        { class: 'bg-pink-500', hex: uicolors.pink['500'] },
+        { class: 'bg-pink-400', hex: uicolors.pink['400'] },
+        { class: 'bg-pink-300', hex: uicolors.pink['300'] },
+        {
+          class: 'bg-pink-200 dark:bg-opacity-80',
+          hex: uicolors.pink['200'] + 'CC',
+        },
+      ];
+
       this.expenses = topExpenses
         .filter((e) => e.total > 0)
         .map((d, i) => {
           return {
-            ...d,
+            account: d.account,
-            color: shades[i].hex,
+            total: d.total,
-            class: shades[i].class,
+            color: { color: shades[i].hex, darkColor: darkshades[i].hex },
+            class: { class: shades[i].class, darkClass: darkshades[i].class },
           };
         });
     },

src/pages/Dashboard/PeriodSelector.vue

@@ -9,19 +9,12 @@
       }"
     >
       <div
-        class="
+        class="text-sm flex focus:outline-none hover:text-gray-800 dark:hover:text-gray-100 focus:text-gray-800 dark:focus:text-gray-100 items-center py-1 rounded-md leading-relaxed cursor-pointer"
-          text-sm
+        :class="
-          flex
+          !value
-          focus:outline-none
+            ? 'text-gray-600 dark:text-gray-500'
-          hover:text-gray-800
+            : 'text-gray-900 dark:text-gray-300'
-          focus:text-gray-800
-          items-center
-          py-1
-          rounded-md
-          leading-relaxed
-          cursor-pointer
         "
-        :class="!value ? 'text-gray-600' : 'text-gray-900'"
         tabindex="0"
         @click="toggleDropdown()"
         @keydown.down="highlightItemDown"

src/pages/Dashboard/ProfitAndLoss.vue

@@ -15,6 +15,8 @@
       class="mt-4"
       :aspect-ratio="2.05"
       :colors="chartData.colors"
+      :gridColor="chartData.gridColor"
+      :fontColor="chartData.fontColor"
       :points="chartData.points"
       :x-labels="chartData.xLabels"
       :format="chartData.format"
@@ -23,7 +25,7 @@
       :y-min="chartData.yMin"
     />
     <div v-else class="flex-1 w-full h-full flex-center my-20">
-      <span class="text-base text-gray-600">
+      <span class="text-base text-gray-600 dark:text-gray-500">
         {{ t`No transactions yet` }}
       </span>
     </div>
@@ -42,8 +44,8 @@ import SectionHeader from './SectionHeader.vue';
 import { defineComponent } from 'vue';
 
 // Linting broken in this file cause of `extends: ...`
-/* 
+/*
-  eslint-disable @typescript-eslint/no-unsafe-argument, 
+  eslint-disable @typescript-eslint/no-unsafe-argument,
   @typescript-eslint/no-unsafe-return
 */
 export default defineComponent({
@@ -53,6 +55,9 @@ export default defineComponent({
     SectionHeader,
     BarChart,
   },
+  props: {
+    darkMode: Boolean,
+  },
   extends: DashboardChartBase,
   data: () => ({
     data: [] as { yearmonth: string; balance: number }[],
@@ -63,7 +68,10 @@ export default defineComponent({
     chartData() {
       const points = [this.data.map((d) => d.balance)];
       const colors = [
-        { positive: uicolors.blue['500'], negative: uicolors.pink['500'] },
+        {
+          positive: uicolors.blue[this.darkMode ? '600' : '500'],
+          negative: uicolors.pink[this.darkMode ? '600' : '500'],
+        },
       ];
       const format = (value: number) => fyo.format(value ?? 0, 'Currency');
       const yMax = getYMax(points);
@@ -76,6 +84,9 @@ export default defineComponent({
         yMax,
         yMin,
         formatX: formatXLabels,
+        gridColor: this.darkMode ? 'rgba(200, 200, 200, 0.2)' : undefined,
+        fontColor: this.darkMode ? uicolors.gray['400'] : undefined,
+        zeroLineColor: this.darkMode ? uicolors.gray['400'] : undefined,
       };
     },
   },

src/pages/Dashboard/SectionHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-baseline justify-between">
+  <div class="flex items-baseline justify-between dark:text-white">
     <span class="font-semibold text-base"><slot name="title"></slot></span>
     <slot name="action"></slot>
   </div>

src/pages/Dashboard/UnpaidInvoices.vue

@@ -14,34 +14,38 @@
       <div class="flex justify-between">
         <!-- Paid -->
         <div
-          class="text-sm font-medium"
+          class="text-sm font-medium dark:text-gray-25"
           :class="{
-            'bg-gray-200 text-gray-200 rounded': !count,
+            'bg-gray-200 dark:bg-gray-700 text-gray-200 dark:text-gray-700 rounded':
+              !count,
             'cursor-pointer': paidCount > 0,
           }"
           :title="paidCount > 0 ? t`View Paid Invoices` : ''"
           @click="() => routeToInvoices('paid')"
         >
           {{ fyo.format(paid, 'Currency') }}
-          <span :class="{ 'text-gray-900 font-normal': count }">{{
+          <span
-            t`Paid`
+            :class="{ 'text-gray-900 dark:text-gray-200 font-normal': count }"
-          }}</span>
+            >{{ t`Paid` }}</span
+          >
         </div>
 
         <!-- Unpaid -->
         <div
-          class="text-sm font-medium"
+          class="text-sm font-medium dark:text-gray-25"
           :class="{
-            'bg-gray-200 text-gray-200 rounded': !count,
+            'bg-gray-200 dark:bg-gray-700 text-gray-200 dark:text-gray-700 rounded':
+              !count,
             'cursor-pointer': unpaidCount > 0,
           }"
           :title="unpaidCount > 0 ? t`View Unpaid Invoices` : ''"
           @click="() => routeToInvoices('unpaid')"
         >
           {{ fyo.format(unpaid, 'Currency') }}
-          <span :class="{ 'text-gray-900 font-normal': count }">{{
+          <span
-            t`Unpaid`
+            :class="{ 'text-gray-900 dark:text-gray-200 font-normal': count }"
-          }}</span>
+            >{{ t`Unpaid` }}</span
+          >
         </div>
       </div>
 
@@ -64,7 +68,7 @@
       :offset="15"
       :show="show"
       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-white border-s-4"
       :style="{ borderColor: colors }"
     >
       <div class="flex justify-between gap-4">
@@ -110,6 +114,7 @@ export default defineComponent({
   extends: BaseDashboardChart,
   props: {
     schemaName: { type: String as PropType<string>, required: true },
+    darkMode: Boolean,
   },
   data() {
     return {
@@ -144,25 +149,24 @@ export default defineComponent({
       if (this.schemaName === ModelNameEnum.SalesInvoice) {
         return 'blue';
       }
-
       return 'pink';
     },
     colors(): string {
-      return uicolors[this.color]['500'];
+      return uicolors[this.color][this.darkMode ? '600' : '500'];
     },
     paidColor(): string {
       if (!this.hasData) {
-        return 'bg-gray-400';
+        return this.darkMode ? 'bg-gray-700' : 'bg-gray-400';
       }
 
-      return `bg-${this.color}-500`;
+      return `bg-${this.color}-${this.darkMode ? '600' : '500'}`;
     },
     unpaidColor(): string {
       if (!this.hasData) {
-        return 'bg-gray-200';
+        return `bg-gray-${this.darkMode ? '800' : '200'}`;
       }
 
-      return `bg-${this.color}-200`;
+      return `bg-${this.color}-${this.darkMode ? '700 bg-opacity-20' : '200'}`;
     },
   },
   async activated() {

src/pages/Desk.vue

@@ -8,15 +8,22 @@ import { toggleSidebar } from 'src/utils/ui';
       <!-- eslint-disable vue/require-explicit-emits -->
       <Sidebar
         v-show="showSidebar"
-        class="flex-shrink-0 border-e whitespace-nowrap w-sidebar"
+        class="flex-shrink-0 border-e dark:border-gray-800 whitespace-nowrap w-sidebar"
+        :darkMode="darkMode"
         @change-db-file="$emit('change-db-file')"
+        @toggle-darkmode="$emit('toggle-darkmode')"
       />
     </Transition>
 
-    <div class="flex flex-1 overflow-y-hidden bg-white">
+    <div class="flex flex-1 overflow-y-hidden bg-white dark:bg-gray-875">
       <router-view v-slot="{ Component }">
         <keep-alive>
-          <component :is="Component" :key="$route.path" class="flex-1" />
+          <component
+            :is="Component"
+            :key="$route.path"
+            :darkMode="darkMode"
+            class="flex-1"
+          />
         </keep-alive>
       </router-view>
 
@@ -26,6 +33,7 @@ import { toggleSidebar } from 'src/utils/ui';
             <component
               :is="Component"
               :key="route.query.schemaName + route.query.name"
+              :darkMode="darkMode"
             />
           </div>
         </Transition>
@@ -35,19 +43,7 @@ import { toggleSidebar } from 'src/utils/ui';
     <!-- Show Sidebar Button -->
     <button
       v-show="!showSidebar"
-      class="
+      class="absolute bottom-0 start-0 text-gray-600 bg-gray-100 rounded rtl-rotate-180 p-1 m-4 opacity-0 hover:opacity-100 hover:shadow-md"
-        absolute
-        bottom-0
-        start-0
-        text-gray-600
-        bg-gray-100
-        rounded
-        rtl-rotate-180
-        p-1
-        m-4
-        opacity-0
-        hover:opacity-100 hover:shadow-md
-      "
       @click="() => toggleSidebar()"
     >
       <feather-icon name="chevrons-right" class="w-4 h-4" />
@@ -62,7 +58,10 @@ export default defineComponent({
   components: {
     Sidebar,
   },
-  emits: ['change-db-file'],
+  props: {
+    darkMode: Boolean,
+  },
+  emits: ['change-db-file', 'toggle-darkmode'],
 });
 </script>
 

src/renderer.ts

@@ -11,6 +11,7 @@ import registerIpcRendererListeners from './renderer/registerIpcRendererListener
 import router from './router';
 import { stringifyCircular } from './utils';
 import { setLanguageMap } from './utils/language';
+import { setDarkMode } from './utils/theme';
 
 // eslint-disable-next-line @typescript-eslint/no-floating-promises
 (async () => {
@@ -20,6 +21,9 @@ import { setLanguageMap } from './utils/language';
   }
   fyo.store.language = language || 'English';
 
+  const darkMode = fyo.config.get('darkMode') as boolean;
+  setDarkMode(darkMode);
+
   registerIpcRendererListeners();
   const { isDevelopment, platform, version } = await ipc.getEnv();
 

src/utils/theme.ts

@@ -0,0 +1,20 @@
+import { fyo } from 'src/initFyo';
+
+export async function toggleDarkMode(): Promise<void> {
+  const darkMode = fyo.config.get('darkMode');
+  if (darkMode) {
+    document.documentElement.classList.remove('dark');
+    fyo.config.set('darkMode', false);
+    return;
+  }
+  document.documentElement.classList.add('dark');
+  fyo.config.set('darkMode', true);
+}
+
+export function setDarkMode(darkMode: boolean): void {
+  if (darkMode) {
+    document.documentElement.classList.add('dark');
+    return;
+  }
+  document.documentElement.classList.remove('dark');
+}

tailwind.config.js

@@ -4,6 +4,7 @@ const colors = JSON.parse(
 );
 
 module.exports = {
+  darkMode: 'class',
   purge: false,
   theme: {
     fontFamily: {
@@ -66,7 +67,14 @@ module.exports = {
   },
   variants: {
     margin: ['responsive', 'first', 'last', 'hover', 'focus'],
-    backgroundColor: ['responsive', 'first', 'hover', 'focus', 'focus-within'],
+    backgroundColor: [
+      'responsive',
+      'first',
+      'hover',
+      'focus',
+      'focus-within',
+      'dark',
+    ],
     display: ['group-hover'],
   },
   plugins: [require('tailwindcss-rtl')],