feat: Printing and POS changed to darkmode

src/App.vue

@@ -1,7 +1,14 @@
 <template>
   <div
     id="app"
-    class="dark:bg-gray-900 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"
   >

src/components/Avatar.vue

@@ -14,7 +14,7 @@
         h-full
         items-center
         justify-center
-        text-white
+        text-white dark:text-gray-900
         w-full
         text-base
         uppercase

src/components/Controls/Attachment.vue

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

src/components/Controls/AutoComplete.vue

@@ -72,7 +72,7 @@
             <template #target>
               <feather-icon
                 name="chevron-right"
-                class="w-4 h-4 text-gray-600"
+                class="w-4 h-4 text-gray-600 dark:text-gray-400"
               />
             </template>
             <template #content>

src/components/Controls/Barcode.vue

@@ -8,7 +8,9 @@
       rounded
       px-2
       bg-gray-50
+      dark:bg-gray-890
       focus-within:bg-gray-100
+      dark:focus-within:bg-gray-900
     "
   >
     <input
@@ -20,7 +22,7 @@
     />
     <feather-icon
       name="maximize"
-      class="w-3 h-3 text-gray-600 cursor-text"
+      class="w-3 h-3 text-gray-600 dark:text-gray-400 cursor-text"
       @click="() => ($refs.scanner as HTMLInputElement).focus()"
     />
   </div>

src/components/Controls/Color.vue

@@ -19,7 +19,7 @@
             <span v-if="value">
               {{ selectedColorLabel }}
             </span>
-            <span v-else class="text-gray-400">
+            <span v-else class="text-gray-400 dark:text-gray-600">
               {{ inputPlaceholder }}
             </span>
           </div>

src/components/Controls/ExchangeRate.vue

@@ -1,18 +1,37 @@
 <template>
-  <div class="flex items-center bg-gray-50 rounded-md text-sm p-1 border">
+  <div
+    class="
+      flex
+      items-center
+      bg-gray-50
+      dark:bg-gray-890
+      rounded-md
+      text-sm
+      p-1
+      border
+    "
+  >
     <div
       class="rate-container"
-      :class="disabled ? 'bg-gray-100' : 'bg-gray-25'"
+      :class="
+        disabled
+          ? 'bg-gray-100 dark:bg-gray-850'
+          : 'bg-gray-25 dark:bg-gray-890'
+      "
     >
       <input v-model="fromValue" type="number" :disabled="disabled" min="0" />
       <p>{{ left }}</p>
     </div>
 
-    <p class="mx-1 text-gray-600">=</p>
+    <p class="mx-1 text-gray-600 dark:text-gray-400">=</p>
 
     <div
       class="rate-container"
-      :class="disabled ? 'bg-gray-100' : 'bg-gray-25'"
+      :class="
+        disabled
+          ? 'bg-gray-100 dark:bg-gray-850'
+          : 'bg-gray-25 dark:bg-gray-890'
+      "
     >
       <input
         type="number"
@@ -26,10 +45,22 @@
 
     <button
       v-if="!disabled"
-      class="bg-green-100 px-2 ms-1 -me-0.5 h-full border-s"
+      class="
+        bg-green-100
+        dark:bg-green-600
+        px-2
+        ms-1
+        -me-0.5
+        h-full
+        border-s
+        dark:border-gray-800
+      "
       @click="swap"
     >
-      <feather-icon name="refresh-cw" class="w-3 h-3 text-gray-600" />
+      <feather-icon
+        name="refresh-cw"
+        class="w-3 h-3 text-gray-600 dark:text-gray-400"
+      />
     </button>
   </div>
 </template>

src/components/Controls/Link.vue

