feat: Forms, Dialog, Toast and some other small components changed to darkmode

src/components/Button.vue

@@ -40,7 +40,7 @@ export default defineComponent({
       return {
         'opacity-50 cursor-not-allowed pointer-events-none': this.disabled,
         'text-white dark:text-black': this.type === 'primary',
-        'bg-black dark:bg-gray-400 dark:font-semibold':
+        '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':

src/components/Controls/AttachImage.vue

@@ -1,6 +1,6 @@
 <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',
@@ -18,7 +18,7 @@
           h-full
           items-center
           justify-center
-          text-gray-400
+          text-gray-400 dark:text-gray-600
           font-semibold
           w-full
           text-4xl
@@ -29,7 +29,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 +45,10 @@
       :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>

src/components/Controls/AutoComplete.vue

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

src/components/Controls/Base.vue

@@ -136,7 +136,7 @@ export default defineComponent({
     },
     containerReadOnlyClasses(): string {
       if (!this.isReadOnly) {
-        return 'focus-within:bg-gray-100 dark:focus-within:bg-gray-890';
+        return 'focus-within:bg-gray-100 dark:focus-within:bg-gray-850';
       }
 
       return '';

src/components/Controls/Check.vue

@@ -52,8 +52,9 @@
             y="0.5"
             width="13"
             height="13"
-            rx="3.5"
-            :stroke="offBorderColor"
+            rx="3"
+            :stroke="color"
+            stroke-width="1.5"
           />
         </svg>
 
@@ -94,8 +95,7 @@ export default defineComponent({
   emits: ['focus'],
   data() {
     return {
-      offBorderColor: 'rgba(17, 43, 66, 0.201322)',
-      offColor: '#FFFFFF',
+      offColor: '#0000',
       color: '#A1ABB4',
     };
   },

src/components/Controls/Date.vue

@@ -27,7 +27,7 @@
       <p
         v-if="!isEmpty"
         :class="[baseInputClasses]"
-        class="overflow-auto no-scrollbar whitespace-nowrap"
+        class="overflow-auto no-scrollbar whitespace-nowrap dark:text-gray-100"
       >
         {{ formattedValue }}
       </p>
@@ -39,7 +39,7 @@
         <FeatherIcon
           name="calendar"
           class="w-4 h-4"
-          :class="showMandatory ? 'text-red-600' : 'text-gray-600'"
+          :class="showMandatory ? 'text-red-600' : 'text-gray-600 dark:text-gray-400'"
         />
       </button>
     </div>
@@ -84,10 +84,10 @@ export default defineComponent({
         return '';
       }
 
-      const border = 'border border-gray-200';
-      let background = 'bg-gray-25';
+      const border = 'border border-gray-200 dark:border-gray-800';
+      let background = 'bg-gray-25 dark:bg-gray-875';
       if (this.isReadOnly) {
-        background = 'bg-gray-50';
+        background = 'bg-gray-50 dark:bg-gray-850';
       }
 
       if (this.showInput) {

src/components/Controls/Table.vue

@@ -4,11 +4,11 @@
       {{ df.label }}
     </div>
 
-    <div :class="border ? 'border rounded-md' : ''">
+    <div :class="border ? 'border dark:border-gray-800 rounded-md' : ''">
       <!-- Title Row -->
       <Row
         :ratio="ratio"
-        class="border-b px-2 text-gray-600 w-full flex items-center"
+        class="border-b dark:border-gray-800 px-2 text-gray-600 dark:text-gray-400 w-full flex items-center"
       >
         <div class="flex items-center ps-2">#</div>
         <div
@@ -29,14 +29,14 @@
       <!-- Data Rows -->
       <div
         v-if="value"
-        class="overflow-auto custom-scroll"
+        class="overflow-auto custom-scroll custom-scroll-thumb1"
         :style="{ 'max-height': maxHeight }"
       >
         <TableRow
           v-for="(row, idx) of value"
           ref="table-row"
           :key="row.name"
-          :class="idx < value.length - 1 ? 'border-b' : ''"
+          :class="idx < value.length - 1 ? 'border-b dark:border-gray-800' : ''"
           v-bind="{ row, tableFields, size, ratio, isNumeric }"
           :read-only="isReadOnly"
           :can-edit-row="canEditRow"
@@ -58,7 +58,7 @@
           flex
           items-center
         "
-        :class="value.length > 0 ? 'border-t' : ''"
+        :class="value.length > 0 ? 'border-t dark:border-gray-800' : ''"
         @click="addRow"
       >
         <div class="flex items-center ps-1">

src/components/Controls/TableRow.vue

@@ -2,10 +2,10 @@
   <Row
     :ratio="ratio"
     class="w-full px-2 group flex items-center justify-center h-row-mid"
-    :class="readOnly ? '' : 'hover:bg-gray-25'"
+    :class="readOnly ? '' : 'hover:bg-gray-25 dark:hover:bg-gray-900'"
   >
     <!-- Index or Remove button -->
-    <div class="flex items-center ps-2 text-gray-600">
+    <div class="flex items-center ps-2 text-gray-600 dark:text-gray-400">
       <span class="hidden" :class="{ 'group-hover:inline-block': !readOnly }">
         <feather-icon
           name="x"
@@ -35,7 +35,7 @@
       :background="false"
       @click="openRowQuickEdit"
     >
-      <feather-icon name="edit" class="w-4 h-4 text-gray-600" />
+      <feather-icon name="edit" class="w-4 h-4 text-gray-600 dark:text-gray-400" />
     </Button>
 
     <!-- Error Display -->

src/components/Controls/Text.vue

@@ -7,7 +7,7 @@
       <textarea
         ref="input"
         :rows="rows"
-        :class="['resize-none', inputClasses, containerClasses]"
+        :class="['resize-none bg-transparent', inputClasses, containerClasses]"
         :value="value"
         :placeholder="inputPlaceholder"
         style="vertical-align: top"

src/components/Dialog.vue

@@ -6,10 +6,10 @@
         <!-- Dialog -->
         <div
           class="
-            bg-white
-            border
+            bg-white dark:bg-gray-850
+            border dark:border-gray-800
             rounded-lg
-            text-gray-900
+            text-gray-900 dark:text-gray-25
             p-4
             shadow-2xl
             w-dialog

src/components/Dropdown.vue

@@ -18,7 +18,7 @@
       <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 class="p-1 max-h-64 overflow-auto custom-scroll custom-scroll-thumb2 text-sm">
           <div
             v-if="isLoading"
             class="p-2 text-gray-600 dark:text-gray-400 italic"

src/components/ExportWizard.vue

@@ -2,7 +2,7 @@
   <div>
     <!-- Export Wizard Header -->
     <FormHeader :form-title="label" :form-sub-title="t`Export Wizard`" />
-    <hr />
+    <hr class="dark:border-gray-800"/>
 
     <!-- Export Config -->
     <div class="grid grid-cols-3 p-4 gap-4">
@@ -31,23 +31,23 @@
         @change="(value: number) => (limit = value)"
       />
     </div>
-    <hr />
+    <hr class="dark:border-gray-800"/>
 
     <!-- Fields Selection -->
-    <div class="max-h-80 overflow-auto custom-scroll">
+    <div class="max-h-80 overflow-auto custom-scroll custom-scroll-thumb2">
       <!-- Main Fields -->
       <div class="p-4">
-        <h2 class="text-sm font-semibold text-gray-800">
+        <h2 class="text-sm font-semibold text-gray-800 dark:text-gray-300">
           {{ fyo.schemaMap[schemaName]?.label ?? schemaName }}
         </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">
           <Check
             v-for="ef of fields"
             :key="ef.fieldname"
             :label-class="
               ef.fieldtype === 'Table'
-                ? 'text-sm text-gray-600 font-semibold'
-                : 'text-sm text-gray-600'
+                ? 'text-sm text-gray-600 dark:text-gray-300 font-semibold'
+                : 'text-sm text-gray-600 dark:text-gray-400'
             "
             :df="getField(ef)"
             :show-label="true"
@@ -59,13 +59,14 @@
 
       <!-- Table Fields -->
       <div v-for="efs of filteredTableFields" :key="efs.fieldname" class="p-4">
-        <h2 class="text-sm font-semibold text-gray-800">
+        <h2 class="text-sm font-semibold text-gray-800 dark:text-gray-300">
           {{ fyo.schemaMap[efs.target]?.label ?? schemaName }}
         </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">
           <Check
             v-for="ef of efs.fields"
             :key="ef.fieldname"
+            label-class='text-gray-600 dark:text-gray-300'
             :df="getField(ef)"
             :show-label="true"
             :value="ef.export"
@@ -76,9 +77,9 @@
     </div>
 
     <!-- Export Button -->
-    <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`${numSelected} fields selected` }}
       </p>
       <Button type="primary" @click="exportData">{{ t`Export` }}</Button>

src/components/FormContainer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex bg-gray-25 overflow-x-auto">
+  <div class="flex bg-gray-25 dark:bg-gray-875 overflow-x-auto">
     <div class="flex flex-1 flex-col">
       <!-- Page Header (Title, Buttons, etc) -->
       <PageHeader
@@ -16,11 +16,11 @@
 
       <!-- Common Form -->
       <div
-        class="flex flex-col self-center h-full overflow-auto bg-white"
+        class="flex flex-col self-center h-full overflow-auto bg-white dark:bg-gray-890"
         :class="
           useFullWidth
-            ? 'w-full border-t'
-            : 'w-form border rounded-lg shadow-lg mb-4 mx-4'
+            ? 'w-full border-t dark:border-gray-800'
+            : 'w-form border dark:border-gray-800 rounded-lg shadow-lg mb-4 mx-4'
         "
       >
         <slot name="body" />

src/components/FormHeader.vue

@@ -11,9 +11,9 @@
       flex-shrink-0
     "
   >
-    <h1 v-if="formTitle">{{ formTitle }}</h1>
+    <h1 v-if="formTitle" class="dark:text-gray-25">{{ formTitle }}</h1>
     <slot />
-    <p v-if="formSubTitle" class="text-gray-600">
+    <p v-if="formSubTitle" class="text-gray-600 dark:text-gray-400">
       {{ formSubTitle }}
     </p>
   </div>

src/components/Modal.vue

@@ -6,7 +6,7 @@
       @click="$emit('closemodal')"
     >
       <div
-        class="bg-white rounded-lg shadow-2xl border overflow-hidden inner"
+        class="bg-white dark:bg-gray-850 rounded-lg shadow-2xl border dark:border-gray-800 overflow-hidden inner"
         v-bind="$attrs"
         @click.stop
       >

src/components/QuickView.vue

@@ -2,22 +2,22 @@
   <div style="min-width: 192px; max-width: 300px">
     <div
       class="p-2 flex justify-between"
-      :class="values.length ? 'border-b' : ''"
+      :class="values.length ? 'border-b dark:border-gray-800' : ''"
     >
       <p
         v-if="schema?.naming !== 'random' && !schema?.isChild"
-        class="font-semibold text-base text-gray-900"
+        class="font-semibold text-base text-gray-900 dark:text-gray-25"
       >
         {{ name }}
       </p>
-      <p class="font-semibold text-base text-gray-600">
+      <p class="font-semibold text-base text-gray-600 dark:text-gray-400">
         {{ schema?.label ?? '' }}
       </p>
     </div>
     <div v-if="values.length" class="flex gap-2 p-2 flex-wrap">
-      <p v-for="v of values" :key="v.label" class="pill bg-gray-200">
-        <span class="text-gray-600">{{ v.label }}</span>
-        <span class="text-gray-800 ml-1.5">{{ v.value }}</span>
+      <p v-for="v of values" :key="v.label" class="pill bg-gray-200 dark:bg-gray-800">
+        <span class="text-gray-600 dark:text-gray-500">{{ v.label }}</span>
+        <span class="text-gray-800 dark:text-gray-300 ml-1.5">{{ v.value }}</span>
       </p>
     </div>
   </div>

src/components/SearchBar.vue

@@ -29,26 +29,26 @@
           autocomplete="off"
           spellcheck="false"
           :placeholder="t`Type to search...`"
-          class="bg-gray-100 text-2xl focus:outline-none w-full placeholder-gray-500 text-gray-900 rounded-md p-3"
+          class="bg-gray-100 dark:bg-gray-800 text-2xl focus:outline-none w-full placeholder-gray-500 text-gray-900 dark:text-gray-100 rounded-md p-3"
           @keydown.up="up"
           @keydown.down="down"
           @keydown.enter="() => select()"
           @keydown.esc="close"
         />
       </div>
-      <hr v-if="suggestions.length" />
+      <hr v-if="suggestions.length" class="dark:border-gray-800"/>
 
       <!-- Search List -->
       <div
         :style="`max-height: ${49 * 6 - 1}px`"
-        class="overflow-auto custom-scroll"
+        class="overflow-auto custom-scroll custom-scroll-thumb2"
       >
         <div
           v-for="(si, i) in suggestions"
           :key="`${i}-${si.label}`"
           :data-index="`search-suggestion-${i}`"
-          class="hover:bg-gray-50 cursor-pointer"
-          :class="idx === i ? 'border-gray-700 bg-gray-50 border-s-4' : ''"
+          class="hover:bg-gray-50 dark:hover:bg-gray-875 cursor-pointer"
+          :class="idx === i ? 'border-gray-700 dark:border-gray-200 bg-gray-50 dark:bg-gray-875 border-s-4' : ''"
           @click="select(i)"
         >
           <!-- Search List Item -->
@@ -58,12 +58,12 @@
           >
             <div class="flex items-center">
               <p
-                :class="idx === i ? 'text-gray-900' : 'text-gray-700'"
+                :class="idx === i ? 'text-gray-900 dark:text-gray-100' : 'text-gray-700 dark:text-gray-400'"
                 :style="idx === i ? 'margin-left: -4px' : ''"
               >
                 {{ si.label }}
               </p>
-              <p v-if="si.group === 'Docs'" class="text-gray-600 text-sm ms-3">
+              <p v-if="si.group === 'Docs'" class="text-gray-600 dark:text-gray-400 text-sm ms-3">
                 {{ si.more.filter(Boolean).join(', ') }}
               </p>
             </div>
@@ -77,12 +77,12 @@
             </p>
           </div>
 
-          <hr v-if="i !== suggestions.length - 1" />
+          <hr v-if="i !== suggestions.length - 1" class="dark:border-gray-800"/>
         </div>
       </div>
 
       <!-- Footer -->
-      <hr />
+      <hr class="dark:border-gray-800"/>
       <div class="m-1 flex justify-between flex-col gap-2 text-sm select-none">
         <!-- Group Filters -->
         <div class="flex justify-between">
@@ -90,7 +90,7 @@
             <button
               v-for="g in searchGroups"
               :key="g"
-              class="border px-1 py-0.5 rounded-lg"
+              class="border dark:border-gray-800 px-1 py-0.5 rounded-lg"
               :class="getGroupFilterButtonClass(g)"
               @click="searcher!.set(g, !searcher!.filters.groupFilters[g])"
             >
@@ -98,7 +98,7 @@
             </button>
           </div>
           <button
-            class="hover:text-gray-900 py-0.5 rounded text-gray-700"
+            class="hover:text-gray-900 dark:hover:text-gray-25 py-0.5 rounded text-gray-700 dark:text-gray-300"
             @click="showMore = !showMore"
           >
             {{ showMore ? t`Less Filters` : t`More Filters` }}
@@ -108,11 +108,11 @@
         <!-- Additional Filters -->
         <div v-if="showMore" class="-mt-1">
           <!-- Group Skip Filters -->
-          <div class="flex gap-1 text-gray-800">
+          <div class="flex gap-1 text-gray-800 dark:text-gray-200">
             <button
               v-for="s in ['skipTables', 'skipTransactions'] as const"
               :key="s"
-              class="border px-1 py-0.5 rounded-lg"
+              class="border dark:border-gray-800 px-1 py-0.5 rounded-lg"
               :class="{ 'bg-gray-200': searcher?.filters[s] }"
               @click="searcher?.set(s, !searcher?.filters[s])"
             >
@@ -123,13 +123,13 @@
           </div>
 
           <!-- Schema Name Filters -->
-          <div class="flex mt-1 gap-1 text-blue-500 flex-wrap">
+          <div class="flex mt-1 gap-1 text-blue-500 dark:text-blue-100 flex-wrap">
             <button
               v-for="sf in schemaFilters"
               :key="sf.value"
-              class="border px-1 py-0.5 rounded-lg border-blue-100 whitespace-nowrap"
+              class="border px-1 py-0.5 rounded-lg border-blue-100 dark:border-blue-800 whitespace-nowrap"
               :class="{
-                'bg-blue-100': searcher?.filters.schemaFilters[sf.value],
+                'bg-blue-100 dark:bg-blue-800': searcher?.filters.schemaFilters[sf.value],
               }"
               @click="
                 searcher?.set(
@@ -150,7 +150,7 @@
             <p>↩ {{ t`Select` }}</p>
             <p><span class="tracking-tighter">esc</span> {{ t`Close` }}</p>
             <button
-              class="flex items-center hover:text-gray-800"
+              class="flex items-center hover:text-gray-800 dark:hover:text-gray-300"
               @click="openDocs"
             >
               <feather-icon name="help-circle" class="w-4 h-4 me-1" />
@@ -164,7 +164,7 @@
 
           <div
             v-if="(searcher?.numSearches ?? 0) > 50"
-            class="border border-gray-100 rounded flex justify-self-end ms-2"
+            class="border border-gray-100 dark:border-gray-875 rounded flex justify-self-end ms-2"
           >
             <template
               v-for="c in allowedLimits.filter(
@@ -174,7 +174,7 @@
             >
               <button
                 class="w-9"
-                :class="limit === c ? 'bg-gray-100' : ''"
+                :class="limit === c ? 'bg-gray-100 dark:bg-gray-875 rounded' : ''"
                 @click="limit = Number(c)"
               >
                 {{ c === -1 ? t`All` : c }}
@@ -381,10 +381,10 @@ export default defineComponent({
       const isOn = this.searcher.filters.groupFilters[g];
       const color = this.groupColorMap[g];
       if (isOn) {
-        return `${getBgTextColorClass(color)} border-${color}-100`;
+        return `${getBgTextColorClass(color)} border-${color}-100 dark:border-${color}-800`;
       }
 
-      return `text-${color}-600 border-${color}-100`;
+      return `text-${color}-600 dark:text-${color}-400 border-${color}-100 dark:border-${color}-800`;
     },
   },
 });

src/components/ShortcutsHelper.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
     <FormHeader :form-title="t`Shortcuts`" />
-    <hr />
-    <div class="h-96 overflow-y-auto text-gray-900">
+    <hr class="dark:border-gray-800"/>
+    <div class="h-96 overflow-y-auto custom-scroll custom-scroll-thumb2 text-gray-900 dark:text-gray-100">
       <template v-for="g in groups" :key="g.label">
         <div class="p-4 w-full">
           <!-- Shortcut Group Header -->
@@ -27,13 +27,13 @@
             </div>
           </div>
           <!-- Shortcut count if collapsed -->
-          <div v-else class="text-base text-gray-600">
+          <div v-else class="text-base text-gray-600 dark:text-gray-400">
             {{ t`${g.shortcuts.length} shortcuts` }}
           </div>
         </div>
-        <hr />
+        <hr class="dark:border-gray-800"/>
       </template>
-      <div class="p-4 text-base text-gray-600">
+      <div class="p-4 text-base text-gray-600 dark:text-gray-400">
         {{ t`More shortcuts will be added soon.` }}
       </div>
     </div>

src/components/Toast.vue

@@ -5,7 +5,7 @@
         v-if="open"
         class="
           inner
-          text-gray-900
+          text-gray-900 dark:text-gray-25
           shadow-lg
           px-3
           py-2
@@ -14,7 +14,7 @@
           mb-3
           w-toast
           z-30
-          bg-white
+          bg-white dark:bg-gray-850
           rounded-lg
           border
         "
@@ -30,7 +30,7 @@
           <p class="text-base">{{ message }}</p>
           <button
             v-if="actionText"
-            class="text-sm text-gray-700 hover:text-gray-800"
+            class="text-sm text-gray-700 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-200"
           >
             {{ actionText }}
           </button>
@@ -41,9 +41,9 @@
             w-4
             h-4
             ms-auto
-            text-gray-600
+            text-gray-600 dark:text-gray-400
             cursor-pointer
-            hover:text-gray-800
+            hover:text-gray-800 dark:hover:text-gray-200
           "
           @click="closeToast"
         />

src/components/TwoColumnForm.vue

@@ -16,13 +16,13 @@
       <div
         v-else
         :key="`${df.fieldname}-regular`"
-        class="grid items-center border-b"
+        class="grid items-center border-b dark:border-gray-800"
         :style="{
           ...style,
           height: getFieldHeight(df),
         }"
       >
-        <div class="ps-4 flex text-gray-600">
+        <div class="ps-4 flex text-gray-600 dark:text-gray-400">
           {{ df.label }}
         </div>
 

src/pages/CommonForm/CommonForm.vue

@@ -74,18 +74,18 @@
       }}</Button>
     </template>
     <template #body>
-      <FormHeader :form-title="title" class="sticky top-0 bg-white border-b">
+      <FormHeader :form-title="title" class="sticky top-0 bg-white dark:bg-gray-890 border-b dark:border-gray-800">
         <StatusPill v-if="hasDoc" :doc="doc" />
       </FormHeader>
 
       <!-- Section Container -->
-      <div v-if="hasDoc" class="overflow-auto custom-scroll">
+      <div v-if="hasDoc" class="overflow-auto custom-scroll custom-scroll-thumb1">
         <CommonFormSection
           v-for="([n, fields], idx) in activeGroup.entries()"
           :key="n + 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 && n !== t`Default`"
           :title="n"
           :fields="fields"
@@ -106,11 +106,11 @@
           pb-4
           flex
           gap-8
-          border-t
+          border-t dark:border-gray-800
           flex-shrink-0
           sticky
           bottom-0
-          bg-white
+          bg-white dark:bg-gray-875
         "
       >
         <div
@@ -119,8 +119,8 @@
           class="text-sm cursor-pointer"
           :class="
             key === activeTab
-              ? 'text-gray-900 font-semibold border-t-2 border-gray-800'
-              : 'text-gray-700'
+              ? 'text-gray-900 dark:text-gray-25 font-semibold border-t-2 border-gray-800 dark:border-gray-100'
+              : 'text-gray-700 dark:text-gray-200 '
           "
           :style="{
             paddingTop: key === activeTab ? 'calc(1rem - 2px)' : '1rem',

src/pages/CommonForm/CommonFormSection.vue

@@ -6,13 +6,13 @@
       :class="[collapsed ? '' : 'mb-4', collapsible ? 'cursor-pointer' : '']"
       @click="toggleCollapsed"
     >
-      <h2 class="text-base text-gray-900 font-semibold">
+      <h2 class="text-base text-gray-900 dark:text-gray-25 font-semibold">
         {{ title }}
       </h2>
       <feather-icon
         v-if="collapsible"
         :name="collapsed ? 'chevron-up' : 'chevron-down'"
-        class="w-4 h-4 text-gray-600"
+        class="w-4 h-4 text-gray-600 dark:text-gray-400"
       />
     </div>
     <div v-if="!collapsed" class="grid gap-4 gap-x-8 grid-cols-2">

src/pages/CommonForm/LinkedEntries.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-quick-edit bg-white border-l">
+  <div class="w-quick-edit bg-white dark:bg-gray-850 border-l dark:border-gray-800 overflow-y-auto custom-scroll custom-scroll-thumb2">
     <!-- Page Header -->
     <div
       class="
@@ -10,7 +10,7 @@
         h-row-largest
         sticky
         top-0
-        bg-white
+        bg-white dark:bg-gray-850
       "
       style="z-index: 1"
     >
@@ -18,7 +18,7 @@
         <Button :icon="true" @click="$emit('close')">
           <feather-icon name="x" class="w-4 h-4" />
         </Button>
-        <p class="text-xl font-semibold text-gray-600">
+        <p class="text-xl font-semibold text-gray-600 dark:text-gray-400">
           {{ t`Linked Entries` }}
         </p>
       </div>
@@ -27,17 +27,16 @@
     <!-- Linked Entry List -->
     <div
       v-if="sequence.length"
-      class="w-full overflow-y-auto custom-scroll border-t"
-      style="height: calc(100vh - var(--h-row-largest) - 1px)"
+      class="w-full overflow-y-auto custom-scroll border-t dark:border-gray-800"
     >
-      <div v-for="sn of sequence" :key="sn" class="border-b p-4">
+      <div v-for="sn of sequence" :key="sn" class="border-b dark:border-gray-800 p-4 overflow-auto">
         <!-- Header with count and schema label -->
         <div
           class="flex justify-between cursor-pointer"
           :class="entries[sn].collapsed ? '' : 'pb-4'"
           @click="entries[sn].collapsed = !entries[sn].collapsed"
         >
-          <h2 class="text-base text-gray-600 font-semibold select-none">
+          <h2 class="text-base text-gray-600 dark:text-gray-400 font-semibold select-none">
             {{ fyo.schemaMap[sn]?.label ?? sn
             }}<span class="font-normal">{{
               ` – ${entries[sn].details.length}`
@@ -45,30 +44,30 @@
           </h2>
           <feather-icon
             :name="entries[sn].collapsed ? 'chevron-up' : 'chevron-down'"
-            class="w-4 h-4 text-gray-600"
+            class="w-4 h-4 text-gray-600 dark:text-gray-400"
           />
         </div>
 
         <!-- Entry list -->
         <div
           v-show="!entries[sn].collapsed"
-          class="entry-container rounded-md border overflow-hidden"
+          class="entry-container rounded-md border dark:border-gray-800 overflow-hidden"
         >
           <!-- Entry -->
           <div
             v-for="e of entries[sn].details"
             :key="String(e.name) + sn"
-            class="p-2 text-sm cursor-pointer hover:bg-gray-50"
+            class="p-2 text-sm cursor-pointer border-b last:border-0 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-875"
             @click="routeTo(sn, String(e.name))"
           >
             <div class="flex justify-between">
               <!-- Name -->
-              <p class="font-semibold">
+              <p class="font-semibold dark:text-gray-25">
                 {{ e.name }}
               </p>
 
               <!-- Date -->
-              <p v-if="e.date" class="text-xs text-gray-600">
+              <p v-if="e.date" class="text-xs text-gray-600 dark:text-gray-400">
                 {{ fyo.format(e.date, 'Date') }}
               </p>
             </div>
@@ -153,7 +152,7 @@
         </div>
       </div>
     </div>
-    <p v-else class="p-4 text-sm text-gray-600">
+    <p v-else class="p-4 text-sm text-gray-600 dark:text-gray-400">
       {{ t`No linked entries found` }}
     </p>
   </div>
@@ -304,12 +303,6 @@ const linkEntryDisplayFields: Record<string, string[]> = {
 };
 </script>
 <style scoped>
-.entry-container > div {
-  @apply border-b;
-}
-.entry-container > div:last-child {
-  @apply border-0;
-}
 
 .pill-container:empty {
   display: none;

src/pages/CommonForm/RowEditForm.vue

@@ -1,9 +1,9 @@
 <template>
   <div
-    class="border-s h-full overflow-auto w-quick-edit bg-white custom-scroll"
+    class="border-s dark:border-gray-800 h-full overflow-auto w-quick-edit bg-white dark:bg-gray-890 custom-scroll custom-scroll-thumb2"
   >
     <!-- Row Edit Tool bar -->
-    <div class="sticky top-0 border-b bg-white" style="z-index: 1">
+    <div class="sticky top-0 border-b dark:border-gray-800 bg-white dark:bg-gray-890" style="z-index: 1">
       <div class="flex items-center justify-between px-4 h-row-largest">
         <!-- Close Button -->
         <Button :icon="true" @click="$emit('close')">
@@ -25,7 +25,7 @@
         </div>
       </div>
       <FormHeader
-        class="border-t"
+        class="border-t dark:border-gray-800"
         :form-title="t`Row ${index + 1}`"
         :form-sub-title="fieldlabel"
       />

src/pages/ListView/List.vue

@@ -31,7 +31,7 @@
     <!-- Data Rows -->
     <div
       v-if="dataSlice.length !== 0"
-      class="overflow-y-auto dark:dark-scroll custom-scroll"
+      class="overflow-y-auto dark:dark-scroll custom-scroll custom-scroll-thumb1"
     >
       <div v-for="(row, i) in dataSlice" :key="(row.name as string)">
         <!-- Row Content -->

src/pages/QuickEditForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="border-s h-full overflow-auto w-quick-edit bg-white">
+  <div class="border-s dark:border-gray-800 h-full overflow-auto w-quick-edit bg-white dark:bg-gray-850">
     <!-- Quick edit Tool bar -->
     <div
       class="
@@ -10,7 +10,7 @@
         h-row-largest
         sticky
         top-0
-        bg-white
+        bg-white dark:bg-gray-850
       "
       style="z-index: 1"
     >
@@ -24,7 +24,6 @@
         v-if="doc?.canSave"
         :icon="true"
         type="primary"
-        class="text-white text-xs"
         @click="sync"
       >
         {{ t`Save` }}
@@ -33,7 +32,6 @@
         v-else-if="doc?.canSubmit"
         :icon="true"
         type="primary"
-        class="text-white text-xs"
         @click="submit"
       >
         {{ t`Submit` }}
@@ -43,7 +41,7 @@
     <!-- Name and image -->
     <div
       v-if="doc && (titleField || imageField)"
-      class="items-center border-b border-t"
+      class="items-center border-b border-t dark:border-gray-800"
       :class="imageField ? 'grid' : 'flex justify-center'"
       :style="{
         height: `calc(var(--h-row-mid) * ${!!imageField ? '2 + 1px' : '1'})`,

src/pages/Settings/Settings.vue

@@ -9,18 +9,18 @@
       <FormHeader
         :form-title="tabLabels[activeTab] ?? ''"
         :form-sub-title="t`Settings`"
-        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>
 
       <!-- Section Container -->
-      <div v-if="doc" class="overflow-auto custom-scroll">
+      <div v-if="doc" class="overflow-auto custom-scroll custom-scroll-thumb1">
         <CommonFormSection
           v-for="([name, fields], idx) in activeGroup.entries()"
           :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"
@@ -39,11 +39,11 @@
           pb-4
           flex
           gap-8
-          border-t
+          border-t dark:border-gray-800
           flex-shrink-0
           sticky
           bottom-0
-          bg-white
+          bg-white dark:bg-gray-890
         "
       >
         <div
@@ -52,8 +52,8 @@
           class="text-sm cursor-pointer"
           :class="
             key === activeTab
-              ? 'text-gray-900 font-semibold border-t-2 border-gray-800'
-              : 'text-gray-700'
+              ? 'text-gray-900 dark:text-gray-25 font-semibold border-t-2 border-gray-800 dark:border-gray-100'
+              : 'text-gray-700 dark:text-gray-200 '
           "
           :style="{
             paddingTop: key === activeTab ? 'calc(1rem - 2px)' : '1rem',

src/styles/index.css

@@ -27,7 +27,9 @@ html {
 input[type='number']::-webkit-inner-spin-button {
   appearance: none;
 }
-
+input[type="date"]::-webkit-calendar-picker-indicator {
+background-color:  theme('colors.gray.900');
+}
 .window-drag {
   -webkit-app-region: drag;
 }
@@ -167,6 +169,7 @@ input[type='number']::-webkit-inner-spin-button {
   background: theme('colors.gray.200');
 }
 
+
 .dark .custom-scroll::-webkit-scrollbar-track:vertical {
   border-left-color: theme('colors.gray.800');
 }
@@ -175,13 +178,22 @@ input[type='number']::-webkit-inner-spin-button {
   border-top-color: theme('colors.gray.800');
 }
 
-.dark .custom-scroll::-webkit-scrollbar-thumb {
+.dark .custom-scroll-thumb1::-webkit-scrollbar-thumb {
   background: theme('colors.gray.850');
 }
 
-.dark .custom-scroll::-webkit-scrollbar-thumb:hover {
+.dark .custom-scroll-thumb1::-webkit-scrollbar-thumb:hover {
   background: theme('colors.gray.800');
 }
+
+.dark .custom-scroll-thumb2::-webkit-scrollbar-thumb {
+  background: theme('colors.gray.800');
+}
+
+.dark .custom-scroll-thumb2::-webkit-scrollbar-thumb:hover {
+  background: theme('colors.gray.875');
+}
+
 /* 
   Transitions
  */

tailwind.config.js

@@ -76,6 +76,7 @@ module.exports = {
       'dark',
     ],
     display: ['group-hover'],
+    borderWidth:['last'],
     fontWeight: ['dark'],
   },
   plugins: [require('tailwindcss-rtl')],