feat: Every component except printing changed to darkmode

src/components/Charts/DonutChart.vue

@@ -105,7 +105,7 @@ export default {
     offsetY: { default: 0, type: Number },
     textOffsetX: { default: 0, type: Number },
     textOffsetY: { default: 0, type: Number },
-    darkMode: Boolean,
+    darkMode: { type: Boolean, default: false },
   },
   emits: ['change'],
   computed: {

src/components/Controls/Select.vue

@@ -8,7 +8,14 @@
       :class="[inputClasses, containerClasses]"
     >
       <select
-        class="appearance-none bg-transparent focus:outline-none w-11/12 cursor-pointer"
+        class="
+          appearance-none
+          bg-transparent
+          focus:outline-none
+          w-11/12
+          cursor-pointer
+          custom-scroll custom-scroll-thumb2
+        "
         :class="{
           'pointer-events-none': isReadOnly,
           'text-gray-500': !value,
@@ -22,7 +29,7 @@
           value=""
           disabled
           selected
-          class="text-black dark:text-gray-25 dark:bg-gray-800"
+          class="text-black dark:text-gray-200 dark:bg-gray-850"
         >
           {{ inputPlaceholder }}
         </option>
@@ -30,7 +37,7 @@
           v-for="option in options"
           :key="option.value"
           :value="option.value"
-          class="text-black dark:text-gray-25 dark:bg-gray-800"
+          class="text-black dark:text-gray-200 dark:bg-gray-850"
         >
           {{ option.label }}
         </option>

src/components/Icons/24/green-check.vue

@@ -1,7 +1,6 @@
 <template>
   <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg">
     <g fill="none" fill-rule="evenodd">
-      <path fill="#FFF" d="M-589-585H611v907H-589z" />
       <path
         d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12C23.98 5.38 18.62.02 12 0z"
         fill="#92D336"

src/components/Icons/base.vue

@@ -5,7 +5,7 @@ export default {
   name: 'IconBase',
   props: {
     active: Boolean,
-    darkMode: Boolean,
+    darkMode: { type: Boolean, default: false },
   },
   computed: {
     lightColor(): string {
@@ -26,6 +26,9 @@ export default {
         : uicolors.gray['600'];
       return this.active ? activeGray : passiveGray;
     },
+    bgColor(): string {
+      return this.darkMode ? uicolors.gray['900'] : uicolors.gray['100'];
+    },
   },
 };
 </script>

src/components/Loading.vue

@@ -8,7 +8,9 @@
     <div
       class="
         border
+        dark:border-gray-800
         text-gray-900
+        dark:text-gray-100
         shadow-lg
         px-3
         py-3
@@ -16,11 +18,15 @@
         w-96
         z-10
         bg-white
+        dark:bg-gray-900
         rounded-lg
       "
     >
       <!-- Message -->
-      <p v-if="message?.length" class="text-base text-gray-600 pb-2">
+      <p
+        v-if="message?.length"
+        class="text-base text-gray-600 dark:text-gray-400 pb-2"
+      >
         {{ message }}
       </p>
 
@@ -29,12 +35,16 @@
         <!-- Loading Bar BG -->
         <div
           class="w-full h-3 me-2 rounded"
-          :class="percent >= 0 ? 'bg-gray-200' : 'bg-gray-300'"
+          :class="
+            percent >= 0
+              ? 'bg-gray-200 dark:bg-gray-800'
+              : 'bg-gray-300 dark:bg-gray-700'
+          "
         >
           <!-- Loading Bar -->
           <div
             v-if="percent >= 0"
-            class="h-3 rounded bg-gray-800"
+            class="h-3 rounded bg-gray-800 dark:bg-gray-200"
             :style="{ width: `${percent * 100}%` }"
           ></div>
         </div>
@@ -48,8 +58,10 @@
             h-4
             ms-auto
             text-gray-600
+            dark:text-gray-400
             cursor-pointer
             hover:text-gray-800
+            dark:hover:text-gray-200
           "
           @click="closeToast"
         />

src/components/Sidebar.vue

@@ -1,6 +1,15 @@
 <template>
   <div
-    class="py-2 h-full flex justify-between flex-col bg-gray-25 dark:bg-gray-900 relative"
+    class="
+      py-2
+      h-full
+      flex
+      justify-between
+      flex-col
+      bg-gray-25
+      dark:bg-gray-900
+      relative
+    "
     :class="{
       'window-drag': platform !== 'Windows',
     }"
@@ -15,7 +24,14 @@
       >
         <h6
           data-testid="company-name"
-          class="font-semibold dark:text-gray-200 whitespace-nowrap overflow-auto no-scrollbar select-none"
+          class="
+            font-semibold
+            dark:text-gray-200
+            whitespace-nowrap
+            overflow-auto
+            no-scrollbar
+            select-none
+          "
         >
           {{ companyName }}
         </h6>
@@ -24,7 +40,15 @@
       <!-- Sidebar Items -->
       <div v-for="group in groups" :key="group.label">
         <div
-          class="px-4 flex items-center cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-875 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 dark:bg-gray-875 border-s-4 border-gray-800 dark:border-gray-100'
@@ -58,7 +82,16 @@
           <div
             v-for="item in group.items"
             :key="item.label"
-            class="text-base h-10 ps-10 cursor-pointer flex items-center hover:bg-gray-100 dark:hover:bg-gray-875"
+            class="
+              text-base
+              h-10
+              ps-10
+              cursor-pointer
+              flex
+              items-center
+              hover:bg-gray-100
+              dark:hover:bg-gray-875
+            "
             :class="
               isItemActive(item)
                 ? 'bg-gray-100 dark:bg-gray-875 text-gray-900 dark:text-gray-100 border-s-4 border-gray-800 dark:border-gray-100'
@@ -77,7 +110,15 @@
     <!-- Report Issue, DB Switcher and Darkmode Switcher -->
     <div class="window-no-drag flex flex-col gap-2 py-2 px-4">
       <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"
+        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="$emit('toggle-darkmode')"
       >
         <feather-icon
@@ -90,7 +131,15 @@
       </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"
+        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" />
@@ -100,7 +149,15 @@
       </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"
+        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="viewShortcuts = true"
       >
         <feather-icon name="command" class="h-4 w-4 flex-shrink-0" />
@@ -109,7 +166,15 @@
 
       <button
         data-testid="change-db"
-        class="flex text-sm text-gray-600 dark:text-gray-500 hover:text-gray-800 dark:hover:text-gray-400 gap-1 items-center"
+        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="$emit('change-db-file')"
       >
         <feather-icon name="database" class="h-4 w-4 flex-shrink-0" />
@@ -117,7 +182,15 @@
       </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"
+        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="() => reportIssue()"
       >
         <feather-icon name="flag" class="h-4 w-4 flex-shrink-0" />
@@ -138,7 +211,19 @@
 
     <!-- Hide Sidebar Button -->
     <button
-      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"
+      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
+      "
       @click="() => toggleSidebar()"
     >
       <feather-icon name="chevrons-left" class="w-4 h-4" />
@@ -172,7 +257,7 @@ export default defineComponent({
     ShortcutsHelper,
   },
   props: {
-    darkMode: Boolean,
+    darkMode: { type: Boolean, default: false },
   },
   emits: ['change-db-file', 'toggle-darkmode'],
   setup() {

src/pages/ChartOfAccounts.vue

@@ -10,7 +10,12 @@
     <!-- Chart of Accounts -->
     <div
       v-if="root"
-      class="flex-1 flex flex-col overflow-y-auto mb-4 custom-scroll"
+      class="
+        flex-1 flex flex-col
+        overflow-y-auto
+        mb-4
+        custom-scroll custom-scroll-thumb1
+      "
     >
       <!-- Chart of Accounts Indented List -->
       <template v-for="account in allAccounts" :key="account.name">
@@ -20,16 +25,18 @@
             py-2
             cursor-pointer
             hover:bg-gray-50
+            dark:hover:bg-gray-890 dark:text-gray-25
             group
             flex
             items-center
             border-b
+            dark:border-gray-800
             flex-shrink-0
             pe-4
           "
           :class="[
             account.level !== 0 ? 'text-base' : 'text-lg',
-            isQuickEditOpen(account) ? 'bg-gray-200' : '',
+            isQuickEditOpen(account) ? 'bg-gray-200 dark:bg-gray-900' : '',
           ]"
           :style="getItemStyle(account.level)"
           @click="onClick(account)"
@@ -49,7 +56,9 @@
                 v-if="account.isGroup"
                 class="
                   text-xs text-gray-800
+                  dark:text-gray-400
                   hover:text-gray-900
+                  dark:hover:text-gray-100
                   focus:outline-none
                 "
                 @click.stop="addAccount(account, 'addingAccount')"
@@ -61,7 +70,9 @@
                 class="
                   ms-3
                   text-xs text-gray-800
+                  dark:text-gray-400
                   hover:text-gray-900
+                  dark:hover:text-gray-100
                   focus:outline-none
                 "
                 @click.stop="addAccount(account, 'addingGroupAccount')"
@@ -72,7 +83,9 @@
                 class="
                   ms-3
                   text-xs text-gray-800
+                  dark:text-gray-400
                   hover:text-gray-900
+                  dark:hover:text-gray-100
                   focus:outline-none
                 "
                 @click.stop="deleteAccount(account)"
@@ -83,7 +96,10 @@
           </div>
 
           <!-- Account Balance String -->
-          <p v-if="!account.isGroup" class="ms-auto text-base text-gray-800">
+          <p
+            v-if="!account.isGroup"
+            class="ms-auto text-base text-gray-800 dark:text-gray-400"
+          >
             {{ getBalanceString(account) }}
           </p>
         </div>
@@ -95,8 +111,10 @@
           class="
             px-4
             border-b
+            dark:border-gray-800
             cursor-pointer
             hover:bg-gray-50
+            dark:hover:bg-gray-890
             group
             flex
             items-center
@@ -109,8 +127,12 @@
             <input
               :ref="account.name"
               v-model="newAccountName"
-              class="focus:outline-none bg-transparent"
+              class="
-              :class="{ 'text-gray-600': insertingAccount }"
+                focus:outline-none
+                bg-transparent
+                dark:placeholder-gray-600 dark:text-gray-400
+              "
+              :class="{ 'text-gray-600 dark:text-gray-400': insertingAccount }"
               :placeholder="t`New Account`"
               type="text"
               :disabled="insertingAccount"
@@ -124,7 +146,9 @@
               class="
                 ms-4
                 text-xs text-gray-800
+                dark:text-gray-400
                 hover:text-gray-900
+                dark:hover:text-gray-100
                 focus:outline-none
               "
               @click="
@@ -138,7 +162,9 @@
               class="
                 ms-4
                 text-xs text-gray-800
+                dark:text-gray-400
                 hover:text-gray-900
+                dark:hover:text-gray-100
                 focus:outline-none
               "
               @click="cancelAddingAccount(account)"
@@ -194,6 +220,9 @@ export default defineComponent({
     Button,
     PageHeader,
   },
+  props: {
+    darkMode: { type: Boolean, default: false },
+  },
   setup() {
     return {
       languageDirection: inject(languageDirectionKey),
@@ -527,36 +556,38 @@ export default defineComponent({
       return !!(edit && schemaName === 'Account' && name === account.name);
     },
     getIconComponent(isGroup: boolean, name?: string): Component {
+      let lightColor = this.darkMode ? uicolors.gray[600] : uicolors.gray[400];
+      let darkColor = this.darkMode ? uicolors.gray[400] : uicolors.gray[700];
       let icons = {
         'Application of Funds (Assets)': `<svg class="w-4 h-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
             <g fill="none" fill-rule="evenodd">
-              <path d="M15.333 5.333H.667A.667.667 0 000 6v9.333c0 .368.299.667.667.667h14.666a.667.667 0 00.667-.667V6a.667.667 0 00-.667-.667zM8 12.667a2 2 0 110-4 2 2 0 010 4z" fill="${uicolors.gray[700]}" fill-rule="nonzero"/>
+              <path d="M15.333 5.333H.667A.667.667 0 000 6v9.333c0 .368.299.667.667.667h14.666a.667.667 0 00.667-.667V6a.667.667 0 00-.667-.667zM8 12.667a2 2 0 110-4 2 2 0 010 4z" fill="${darkColor}" fill-rule="nonzero"/>
-              <path d="M14 2.667V4H2V2.667h12zM11.333 0v1.333H4.667V0h6.666z" fill="${uicolors.gray[400]}"/>
+              <path d="M14 2.667V4H2V2.667h12zM11.333 0v1.333H4.667V0h6.666z" fill="${lightColor}"/>
             </g>
           </svg>`,
         Expenses: `<svg class="w-4 h-4" viewBox="0 0 14 16" xmlns="http://www.w3.org/2000/svg">
-            <path d="M13.668 0v15.333a.666.666 0 01-.666.667h-12a.666.666 0 01-.667-.667V0l2.667 2 2-2 2 2 2-2 2 2 2.666-2zM9.964 4.273H4.386l-.311 1.133h1.62c.933 0 1.474.362 1.67.963H4.373l-.298 1.053h3.324c-.175.673-.767 1.044-1.705 1.044H4.182l.008.83L7.241 13h1.556v-.072L6.01 9.514c1.751-.106 2.574-.942 2.748-2.092h.904l.298-1.053H8.75a2.375 2.375 0 00-.43-1.044l1.342.009.302-1.061z" fill="${uicolors.gray[700]}" fill-rule="evenodd"/>
+            <path d="M13.668 0v15.333a.666.666 0 01-.666.667h-12a.666.666 0 01-.667-.667V0l2.667 2 2-2 2 2 2-2 2 2 2.666-2zM9.964 4.273H4.386l-.311 1.133h1.62c.933 0 1.474.362 1.67.963H4.373l-.298 1.053h3.324c-.175.673-.767 1.044-1.705 1.044H4.182l.008.83L7.241 13h1.556v-.072L6.01 9.514c1.751-.106 2.574-.942 2.748-2.092h.904l.298-1.053H8.75a2.375 2.375 0 00-.43-1.044l1.342.009.302-1.061z" fill="${darkColor}" fill-rule="evenodd"/>
           </svg>`,
         Income: `<svg class="w-4 h-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
             <g fill="none" fill-rule="evenodd">
-              <path d="M16 12.859V14c0 1.105-2.09 2-4.667 2-2.494 0-4.531-.839-4.66-1.894L6.667 14v-1.141C7.73 13.574 9.366 14 11.333 14c1.968 0 3.602-.426 4.667-1.141zm0-3.334v1.142c0 1.104-2.09 2-4.667 2-2.494 0-4.531-.839-4.66-1.894l-.006-.106V9.525c1.064.716 2.699 1.142 4.666 1.142 1.968 0 3.602-.426 4.667-1.142zm-4.667-4.192c2.578 0 4.667.896 4.667 2 0 1.105-2.09 2-4.667 2s-4.666-.895-4.666-2c0-1.104 2.089-2 4.666-2z" fill="${uicolors.gray[700]}"/>
+              <path d="M16 12.859V14c0 1.105-2.09 2-4.667 2-2.494 0-4.531-.839-4.66-1.894L6.667 14v-1.141C7.73 13.574 9.366 14 11.333 14c1.968 0 3.602-.426 4.667-1.141zm0-3.334v1.142c0 1.104-2.09 2-4.667 2-2.494 0-4.531-.839-4.66-1.894l-.006-.106V9.525c1.064.716 2.699 1.142 4.666 1.142 1.968 0 3.602-.426 4.667-1.142zm-4.667-4.192c2.578 0 4.667.896 4.667 2 0 1.105-2.09 2-4.667 2s-4.666-.895-4.666-2c0-1.104 2.089-2 4.666-2z" fill="${darkColor}"/>
-              <path d="M0 10.859C1.065 11.574 2.7 12 4.667 12l.337-.005.33-.013v1.995c-.219.014-.44.023-.667.023-2.495 0-4.532-.839-4.66-1.894L0 12v-1.141zm0-2.192V7.525c1.065.716 2.7 1.142 4.667 1.142l.337-.005.33-.013v1.995c-.219.013-.44.023-.667.023-2.495 0-4.532-.839-4.66-1.894L0 8.667V7.525zm0-4.475c1.065.715 2.7 1.141 4.667 1.141.694 0 1.345-.056 1.946-.156-.806.56-1.27 1.292-1.278 2.134-.219.013-.441.022-.668.022-2.578 0-4.667-.895-4.667-2zM4.667 0c2.577 0 4.666.895 4.666 2S7.244 4 4.667 4C2.089 4 0 3.105 0 2s2.09-2 4.667-2z" fill="${uicolors.gray[400]}"/>
+              <path d="M0 10.859C1.065 11.574 2.7 12 4.667 12l.337-.005.33-.013v1.995c-.219.014-.44.023-.667.023-2.495 0-4.532-.839-4.66-1.894L0 12v-1.141zm0-2.192V7.525c1.065.716 2.7 1.142 4.667 1.142l.337-.005.33-.013v1.995c-.219.013-.44.023-.667.023-2.495 0-4.532-.839-4.66-1.894L0 8.667V7.525zm0-4.475c1.065.715 2.7 1.141 4.667 1.141.694 0 1.345-.056 1.946-.156-.806.56-1.27 1.292-1.278 2.134-.219.013-.441.022-.668.022-2.578 0-4.667-.895-4.667-2zM4.667 0c2.577 0 4.666.895 4.666 2S7.244 4 4.667 4C2.089 4 0 3.105 0 2s2.09-2 4.667-2z" fill="${lightColor}"/>
             </g>
           </svg>`,
         'Source of Funds (Liabilities)': `<svg class="w-4 h-4" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
             <g fill="none" fill-rule="evenodd">
-              <path d="M7.332 11.36l4.666-3.734 2 1.6V.666A.667.667 0 0013.332 0h-12a.667.667 0 00-.667.667v14.666c0 .369.298.667.667.667h6v-4.64zm-4-7.36H11.3v1.333H3.332V4zm2.666 8H3.332v-1.333h2.666V12zM3.332 8.667V7.333h5.333v1.334H3.332z" fill="${uicolors.gray[700]}"/>
+              <path d="M7.332 11.36l4.666-3.734 2 1.6V.666A.667.667 0 0013.332 0h-12a.667.667 0 00-.667.667v14.666c0 .369.298.667.667.667h6v-4.64zm-4-7.36H11.3v1.333H3.332V4zm2.666 8H3.332v-1.333h2.666V12zM3.332 8.667V7.333h5.333v1.334H3.332z" fill="${darkColor}"/>
-              <path d="M15.332 12l-3.334-2.667L8.665 12v3.333c0 .369.298.667.667.667h2v-2h1.333v2h2a.667.667 0 00.667-.667V12z" fill="${uicolors.gray[400]}"/>
+              <path d="M15.332 12l-3.334-2.667L8.665 12v3.333c0 .369.298.667.667.667h2v-2h1.333v2h2a.667.667 0 00.667-.667V12z" fill="${lightColor}"/>
             </g>
           </svg>`,
       };
 
       let leaf = `<svg class="w-2 h-2" viewBox="0 0 8 8" xmlns="http://www.w3.org/2000/svg">
-        <circle stroke="${uicolors.gray[700]}" cx="4" cy="4" r="3.5" fill="none" fill-rule="evenodd"/>
+        <circle stroke="${darkColor}" cx="4" cy="4" r="3.5" fill="none" fill-rule="evenodd"/>
       </svg>`;
 
       let folder = `<svg class="w-3 h-3" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-        <path d="M8.333 3.367L6.333.7H.667A.667.667 0 000 1.367v12a2 2 0 002 2h12a2 2 0 002-2V4.033a.667.667 0 00-.667-.666h-7z" fill="${uicolors.gray[700]}" fill-rule="evenodd"/>
+        <path d="M8.333 3.367L6.333.7H.667A.667.667 0 000 1.367v12a2 2 0 002 2h12a2 2 0 002-2V4.033a.667.667 0 00-.667-.666h-7z" fill="${darkColor}" fill-rule="evenodd"/>
       </svg>`;
 
       let icon = isGroup ? folder : leaf;

src/pages/Dashboard/Cashflow.vue

@@ -77,7 +77,7 @@ export default defineComponent({
     LineChart,
   },
   props: {
-    darkMode: Boolean,
+    darkMode: { type: Boolean, default: false },
   },
   extends: DashboardChartBase,
   data: () => ({

src/pages/Dashboard/Dashboard.vue

@@ -2,7 +2,17 @@
   <div class="h-screen" style="width: var(--w-desk)">
     <PageHeader :title="t`Dashboard`">
       <div
-        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"
+        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
+        "
       >
         <PeriodSelector
           class="px-3"
@@ -81,7 +91,7 @@ export default {
     UnpaidInvoices,
   },
   props: {
-    darkMode: Boolean,
+    darkMode: { type: Boolean, default: false },
   },
   data() {
     return { period: 'This Year' };

src/pages/Dashboard/Expenses.vue

@@ -78,7 +78,7 @@ export default defineComponent({
     SectionHeader,
   },
   props: {
-    darkMode: Boolean,
+    darkMode: { type: Boolean, default: false },
   },
   extends: DashboardChartBase,
   data: () => ({

src/pages/Dashboard/ProfitAndLoss.vue

@@ -56,7 +56,7 @@ export default defineComponent({
     BarChart,
   },
   props: {
-    darkMode: Boolean,
+    darkMode: { type: Boolean, default: false },
   },
   extends: DashboardChartBase,
   data: () => ({

src/pages/Dashboard/UnpaidInvoices.vue

@@ -68,7 +68,17 @@
       :offset="15"
       :show="show"
       placement="top"
-      class="text-sm shadow-md px-2 py-1 bg-white dark:bg-gray-900 text-gray-900 dark:text-white 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">
@@ -114,7 +124,7 @@ export default defineComponent({
   extends: BaseDashboardChart,
   props: {
     schemaName: { type: String as PropType<string>, required: true },
-    darkMode: Boolean,
+    darkMode: { type: Boolean, default: false },
   },
   data() {
     return {

src/pages/DatabaseSelector.vue

@@ -1,45 +1,45 @@
 <template>
   <div
-    class="flex-1 flex justify-center items-center bg-gray-25"
+    class="flex-1 flex justify-center items-center bg-gray-25 dark:bg-gray-900"
     :class="{
       'pointer-events-none': loadingDatabase,
       'window-drag': platform !== 'Windows',
     }"
   >
     <div
-      class="w-full w-form shadow-lg rounded-lg border relative bg-white"
+      class="w-full w-form shadow-lg rounded-lg border dark:border-gray-800 relative bg-white dark:bg-gray-875"
       style="height: 700px"
     >
       <!-- Welcome to Frappe Books -->
       <div class="px-4 py-4">
-        <h1 class="text-2xl font-semibold select-none">
+        <h1 class="text-2xl font-semibold select-none dark:text-gray-25">
           {{ t`Welcome to Frappe Books` }}
         </h1>
-        <p class="text-gray-600 text-base select-none">
+        <p class="text-gray-600 dark:text-gray-400 text-base select-none">
           {{
             t`Create a new company or select an existing one from your computer`
           }}
         </p>
       </div>
 
-      <hr />
+      <hr class="dark:border-gray-800"/>
 
       <!-- New File (Blue Icon) -->
       <div
         data-testid="create-new-file"
         class="px-4 h-row-largest flex flex-row items-center gap-4 p-2"
-        :class="creatingDemo ? '' : 'hover:bg-gray-50 cursor-pointer'"
+        :class="creatingDemo ? '' : 'hover:bg-gray-50 dark:hover:bg-gray-890 cursor-pointer'"
         @click="newDatabase"
       >
         <div class="w-8 h-8 rounded-full bg-blue-500 relative flex-center">
-          <feather-icon name="plus" class="text-white w-5 h-5" />
+          <feather-icon name="plus" class="text-white dark:text-gray-900 w-5 h-5" />
         </div>
 
         <div>
-          <p class="font-medium">
+          <p class="font-medium dark:text-gray-200">
             {{ t`New Company` }}
           </p>
-          <p class="text-sm text-gray-600">
+          <p class="text-sm text-gray-600 dark:text-gray-400">
             {{ t`Create a new company and store it on your computer` }}
           </p>
         </div>
@@ -48,17 +48,17 @@
       <!-- Existing File (Green Icon) -->
       <div
         class="px-4 h-row-largest flex flex-row items-center gap-4 p-2"
-        :class="creatingDemo ? '' : 'hover:bg-gray-50 cursor-pointer'"
+        :class="creatingDemo ? '' : 'hover:bg-gray-50 dark:hover:bg-gray-890 cursor-pointer'"
         @click="existingDatabase"
       >
-        <div class="w-8 h-8 rounded-full bg-green-500 relative flex-center">
+        <div class="w-8 h-8 rounded-full bg-green-500 dark:bg-green-600 relative flex-center">
-          <feather-icon name="upload" class="w-4 h-4 text-white" />
+          <feather-icon name="upload" class="w-4 h-4 text-white dark:text-gray-900" />
         </div>
         <div>
-          <p class="font-medium">
+          <p class="font-medium dark:text-gray-200">
             {{ t`Existing Company` }}
           </p>
-          <p class="text-sm text-gray-600">
+          <p class="text-sm text-gray-600 dark:text-gray-400">
             {{ t`Load an existing company from your computer` }}
           </p>
         </div>
@@ -68,22 +68,22 @@
       <div
         v-if="!files?.length"
         class="px-4 h-row-largest flex flex-row items-center gap-4 p-2"
-        :class="creatingDemo ? '' : 'hover:bg-gray-50 cursor-pointer'"
+        :class="creatingDemo ? '' : 'hover:bg-gray-50 dark:hover:bg-gray-890 cursor-pointer'"
         @click="createDemo"
       >
-        <div class="w-8 h-8 rounded-full bg-pink-500 relative flex-center">
+        <div class="w-8 h-8 rounded-full bg-pink-500 dark:bg-pink-600 relative flex-center">
           <feather-icon name="monitor" class="w-4 h-4 text-white" />
         </div>
         <div>
-          <p class="font-medium">
+          <p class="font-medium dark:text-gray-200">
             {{ t`Create Demo` }}
           </p>
-          <p class="text-sm text-gray-600">
+          <p class="text-sm text-gray-600 dark:text-gray-400">
             {{ t`Create a demo company to try out Frappe Books` }}
           </p>
         </div>
       </div>
-      <hr />
+      <hr class="dark:border-gray-800"/>
 
       <!-- File List -->
       <div class="overflow-y-auto" style="max-height: 340px">
@@ -91,7 +91,7 @@
           v-for="(file, i) in files"
           :key="file.dbPath"
           class="h-row-largest px-4 flex gap-4 items-center"
-          :class="creatingDemo ? '' : 'hover:bg-gray-50 cursor-pointer'"
+          :class="creatingDemo ? '' : 'hover:bg-gray-50 dark:hover:bg-gray-890 cursor-pointer'"
           :title="t`${file.companyName} stored at ${file.dbPath}`"
           @click="selectFile(file)"
         >
@@ -103,7 +103,7 @@
               flex
               justify-center
               items-center
-              bg-gray-200
+              bg-gray-200 dark:bg-gray-800
               text-gray-500
               font-semibold
               flex-shrink-0
@@ -114,16 +114,16 @@
           </div>
           <div class="w-full">
             <div class="flex justify-between overflow-x-auto items-baseline">
-              <h2 class="font-medium">
+              <h2 class="font-medium dark:text-gray-200">
                 {{ file.companyName }}
               </h2>
-              <p class="whitespace-nowrap text-sm text-gray-600">
+              <p class="whitespace-nowrap text-sm text-gray-600 dark:text-gray-400">
                 {{ formatDate(file.modified) }}
               </p>
             </div>
             <p
               class="
-                text-sm text-gray-600
+                text-sm text-gray-600 dark:text-gray-400
                 overflow-x-auto
                 no-scrollbar
                 whitespace-nowrap
@@ -136,12 +136,12 @@
             class="
               ms-auto
               p-2
-              hover:bg-red-200
+              hover:bg-red-200 dark:hover:bg-red-900 dark:hover:bg-opacity-40
               rounded-full
               w-8
               h-8
-              text-gray-600
+              text-gray-600 dark:text-gray-400
-              hover:text-red-400
+              hover:text-red-400 dark:hover:text-red-200
             "
             @click.stop="() => deleteDb(i)"
           >
@@ -149,7 +149,7 @@
           </button>
         </div>
       </div>
-      <hr v-if="files?.length" />
+      <hr v-if="files?.length" class="dark:border-gray-800"/>
 
       <!-- Language Selector -->
       <div
@@ -160,7 +160,7 @@
           items-center
           absolute
           p-4
-          text-gray-900
+          text-gray-900 dark:text-gray-100
         "
         style="top: 100%; transform: translateY(-100%)"
       >
@@ -169,8 +169,8 @@
           v-if="files?.length"
           class="
             text-sm
-            bg-gray-100
+            bg-gray-100 dark:bg-gray-890
-            hover:bg-gray-200
+            hover:bg-gray-200 dark:hover:bg-gray-900
             rounded
             px-4
             py-1.5
@@ -198,21 +198,21 @@
 
     <!-- Base Count Selection when Dev -->
     <Modal :open-modal="openModal" @closemodal="openModal = false">
-      <div class="p-4 text-gray-900 w-form">
+      <div class="p-4 text-gray-900 dark:text-gray-100 w-form">
         <h2 class="text-xl font-semibold select-none">Set Base Count</h2>
         <p class="text-base mt-2">
           Base Count is a lower bound on the number of entries made when
           creating the dummy instance.
         </p>
         <div class="flex my-12 justify-center items-baseline gap-4 text-base">
-          <label for="basecount" class="text-gray-600">Base Count</label>
+          <label for="basecount" class="text-gray-600 dark:text-gray-400">Base Count</label>
           <input
             v-model="baseCount"
             type="number"
             name="basecount"
             class="
-              bg-gray-100
+              bg-gray-100 dark:bg-gray-875
-              focus:bg-gray-200
+              focus:bg-gray-200 dark:focus:bg-gray-890
               rounded-md
               px-2
               py-1

src/pages/Desk.vue

@@ -8,7 +8,13 @@ import { toggleSidebar } from 'src/utils/ui';
       <!-- eslint-disable vue/require-explicit-emits -->
       <Sidebar
         v-show="showSidebar"
-        class="flex-shrink-0 border-e dark:border-gray-800 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')"
@@ -43,7 +49,21 @@ import { toggleSidebar } from 'src/utils/ui';
     <!-- Show Sidebar Button -->
     <button
       v-show="!showSidebar"
-      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"
+      class="
+        absolute
+        bottom-0
+        start-0
+        text-gray-600
+        dark:text-gray-400
+        hover:bg-gray-100
+        dark:hover:bg-gray-900
+        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" />
@@ -59,7 +79,7 @@ export default defineComponent({
     Sidebar,
   },
   props: {
-    darkMode: Boolean,
+    darkMode: { type: Boolean, default: false },
   },
   emits: ['change-db-file', 'toggle-darkmode'],
 });

src/pages/GetStarted.vue

@@ -1,13 +1,19 @@
 <template>
   <div class="flex flex-col overflow-y-hidden">
     <PageHeader :title="t`Set Up Your Workspace`" />
-    <div class="flex-1 overflow-y-auto overflow-x-hidden custom-scroll">
+    <div
+      class="
+        flex-1
+        overflow-y-auto overflow-x-hidden
+        custom-scroll custom-scroll-thumb1
+      "
+    >
       <div
         v-for="section in sections"
         :key="section.label"
-        class="p-4 border-b"
+        class="p-4 border-b dark:border-gray-800"
       >
-        <h2 class="font-medium">{{ section.label }}</h2>
+        <h2 class="font-medium dark:text-gray-25">{{ section.label }}</h2>
         <div class="flex mt-4 gap-4">
           <div
             v-for="item in section.items"
@@ -15,7 +21,15 @@
             class="w-full md:w-1/3 sm:w-1/2"
           >
             <div
-              class="flex flex-col justify-between h-40 p-4 border rounded-lg"
+              class="
+                flex flex-col
+                justify-between
+                h-40
+                p-4
+                border
+                dark:border-gray-800 dark:text-gray-50
+                rounded-lg
+              "
               @mouseenter="() => (activeCard = item.key)"
               @mouseleave="() => (activeCard = null)"
             >
@@ -32,7 +46,7 @@
                   class="w-5 h-5 mb-4"
                 />
                 <h3 class="font-medium">{{ item.label }}</h3>
-                <p class="mt-2 text-sm text-gray-800">
+                <p class="mt-2 text-sm text-gray-800 dark:text-gray-400">
                   {{ item.description }}
                 </p>
               </div>
@@ -42,23 +56,19 @@
               >
                 <Button
                   v-if="item.action"
-                  class="leading-tight"
+                  class="leading-tight text-base"
                   type="primary"
                   @click="handleAction(item)"
                 >
-                  <span class="text-base text-white">
                   {{ t`Set Up` }}
-                  </span>
                 </Button>
                 <Button
                   v-if="item.documentation"
-                  class="leading-tight"
+                  class="leading-tight text-base"
                   :class="{ 'ms-4': item.action }"
                   @click="handleDocumentation(item)"
                 >
-                  <span class="text-base">
                   {{ t`Documentation` }}
-                  </span>
                 </Button>
               </div>
             </div>
@@ -88,6 +98,9 @@ export default defineComponent({
     Button,
     Icon,
   },
+  props: {
+    darkMode: { type: Boolean, default: false },
+  },
   data() {
     return {
       activeCard: null as string | null,

src/pages/ImportWizard.vue

@@ -56,6 +56,7 @@
           w-full
           gap-2
           border-b
+          dark:border-gray-800
           p-4
         "
       >
@@ -69,7 +70,6 @@
               label: fyo.schemaMap[value]?.label ?? value,
             })),
           }"
-          input-class="bg-transparent text-gray-900 text-base"
           class="w-40"
           :border="true"
           :value="importType"
@@ -83,7 +83,11 @@
         <p
           v-else
           class="text-base ms-2"
-          :class="fileName ? 'text-gray-900 font-semibold' : 'text-gray-700'"
+          :class="
+            fileName
+              ? 'text-gray-900 dark:text-gray-25 font-semibold'
+              : 'text-gray-700 dark:text-gray-200'
+          "
         >
           <span v-if="fileName" class="font-normal">{{ t`Selected` }} </span>
           {{ helperMessage }}{{ fileName ? ',' : '' }}
@@ -106,12 +110,23 @@
       <!-- Assignment Row and Value Grid container -->
       <div
         v-if="hasImporter"
-        class="overflow-auto custom-scroll"
+        class="overflow-auto custom-scroll custom-scroll-thumb1"
         style="max-height: calc(100vh - (2 * var(--h-row-largest)) - 2px)"
       >
         <!-- Column Assignment Row -->
         <div
-          class="grid sticky top-0 py-4 pe-4 bg-white border-b gap-4"
+          class="
+            grid
+            sticky
+            top-0
+            py-4
+            pe-4
+            bg-white
+            dark:bg-gray-875
+            border-b border-e
+            dark:border-gray-800
+            gap-4
+          "
           style="z-index: 1; width: fit-content"
           :style="gridTemplateColumn"
         >
@@ -131,7 +146,17 @@
         <!-- Values Grid -->
         <div
           v-if="importer.valueMatrix.length"
-          class="grid py-4 pe-4 bg-white gap-4"
+          class="
+            grid
+            py-4
+            pe-4
+            bg-white
+            dark:bg-gray-875
+            gap-4
+            border-e
+            last:border-b
+            dark:border-gray-800
+          "
           style="width: fit-content"
           :style="gridTemplateColumn"
         >
@@ -180,7 +205,11 @@
               <!-- FormControl Field if Column is Assigned -->
               <FormControl
                 v-else
-                :class="val.error ? 'border border-red-300 rounded-md' : ''"
+                :class="
+                  val.error
+                    ? 'border border-red-300 dark:border-red-600 rounded-md'
+                    : ''
+                "
                 :title="getFieldTitle(val)"
                 :df="
                     importer.templateFieldsMap.get(
@@ -203,7 +232,15 @@
 
         <div
           v-else
-          class="ps-4 text-gray-700 sticky left-0 flex items-center"
+          class="
+            ps-4
+            text-gray-700
+            dark:text-gray-300
+            sticky
+            left-0
+            flex
+            items-center
+          "
           style="height: 62.5px"
         >
           {{ t`No rows added. Select a file or add rows.` }}
@@ -227,18 +264,20 @@
       <div class="w-form">
         <!-- Pick Column Header -->
         <FormHeader :form-title="t`Pick Import Columns`" />
-        <hr />
+        <hr class="dark:border-gray-800" />
 
         <!-- Pick Column Checkboxes -->
         <div
           v-for="[key, value] of columnPickerFieldsMap.entries()"
           :key="key"
-          class="p-4 max-h-80 overflow-auto custom-scroll"
+          class="p-4 max-h-80 overflow-auto custom-scroll custom-scroll-thumb1"
         >
-          <h2 class="text-sm font-semibold text-gray-800">
+          <h2 class="text-sm font-semibold text-gray-800 dark:text-gray-200">
             {{ key }}
           </h2>
-          <div class="grid grid-cols-3 border rounded mt-1">
+          <div
+            class="grid grid-cols-3 border dark:border-gray-800 rounded mt-1"
+          >
             <div
               v-for="tf of value"
               :key="tf.fieldKey"
@@ -261,9 +300,9 @@
         </div>
 
         <!-- Pick Column Footer -->
-        <hr />
+        <hr class="dark:border-gray-800" />
         <div class="p-4 flex justify-between items-center">
-          <p class="text-sm text-gray-600">
+          <p class="text-sm text-gray-600 dark:text-gray-400">
             {{ t`${numColumnsPicked} fields selected` }}
           </p>
           <Button type="primary" @click="showColumnPicker = false">{{
@@ -278,13 +317,15 @@
       <div class="w-form">
         <!-- Import Completed Header -->
         <FormHeader :form-title="t`Import Complete`" />
-        <hr />
+        <hr class="dark:border-gray-800" />
         <!-- Success -->
         <div v-if="success.length > 0">
           <!-- Success Section Header -->
           <div class="flex justify-between px-4 pt-4 pb-1">
-            <p class="text-base font-semibold">{{ t`Success` }}</p>
+            <p class="text-base font-semibold dark:text-gray-200">
-            <p class="text-sm text-gray-600">
+              {{ t`Success` }}
+            </p>
+            <p class="text-sm text-gray-600 dark:text-gray-400">
               {{
                 success.length === 1
                   ? t`${success.length} entry imported`
@@ -293,7 +334,7 @@
             </p>
           </div>
           <!-- Success Body -->
-          <div class="max-h-40 overflow-auto text-gray-900">
+          <div class="max-h-40 overflow-auto text-gray-900 dark:text-gray-50">
             <div
               v-for="(name, i) of success"
               :key="name"
@@ -306,7 +347,7 @@
               </p>
             </div>
           </div>
-          <hr />
+          <hr class="dark:border-gray-800" />
         </div>
 
         <!-- Failed -->
@@ -314,7 +355,7 @@
           <!-- Failed Section Header -->
           <div class="flex justify-between px-4 pt-4 pb-1">
             <p class="text-base font-semibold">{{ t`Failed` }}</p>
-            <p class="text-sm text-gray-600">
+            <p class="text-sm text-gray-600 dark:text-gray-400">
               {{
                 failed.length === 1
                   ? t`${failed.length} entry failed`
@@ -323,7 +364,7 @@
             </p>
           </div>
           <!-- Failed Body -->
-          <div class="max-h-40 overflow-auto text-gray-900">
+          <div class="max-h-40 overflow-auto text-gray-900 dark:text-gray-50">
             <div
               v-for="(f, i) of failed"
               :key="f.name"
@@ -345,7 +386,7 @@
         <!-- Fallback Div -->
         <div
           v-if="failed.length === 0 && success.length === 0"
-          class="p-4 text-base"
+          class="p-4 text-base dark:text-gray-200"
         >
           {{ t`No entries were imported.` }}
         </div>
@@ -964,6 +1005,6 @@ export default defineComponent({
 </script>
 <style scoped>
 .index-cell {
-  @apply flex pe-4 justify-end items-center border-e  bg-white sticky left-0 -my-4 text-gray-600;
+  @apply flex pe-4 justify-end items-center border-e last:border-b dark:border-gray-800 bg-white dark:bg-gray-875 sticky left-0 -my-4 text-gray-600 dark:text-gray-400;
 }
 </style>

src/pages/SetupWizard/SetupWizard.vue

@@ -7,7 +7,7 @@
     <template #body>
       <FormHeader
         :form-title="t`Set up your organization`"
-        class="sticky top-0 bg-white border-b"
+        class="sticky top-0 bg-white dark:bg-gray-890 border-b dark:border-gray-800"
       >
       </FormHeader>
 
@@ -18,7 +18,7 @@
           :key="name + idx"
           ref="section"
           class="p-4"
-          :class="idx !== 0 && activeGroup.size > 1 ? 'border-t' : ''"
+          :class="idx !== 0 && activeGroup.size > 1 ? 'border-t dark:border-gray-800' : ''"
           :show-title="activeGroup.size > 1 && name !== t`Default`"
           :title="name"
           :fields="fields"
@@ -37,22 +37,22 @@
           flex
           items-center
           justify-between
-          border-t
+          border-t dark:border-gray-800
           flex-shrink-0
           sticky
           bottom-0
-          bg-white
+          bg-white dark:bg-gray-890
         "
       >
-        <p v-if="loading" class="text-base text-gray-600">
+        <p v-if="loading" class="text-base text-gray-600 dark:text-gray-400">
           {{ t`Loading instance...` }}
         </p>
-        <Button v-if="!loading" class="w-24" @click="cancel">{{
+        <Button v-if="!loading" class="w-24 border dark:border-gray-800" @click="cancel">{{
           t`Cancel`
         }}</Button>
         <Button
           v-if="fyo.store.isDevelopment && !loading"
-          class="w-24 ml-auto mr-4"
+          class="w-24 ml-auto mr-4 border dark:border-gray-800"
           :disabled="loading"
           @click="fill"
           >{{ t`Fill` }}</Button