@@ -97,7 +97,7 @@ export default {
           {
             component: markRaw({
               template:
-                '<span class="text-gray-600">{{ t`No results found` }}</span>',
+                '<span class="text-gray-600 dark:text-gray-400">{{ t`No results found` }}</span>',
             }),
             action: () => {},
             actionOnly: true,

src/components/Controls/Table.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="tableFields?.length">
-    <div v-if="showLabel" class="text-gray-600 text-sm mb-1">
+    <div v-if="showLabel" class="text-gray-600 dark:text-gray-400 text-sm mb-1">
       {{ df.label }}
     </div>
 

src/components/FilterDropdown.vue

@@ -34,7 +34,7 @@
                 class="flex items-center justify-between text-base gap-2"
               >
                 <div
-                  class="cursor-pointer w-4 h-4 flex items-center justify-center text-gray-600 dark:text-gray-500 hover:text-gray-800 dark:hover:text-gray-300 rounded-md group"
+                  class="cursor-pointer w-4 h-4 flex items-center justify-center text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-300 rounded-md group"
                 >
                   <span class="hidden group-hover:inline-block">
                     <feather-icon

src/components/FormContainer.vue

@@ -1,5 +1,13 @@
 <template>
-  <div class="flex bg-gray-25 dark:bg-gray-875 overflow-x-auto">
+  <div
+    class="
+      flex
+      bg-gray-25
+      dark:bg-gray-875
+      overflow-x-auto
+      custom-scroll custom-scroll-thumb1
+    "
+  >
     <div class="flex flex-1 flex-col">
       <!-- Page Header (Title, Buttons, etc) -->
       <PageHeader
@@ -16,7 +24,14 @@
 
       <!-- Common Form -->
       <div
-        class="flex flex-col self-center h-full overflow-auto bg-white dark:bg-gray-890"
+        class="
+          flex flex-col
+          self-center
+          h-full
+          overflow-auto
+          bg-white
+          dark:bg-gray-890
+        "
         :class="
           useFullWidth
             ? 'w-full border-t dark:border-gray-800'

src/components/HorizontalResizer.vue

@@ -1,7 +1,13 @@
 <template>
   <div
     ref="hr"
-    class="h-full bg-gray-300 transition-opacity hover:opacity-100"
+    class="
+      h-full
+      bg-gray-300
+      dark:bg-gray-700
+      transition-opacity
+      hover:opacity-100
+    "
     :class="resizing ? 'opacity-100' : 'opacity-0'"
     style="width: 3px; cursor: col-resize; margin-left: -3px"
     @mousedown="onMouseDown"
@@ -13,6 +19,7 @@
         px-1
         py-0.5
         border
+        dark:border-gray-800
         rounded-md
         shadow
         text-sm text-center

src/components/POS/FloatingLabelCurrencyInput.vue

@@ -17,9 +17,12 @@
         w-full
         font-medium
         text-gray-900
+        dark:text-gray-100
         bg-gray-25
+        dark:bg-gray-850
         rounded-lg
         border border-gray-200
+        dark:border-gray-800
         appearance-none
         focus:outline-none focus:ring-0
         peer

src/components/POS/FloatingLabelInputBase.vue

@@ -17,9 +17,12 @@
         w-full
         font-medium
         text-gray-900
+        dark:text-gray-100
         bg-gray-25
+        dark:bg-gray-850
         rounded-lg
         border border-gray-200
+        dark:border-gray-800
         appearance-none
         focus:outline-none focus:ring-0
         peer

src/components/POS/ItemsTable.vue

@@ -1,7 +1,18 @@
 <template>
   <Row
     :ratio="ratio"
-    class="border flex items-center mt-4 px-2 rounded-t-md text-gray-600 w-full"
+    class="
+      border
+      dark:border-gray-800
+      flex
+      items-center
+      mt-4
+      px-2
+      rounded-t-md
+      text-gray-600
+      dark:text-gray-400
+      w-full
+    "
   >
     <div
       v-for="df in tableFields"
@@ -26,10 +37,12 @@
       :border="true"
       class="
         border-b border-l border-r
+        dark:border-gray-800
         flex
         group
         h-row-mid
         hover:bg-gray-25
+        dark:bg-gray-890
         items-center
         justify-center
         px-2

src/components/POS/SelectedItemTable.vue

@@ -1,7 +1,18 @@
 <template>
   <Row
     :ratio="ratio"
-    class="border rounded-t px-2 text-gray-600 w-full flex items-center mt-4"
+    class="
+      border
+      dark:border-gray-800
+      rounded-t
+      px-2
+      text-gray-600
+      dark:text-gray-400
+      w-full
+      flex
+      items-center
+      mt-4
+    "
   >
     <div
       v-if="tableFields"
@@ -25,6 +36,7 @@
       :ratio="ratio"
       class="
         border
+        dark:border-gray-800
         w-full
         px-2
         py-2
@@ -33,6 +45,7 @@
         items-center
         justify-center
         hover:bg-gray-25
+        dark:bg-gray-890
       "
     >
       <SelectedItemRow

src/pages/CommonForm/LinkedEntries.vue

@@ -38,7 +38,13 @@
     <!-- Linked Entry List -->
     <div
       v-if="sequence.length"
-      class="w-full overflow-y-auto custom-scroll border-t dark:border-gray-800"
+      class="
+        w-full
+        overflow-y-auto
+        custom-scroll custom-scroll-thumb2
+        border-t
+        dark:border-gray-800
+      "
     >
       <div
         v-for="sn of sequence"

src/pages/CustomizeForm/CustomizeForm.vue

@@ -17,6 +17,7 @@
           w-full
           gap-2
           border-b
+          dark:border-gray-800
           p-4
         "
       >
@@ -27,7 +28,7 @@
             fieldtype: 'AutoComplete',
             options: customizableSchemas,
           }"
-          input-class="bg-transparent text-gray-900 text-base"
+          input-class="bg-transparent text-gray-900 dark:text-gray-100 text-base"
           class="w-40"
           :border="true"
           :value="formType"
@@ -38,7 +39,10 @@
         <p v-if="errorMessage" class="text-base ms-2 text-red-500">
           {{ errorMessage }}
         </p>
-        <p v-else-if="helpMessage" class="text-base ms-2 text-gray-700">
+        <p
+          v-else-if="helpMessage"
+          class="text-base ms-2 text-gray-700 dark:text-gray-300"
+        >
           {{ helpMessage }}
         </p>
       </div>

src/pages/Desk.vue

@@ -21,7 +21,15 @@ import { toggleSidebar } from 'src/utils/ui';
       />
     </Transition>
 
-    <div class="flex flex-1 overflow-y-hidden bg-white dark:bg-gray-875">
+    <div
+      class="
+        flex flex-1
+        overflow-y-hidden
+        custom-scroll custom-scroll-thumb1
+        bg-white
+        dark:bg-gray-875
+      "
+    >
       <router-view v-slot="{ Component }">
         <keep-alive>
           <component

src/pages/POS/ClosePOSShiftModal.vue

@@ -1,8 +1,12 @@
 <template>
   <Modal :open-modal="openModal" class="w-3/6 p-4">
-    <h1 class="text-xl font-semibold text-center pb-4">Close POS Shift</h1>
+    <h1 class="text-xl font-semibold text-center dark:text-gray-100 pb-4">
+      Close POS Shift
+    </h1>
 
-    <h2 class="mt-4 mb-2 text-lg font-medium">Closing Cash</h2>
+    <h2 class="mt-4 mb-2 text-lg font-medium dark:text-gray-100">
+      Closing Cash
+    </h2>
     <Table
       v-if="isValuesSeeded"
       class="text-base"
@@ -14,7 +18,9 @@
       @row-change="handleChange"
     />
 
-    <h2 class="mt-6 mb-2 text-lg font-medium">Closing Amounts</h2>
+    <h2 class="mt-6 mb-2 text-lg dark:text-gray-100 font-medium">
+      Closing Amounts
+    </h2>
     <Table
       v-if="isValuesSeeded"
       class="text-base"
@@ -28,7 +34,7 @@
 
     <div class="mt-4 grid grid-cols-2 gap-4 flex items-end">
       <Button
-        class="w-full py-5 bg-red-500"
+        class="w-full py-5 bg-red-500 dark:bg-red-700"
         @click="$emit('toggleModal', 'ShiftClose', false)"
       >
         <slot>
@@ -38,7 +44,10 @@
         </slot>
       </Button>
 
-      <Button class="w-full py-5 bg-green-500" @click="handleSubmit">
+      <Button
+        class="w-full py-5 bg-green-500 dark:bg-green-700"
+        @click="handleSubmit"
+      >
         <slot>
           <p class="uppercase text-lg text-white font-semibold">
             {{ t`Submit` }}

src/pages/POS/OpenPOSShiftModal.vue

@@ -1,10 +1,14 @@
 <template>
   <Modal class="w-3/6 p-4">
-    <h1 class="text-xl font-semibold text-center pb-4">Open POS Shift</h1>
+    <h1 class="text-xl font-semibold text-center dark:text-gray-100 pb-4">
+      Open POS Shift
+    </h1>
 
     <div class="grid grid-cols-12 gap-6">
       <div class="col-span-6">
-        <h2 class="text-lg font-medium">Cash In Denominations</h2>
+        <h2 class="text-lg font-medium dark:text-gray-100">
+          Cash In Denominations
+        </h2>
 
         <Table
           v-if="isValuesSeeded"
@@ -18,7 +22,7 @@
       </div>
 
       <div class="col-span-6">
-        <h2 class="text-lg font-medium">Opening Amount</h2>
+        <h2 class="text-lg font-medium dark:text-gray-100">Opening Amount</h2>
 
         <Table
           v-if="isValuesSeeded"
@@ -33,7 +37,10 @@
         />
 
         <div class="mt-4 grid grid-cols-2 gap-4 flex items-end">
-          <Button class="w-full py-5 bg-red-500" @click="$router.back()">
+          <Button
+            class="w-full py-5 bg-red-500 dark:bg-red-700"
+            @click="$router.back()"
+          >
             <slot>
               <p class="uppercase text-lg text-white font-semibold">
                 {{ t`Back` }}
@@ -41,7 +48,10 @@
             </slot>
           </Button>
 
-          <Button class="w-full py-5 bg-green-500" @click="handleSubmit">
+          <Button
+            class="w-full py-5 bg-green-500 dark:bg-green-700"
+            @click="handleSubmit"
+          >
             <slot>
               <p class="uppercase text-lg text-white font-semibold">
                 {{ t`Submit` }}

src/pages/POS/POS.vue

@@ -2,7 +2,10 @@
   <div class="">
     <PageHeader :title="t`Point of Sale`">
       <slot>
-        <Button class="bg-red-500" @click="toggleModal('ShiftClose')">
+        <Button
+          class="bg-red-500 dark:bg-red-700"
+          @click="toggleModal('ShiftClose')"
+        >
           <span class="font-medium text-white">{{ t`Close POS Shift ` }}</span>
         </Button>
       </slot>
@@ -30,10 +33,19 @@
     />
 
     <div
-      class="bg-gray-25 gap-2 grid grid-cols-12 p-4"
+      class="bg-gray-25 dark:bg-gray-875 gap-2 grid grid-cols-12 p-4"
       style="height: calc(100vh - var(--h-row-largest))"
     >
-      <div class="bg-white border col-span-5 rounded-md">
+      <div
+        class="
+          bg-white
+          dark:bg-gray-850
+          border
+          dark:border-gray-800
+          col-span-5
+          rounded-md
+        "
+      >
         <div class="rounded-md p-4 col-span-5">
           <div class="flex gap-x-2">
             <!-- Item Search -->
@@ -74,7 +86,18 @@
 
       <div class="col-span-7">
         <div class="flex flex-col gap-3" style="height: calc(100vh - 6rem)">
-          <div class="bg-white border grow h-full p-4 rounded-md">
+          <div
+            class="
+              bg-white
+              dark:bg-gray-850
+              border
+              dark:border-gray-800
+              grow
+              h-full
+              p-4
+              rounded-md
+            "
+          >
             <!-- Customer Search -->
             <Link
               v-if="sinvDoc.fieldMap"
@@ -88,7 +111,16 @@
             <SelectedItemTable />
           </div>
 
-          <div class="bg-white border p-4 rounded-md">
+          <div
+            class="
+              bg-white
+              dark:bg-gray-850
+              border
+              dark:border-gray-800
+              p-4
+              rounded-md
+            "
+          >
             <div class="w-full grid grid-cols-2 gap-y-2 gap-x-3">
               <div class="">
                 <div class="grid grid-cols-2 gap-2">
@@ -146,7 +178,7 @@
 
               <div class="">
                 <Button
-                  class="w-full bg-red-500 py-6"
+                  class="w-full bg-red-500 dark:bg-red-700 py-6"
                   :disabled="!sinvDoc.items?.length"
                   @click="clearValues"
                 >
@@ -158,7 +190,7 @@
                 </Button>
 
                 <Button
-                  class="mt-4 w-full bg-green-500 py-6"
+                  class="mt-4 w-full bg-green-500 dark:bg-green-700 py-6"
                   :disabled="disablePayButton"
                   @click="toggleModal('Payment', true)"
                 >

src/pages/PrintView/PrintView.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="flex flex-col flex-1 bg-gray-25">
-    <PageHeader :border="true" :title="t`Print View`" class="bg-white">
+  <div class="flex flex-col flex-1 bg-gray-25 dark:bg-gray-875">
+    <PageHeader :border="true" :title="t`Print View`">
       <AutoComplete
         v-if="templateList.length"
         :df="{
@@ -22,9 +22,12 @@
     </PageHeader>
 
     <!-- Template Display Area -->
-    <div class="overflow-auto custom-scroll p-4">
+    <div class="overflow-auto custom-scroll custom-scroll-thumb1 p-4">
       <!-- Display Hints -->
-      <div v-if="helperMessage" class="text-sm text-gray-700">
+      <div
+        v-if="helperMessage"
+        class="text-sm text-gray-700 dark:text-gray-300"
+      >
         {{ helperMessage }}
       </div>
 

src/pages/PrintView/ReportPrintView.vue

@@ -6,10 +6,20 @@
       </Button>
     </PageHeader>
 
-    <div class="outer-container">
+    <div
+      class="outer-container overflow-y-auto custom-scroll custom-scroll-thumb1"
+    >
       <!-- Report Print Display Area -->
       <div
-        class="p-4 bg-gray-25 overflow-auto flex justify-center custom-scroll"
+        class="
+          p-4
+          bg-gray-25
+          dark:bg-gray-890
+          overflow-auto
+          flex
+          justify-center
+          custom-scroll custom-scroll-thumb1
+        "
       >
         <!-- Report Print Display Container -->
         <ScaledContainer
@@ -57,8 +67,8 @@
       </div>
 
       <!-- Report Print Settings -->
-      <div v-if="report" class="border-l flex flex-col">
-        <p class="p-4 text-sm text-gray-600">
+      <div v-if="report" class="border-l dark:border-gray-800 flex flex-col">
+        <p class="p-4 text-sm text-gray-600 dark:text-gray-400">
           {{
             [
               t`Hidden values will be visible on Print on.`,
@@ -67,7 +77,7 @@
           }}
         </p>
         <!-- Row Selection -->
-        <div class="p-4 border-t">
+        <div class="p-4 border-t dark:border-gray-800">
           <Int
             :show-label="true"
             :border="true"
@@ -98,7 +108,7 @@
         </div>
 
         <!-- Size Selection -->
-        <div class="border-t p-4">
+        <div class="border-t dark:border-gray-800 p-4">
           <Select
             :show-label="true"
             :border="true"
@@ -121,11 +131,13 @@
         </div>
 
         <!-- Pick Columns -->
-        <div class="border-t p-4">
-          <h2 class="text-sm text-gray-600">
+        <div class="border-t dark:border-gray-800 p-4">
+          <h2 class="text-sm text-gray-600 dark:text-gray-400">
             {{ t`Pick Columns` }}
           </h2>
-          <div class="border rounded grid grid-cols-2 mt-1">
+          <div
+            class="border dark:border-gray-800 rounded grid grid-cols-2 mt-1"
+          >
             <Check
               v-for="(col, i) of report?.columns"
               :key="col.fieldname"

src/pages/SetupWizard/SetupWizard.vue

@@ -7,18 +7,32 @@
     <template #body>
       <FormHeader
         :form-title="t`Set up your organization`"
-        class="sticky top-0 bg-white dark:bg-gray-890 border-b dark:border-gray-800"
+        class="
+          sticky
+          top-0
+          bg-white
+          dark:bg-gray-890
+          border-b
+          dark:border-gray-800
+        "
       >
       </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="([name, fields], idx) in activeGroup.entries()"
           :key="name + idx"
           ref="section"
           class="p-4"
-          :class="idx !== 0 && activeGroup.size > 1 ? 'border-t dark:border-gray-800' : ''"
+          :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,19 +51,24 @@
           flex
           items-center
           justify-between
-          border-t dark:border-gray-800
+          border-t
+          dark:border-gray-800
           flex-shrink-0
           sticky
           bottom-0
-          bg-white dark:bg-gray-890
+          bg-white
+          dark:bg-gray-890
         "
       >
         <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 border dark:border-gray-800" @click="cancel">{{
-          t`Cancel`
-        }}</Button>
+        <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 border dark:border-gray-800"

src/pages/TemplateBuilder/PrintContainer.vue

@@ -26,19 +26,33 @@
       class="
         h-full
         bg-red-100
+        dark:bg-red-900 dark:bg-opacity-50
         w-full
         text-2xl text-gray-900
+        dark:text-gray-25
         flex flex-col
         gap-4
       "
     >
-      <h1 class="text-4xl font-bold text-red-500 p-4 border-b border-red-200">
+      <h1
+        class="
+          text-4xl
+          font-bold
+          text-red-500
+          dark:text-red-200
+          p-4
+          border-b border-red-200
+          dark:border-red-900
+        "
+      >
         {{ error.name }}
       </h1>
       <p class="px-4 font-semibold">{{ error.message }}</p>
-      <pre v-if="error.detail" class="px-4 text-xl text-gray-700">{{
-        error.detail
-      }}</pre>
+      <pre
+        v-if="error.detail"
+        class="px-4 text-xl text-gray-700 dark:text-gray-400"
+        >{{ error.detail }}</pre
+      >
     </div>
   </ScaledContainer>
 </template>

src/pages/TemplateBuilder/SetPrintSize.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="w-form">
     <FormHeader :form-title="t`Set Print Size`" />
-    <hr />
+    <hr class="dark:border-gray-800" />
     <div class="p-4 w-full flex flex-col gap-4">
-      <p class="text-base text-gray-900">
+      <p class="text-base text-gray-900 dark:text-gray-100">
         {{
           t`Select a pre-defined page size, or set a custom page size for your Print Template.`
         }}
@@ -34,7 +34,7 @@
         />
       </div>
     </div>
-    <div class="flex border-t p-4">
+    <div class="flex border-t dark:border-gray-800 p-4">
       <Button class="ml-auto" type="primary" @click="done">{{
         t`Done`
       }}</Button>

src/pages/TemplateBuilder/SetType.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="w-form">
     <FormHeader :form-title="t`Set Print Size`" />
-    <hr />
+    <hr class="dark:border-gray-800" />
     <div class="p-4 w-full flex flex-col gap-4">
-      <p class="text-base text-gray-900">
+      <p class="text-base text-gray-900 dark:text-gray-100">
         {{ t`Select the template type.` }}
       </p>
       <Select
@@ -14,7 +14,7 @@
         @change="typeChange"
       />
     </div>
-    <div class="flex border-t p-4">
+    <div class="flex border-t dark:border-gray-800 p-4">
       <Button class="ml-auto" type="primary" @click="done">{{
         t`Done`
       }}</Button>

src/pages/TemplateBuilder/TemplateBuilder.vue

@@ -34,7 +34,7 @@
     <!-- Template Builder Body -->
     <div
       v-if="doc"
-      class="w-full bg-gray-50 grid"
+      class="w-full bg-gray-50 dark:bg-gray-875 grid"
       :style="templateBuilderBodyStyles"
     >
       <!-- Template Display Area -->
@@ -43,7 +43,10 @@
         style="height: calc(100vh - var(--h-row-largest) - 1px)"
       >
         <!-- Template Container -->
-        <div v-if="canDisplayPreview" class="p-4 overflow-auto custom-scroll">
+        <div
+          v-if="canDisplayPreview"
+          class="p-4 overflow-auto custom-scroll custom-scroll-thumb1"
+        >
           <PrintContainer
             ref="printContainer"
             :print-schema-name="displayDoc!.schemaName"
@@ -56,7 +59,10 @@
         </div>
 
         <!-- Display Hints -->
-        <p v-else-if="helperMessage" class="text-sm text-gray-700 p-4">
+        <p
+          v-else-if="helperMessage"
+          class="text-sm text-gray-700 dark:text-gray-300 p-4"
+        >
           {{ helperMessage }}
         </p>
 
@@ -68,7 +74,9 @@
             bottom-0
             flex
             bg-white
+            dark:bg-gray-890
             border-t
+            dark:border-gray-800
             mt-auto
             flex-shrink-0
           "
@@ -76,7 +84,7 @@
           <!-- Entry Type -->
           <FormControl
             :title="fields.type.label"
-            class="w-40 border-r flex-shrink-0"
+            class="w-40 border-r dark:border-gray-800 flex-shrink-0"
             :df="fields.type"
             :border="false"
             :value="doc.get('type')"
@@ -88,7 +96,7 @@
           <Link
             v-if="doc.type"
             :title="displayDocField.label"
-            class="w-40 border-r flex-shrink-0"
+            class="w-40 border-r dark:border-gray-800 flex-shrink-0"
             :df="displayDocField"
             :border="false"
             :value="displayDoc?.name"
@@ -101,7 +109,9 @@
             v-if="canDisplayPreview"
             class="flex ml-auto gap-2 px-2 w-36 justify-between flex-shrink-0"
           >
-            <p class="text-sm text-gray-600 my-auto">{{ t`Display Scale` }}</p>
+            <p class="text-sm text-gray-600 dark:text-gray-400 my-auto">
+              {{ t`Display Scale` }}
+            </p>
             <input
               type="number"
               class="
@@ -134,7 +144,13 @@
 
       <!-- Template Panel -->
       <div
-        class="border-l bg-white flex flex-col"
+        class="
+          border-l
+          dark:border-gray-800
+          bg-white
+          dark:bg-gray-890
+          flex flex-col
+        "
         style="height: calc(100vh - var(--h-row-largest) - 1px)"
       >
         <!-- Template Editor -->
@@ -142,7 +158,7 @@
           <TemplateEditor
             v-if="typeof doc.template === 'string' && hints"
             ref="templateEditor"
-            class="overflow-auto custom-scroll h-full"
+            class="overflow-auto custom-scroll custom-scroll-thumb1 h-full"
             :initial-value="doc.template"
             :disabled="!doc.isCustom"
             :hints="hints"
@@ -157,9 +173,11 @@
             gap-2
             p-2
             text-sm text-gray-600
+            dark:text-gray-400
             items-center
             mt-auto
             border-t
+            dark:border-gray-800
           "
         >
           <ShortcutKeys :keys="applyChangesShortcut" :simple="true" />
@@ -169,7 +187,7 @@
         <!-- Value Key Hints Container -->
         <div
           v-if="hints"
-          class="border-t flex-shrink-0"
+          class="border-t dark:border-gray-800 flex-shrink-0"
           :class="templateChanged ? '' : 'mt-auto'"
         >
           <!-- Value Key Toggle -->
@@ -184,12 +202,14 @@
             "
             @click="toggleShowHints"
           >
-            <h2 class="text-base text-gray-900 font-semibold">
+            <h2
+              class="text-base text-gray-900 dark:text-gray-200 font-semibold"
+            >
               {{ t`Key Hints` }}
             </h2>
             <feather-icon
               :name="showHints ? 'chevron-up' : 'chevron-down'"
-              class="w-4 h-4 text-gray-600 resize-none"
+              class="w-4 h-4 text-gray-600 dark:text-gray-400 resize-none"
             />
           </div>
 
@@ -197,7 +217,13 @@
           <Transition name="hints">
             <div
               v-if="showHints"
-              class="overflow-auto custom-scroll p-2 border-t"
+              class="
+                overflow-auto
+                custom-scroll custom-scroll-thumb1
+                p-2
+                border-t
+                dark:border-gray-800
+              "
               style="max-height: 30vh"
             >
               <TemplateBuilderHint :hints="hints" />

src/pages/TemplateBuilder/TemplateBuilderHint.vue

@@ -1,11 +1,12 @@
 <template>
-  <div :class="level > 0 ? 'ms-2 ps-2 border-l' : ''">
+  <div :class="level > 0 ? 'ms-2 ps-2 border-l dark:border-gray-800' : ''">
     <template v-for="r of rows" :key="r.key">
       <div
         class="
           flex
           gap-2
           text-sm text-gray-600
+          dark:text-gray-400
           whitespace-nowrap
           overflow-auto
           no-scrollbar
@@ -14,15 +15,22 @@
         @click="r.collapsed = !r.collapsed"
       >
         <div class="">{{ getKey(r) }}</div>
-        <div v-if="!r.isCollapsible" class="font-semibold text-gray-800">
+        <div
+          v-if="!r.isCollapsible"
+          class="font-semibold text-gray-800 dark:text-gray-200"
+        >
           {{ r.value }}
         </div>
         <div
           v-else-if="Array.isArray(r.value)"
           class="
             text-blue-600
+            dark:text-blue-100
             bg-blue-100
-            border-white border
+            dark:bg-blue-600
+            border-white
+            dark:border-blue-600
+            border
             tracking-tighter
             rounded
             text-xs
@@ -35,8 +43,12 @@
           v-else
           class="
             text-pink-600
+            dark:text-pink-100
             bg-pink-100
-            border-white border
+            dark:bg-pink-600
+            border-white
+            dark:border-pink-600
+            border
             tracking-tighter
             rounded
             text-xs

src/pages/TemplateBuilder/TemplateEditor.vue

@@ -1,5 +1,8 @@
 <template>
-  <div ref="container" class="bg-white text-gray-900"></div>
+  <div
+    ref="container"
+    class="bg-white dark:bg-gray-875 text-gray-900 dark:text-gray-100"
+  ></div>
 </template>
 <script lang="ts">
 import { autocompletion, CompletionContext } from '@codemirror/autocomplete';
@@ -63,13 +66,12 @@ export default defineComponent({
       const highlightStyle = HighlightStyle.define([
         { tag: tags.typeName, color: uicolors.pink[600] },
         { tag: tags.angleBracket, color: uicolors.pink[600] },
-        { tag: tags.attributeName, color: uicolors.gray[600] },
-        { tag: tags.attributeValue, color: uicolors.blue[600] },
+        { tag: tags.attributeName, color: uicolors.gray[500] },
+        { tag: tags.attributeValue, color: uicolors.blue[500] },
         { tag: tags.comment, color: uicolors.gray[500], fontStyle: 'italic' },
-        { tag: tags.keyword, color: uicolors.pink[500] },
-        { tag: tags.variableName, color: uicolors.blue[700] },
-        { tag: tags.string, color: uicolors.pink[600] },
-        { tag: tags.content, color: uicolors.gray[700] },
+        { tag: tags.keyword, color: uicolors.orange[600] },
+        { tag: tags.variableName, color: uicolors.teal[600] },
+        { tag: tags.string, color: uicolors.blue[700] },
       ]);
       const completions = getCompletionsFromHints(this.hints ?? {});
 
@@ -207,7 +209,7 @@ function getCompletionOption(
 }
 
 .cm-gutter {
-  @apply bg-gray-50;
+  @apply bg-gray-50 dark:bg-gray-850;
 }
 
 .cm-gutters {
@@ -215,9 +217,14 @@ function getCompletionOption(
   border-right: 1px solid theme('colors.gray.200') !important;
 }
 
+.dark .cm-gutters {
+  border: none white !important;
+  border-right: 1px solid theme('colors.gray.800') !important;
+}
+
 .cm-activeLine,
 .cm-activeLineGutter {
-  background-color: #e5f3ff67 !important;
+  background-color: #72839216 !important;
 }
 
 .cm-tooltip-autocomplete {
@@ -226,9 +233,10 @@ function getCompletionOption(
   @apply rounded shadow-lg overflow-hidden text-gray-900;
 }
 
-.cm-tooltip-autocomplete [aria-selected] {
-  color: #334155 !important;
-  background-color: theme('colors.blue.100') !important;
+.dark .cm-tooltip-autocomplete {
+  background-color: black !important;
+  border: 1px solid theme('colors.gray.800') !important;
+  @apply rounded shadow-lg overflow-hidden text-gray-100;
 }
 
 .cm-panels {