fix dark mode in roles modal and send modal

resources/scripts/admin/components/currency-exchange-rate/ExchangeRateBulkUpdate.vue

@@ -50,21 +50,11 @@
           </BaseInputGroup>
         </template>
       </ValidateEach>
-      <div
+      <BaseModalFooter>
-        slot="footer"
-        class="
-          z-0
-          flex
-          justify-end
-          mt-4
-          pt-4
-          border-t border-gray-200 border-solid border-modal-bg
-        "
-      >
         <BaseButton :loading="isSaving" variant="primary" type="submit">
           {{ $t('general.save') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseCard>
 </template>

resources/scripts/admin/components/modal-components/BackupModal.vue

@@ -57,9 +57,7 @@
           </BaseInputGroup>
         </BaseInputGrid>
       </div>
-      <div
+      <BaseModalFooter>
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
         <BaseButton
           class="mr-3"
           variant="primary-outline"
@@ -84,7 +82,7 @@
           </template>
           {{ $t('general.create') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/CategoryModal.vue

@@ -47,15 +47,7 @@
         </BaseInputGrid>
       </div>
 
-      <div
+      <BaseModalFooter>
-        class="
-          z-0
-          flex
-          justify-end
-          p-4
-          border-t border-gray-200 border-solid border-modal-bg
-        "
-      >
         <BaseButton
           type="button"
           variant="primary-outline"
@@ -80,7 +72,7 @@
           </template>
           {{ categoryStore.isEdit ? $t('general.update') : $t('general.save') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/CompanyModal.vue

@@ -116,7 +116,7 @@
         </BaseInputGrid>
       </div>
 
-      <div class="z-0 flex justify-end p-4 bg-gray-50 border-modal-bg">
+       <BaseModalFooter>
         <BaseButton
           class="mr-3 text-sm"
           variant="primary-outline"
@@ -141,7 +141,7 @@
           </template>
           {{ $t('general.save') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/CustomerModal.vue

@@ -425,9 +425,7 @@
         </BaseTabGroup>
       </div>
 
-      <div
+      <BaseModalFooter>
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
         <BaseButton
           class="mr-3 text-sm"
           type="button"
@@ -447,7 +445,7 @@
           </template>
           {{ $t('general.save') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/DeleteCompanyModal.vue

@@ -38,7 +38,7 @@
         </BaseInputGroup>
       </div>
 
-      <div class="z-0 flex justify-end p-4 bg-gray-50 border-modal-bg">
+      <BaseModalFooter>
         <BaseButton
           class="mr-3 text-sm"
           variant="primary-outline"
@@ -63,7 +63,7 @@
           </template>
           {{ $t('general.delete') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/ExchangeRateProviderModal.vue

@@ -150,9 +150,7 @@
           @Remove="removeUsedSelectedCurrencies"
         />
       </div>
-      <div
+      <BaseModalFooter>
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
         <BaseButton
           class="mr-3"
           variant="primary-outline"
@@ -179,7 +177,7 @@
             exchangeRateStore.isEdit ? $t('general.update') : $t('general.save')
           }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/FileDiskModal.vue

@@ -20,15 +20,7 @@
         @submit="createNewDisk"
       >
         <template #default="slotProps">
-          <div
+          <BaseModalFooter>
-            class="
-              z-0
-              flex
-              justify-end
-              p-4
-              border-t border-solid border-gray-light
-            "
-          >
             <BaseButton
               class="mr-3 text-sm"
               variant="primary-outline"
@@ -52,7 +44,7 @@
 
               {{ $t('general.save') }}
             </BaseButton>
-          </div>
+          </BaseModalFooter>
         </template>
       </component>
     </div>

resources/scripts/admin/components/modal-components/ItemModal.vue

@@ -89,9 +89,7 @@
             </BaseInputGroup>
           </BaseInputGrid>
         </div>
-        <div
+        <BaseModalFooter>
-          class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-        >
           <BaseButton
             class="mr-3"
             variant="primary-outline"
@@ -111,7 +109,7 @@
             </template>
             {{ itemStore.isEdit ? $t('general.update') : $t('general.save') }}
           </BaseButton>
-        </div>
+        </BaseModalFooter>
       </form>
     </div>
   </BaseModal>

resources/scripts/admin/components/modal-components/ItemUnitModal.vue

@@ -31,15 +31,7 @@
         </BaseInputGroup>
       </div>
 
-      <div
+      <BaseModalFooter>
-        class="
-          z-0
-          flex
-          justify-end
-          p-4
-          border-t border-gray-200 border-solid border-modal-bg
-        "
-      >
         <BaseButton
           type="button"
           variant="primary-outline"
@@ -66,7 +58,7 @@
             itemStore.isItemUnitEdit ? $t('general.update') : $t('general.save')
           }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/MailTestModal.vue

@@ -62,9 +62,7 @@
           </BaseInputGroup>
         </BaseInputGrid>
       </div>
-      <div
+     <BaseModalFooter>
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
         <BaseButton
           variant="primary-outline"
           type="button"
@@ -84,7 +82,7 @@
           </template>
           {{ $t('general.send') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/NoteModal.vue

@@ -63,16 +63,7 @@
           </BaseInputGroup>
         </BaseInputGrid>
       </div>
-      <div
+     <BaseModalFooter>
-        class="
-          z-0
-          flex
-          justify-end
-          px-4
-          py-4
-          border-t border-solid border-gray-light
-        "
-      >
         <BaseButton
           class="mr-2"
           variant="primary-outline"
@@ -93,7 +84,7 @@
           </template>
           {{ noteStore.isEdit ? $t('general.update') : $t('general.save') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/PaymentModeModal.vue

@@ -29,9 +29,7 @@
         </BaseInputGroup>
       </div>
 
-      <div
+      <BaseModalFooter>
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
         <BaseButton
           variant="primary-outline"
           class="mr-3"
@@ -56,7 +54,7 @@
               : $t('general.save')
           }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/RolesModal.vue

@@ -72,7 +72,7 @@
         </div>
       </div>
 
-      <div class="border-t border-gray-200 py-3">
+      <div class="border-t border-gray-200 dark:border-gray-600 py-3">
         <div
           class="
             grid grid-cols-1
@@ -89,7 +89,7 @@
             :key="gIndex"
             class="flex flex-col space-y-1"
           >
-            <p class="text-sm text-gray-500 border-b border-gray-200 pb-1 mb-2">
+            <p class="text-sm text-gray-500 dark:text-gray-200 border-b dark:border-gray-600 pb-1 mb-2">
               {{ gIndex }}
             </p>
             <div
@@ -116,15 +116,7 @@
           </span>
         </div>
       </div>
-      <div
+      <BaseModalFooter>
-        class="
-          z-0
-          flex
-          justify-end
-          p-4
-          border-t border-solid border--200 border-modal-bg
-        "
-      >
         <BaseButton
           class="mr-3 text-sm"
           variant="primary-outline"
@@ -144,7 +136,7 @@
           </template>
           {{ !roleStore.isEdit ? $t('general.save') : $t('general.update') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/SelectTemplateModal.vue

@@ -70,7 +70,7 @@
       </div>
     </div>
 
-    <div class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid">
+    <BaseModalFooter>
       <BaseButton class="mr-3" variant="primary-outline" @click="closeModal">
         {{ $t('general.cancel') }}
       </BaseButton>
@@ -80,7 +80,7 @@
         </template>
         {{ $t('general.choose') }}
       </BaseButton>
-    </div>
+    </BaseModalFooter>
   </BaseModal>
 </template>
 

resources/scripts/admin/components/modal-components/SendEstimateModal.vue

@@ -62,9 +62,7 @@
           </BaseInputGroup>
         </BaseInputGrid>
       </div>
-      <div
+      <BaseModalFooter>
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
         <BaseButton
           class="mr-3"
           variant="primary-outline"
@@ -85,7 +83,7 @@
           <BaseIcon v-if="!isLoading" name="PhotographIcon" class="h-5 mr-2" />
           {{ $t('general.preview') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
     <div v-else>
       <div class="my-6 mx-4 border border-gray-200 relative">
@@ -106,9 +104,7 @@
         ></iframe>
       </div>
 
-      <div
+      <BaseModalFooter>
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
         <BaseButton
           class="mr-3"
           variant="primary-outline"
@@ -127,7 +123,7 @@
           <BaseIcon v-if="!isLoading" name="PaperAirplaneIcon" class="mr-2" />
           {{ $t('general.send') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </div>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/SendInvoiceModal.vue

@@ -65,9 +65,7 @@
           </BaseInputGroup>
         </BaseInputGrid>
       </div>
-      <div
+      <BaseModalFooter>
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
         <BaseButton
           class="mr-3"
           variant="primary-outline"
@@ -93,7 +91,7 @@
           </template>
           {{ $t('general.preview') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
     <div v-else>
       <div class="my-6 mx-4 border border-gray-200 relative">
@@ -114,9 +112,7 @@
           style="min-height: 500px"
         ></iframe>
       </div>
-      <div
+      <BaseModalFooter>
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
         <BaseButton
           class="mr-3"
           variant="primary-outline"
@@ -140,7 +136,7 @@
           />
           {{ $t('general.send') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </div>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/SendPaymentModal.vue

@@ -65,9 +65,7 @@
           </BaseInputGroup>
         </BaseInputGrid>
       </div>
-      <div
+      <BaseModalFooter>
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
         <BaseButton
           class="mr-3"
           variant="primary-outline"
@@ -93,7 +91,7 @@
           </template>
           {{ $t('general.preview') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
     <div v-else>
       <div class="my-6 mx-4 border border-gray-200 relative">
@@ -114,9 +112,7 @@
           style="min-height: 500px"
         ></iframe>
       </div>
-      <div
+      <BaseModalFooter>
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
         <BaseButton
           class="mr-3"
           variant="primary-outline"
@@ -140,7 +136,7 @@
           />
           {{ $t('general.send') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </div>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/TaxTypeModal.vue

@@ -90,15 +90,7 @@
           </BaseInputGroup>
         </BaseInputGrid>
       </div>
-      <div
+      <BaseModalFooter>
-        class="
-          z-0
-          flex
-          justify-end
-          p-4
-          border-t border-solid border--200 border-modal-bg
-        "
-      >
         <BaseButton
           class="mr-3 text-sm"
           variant="primary-outline"
@@ -122,7 +114,7 @@
           </template>
           {{ taxTypeStore.isEdit ? $t('general.update') : $t('general.save') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/TaxationAddressModal.vue

@@ -87,9 +87,7 @@
         </BaseInputGrid>
       </div>
 
-      <div
+      <BaseModalFooter>
-        class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
-      >
         <BaseButton
           class="mr-3 text-sm"
           type="button"
@@ -109,7 +107,7 @@
           </template>
           {{ $t('general.save') }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/custom-fields/CustomFieldModal.vue

@@ -172,15 +172,7 @@
         </div>
       </div>
 
-      <div
+      <BaseModalFooter>
-        class="
-          z-0
-          flex
-          justify-end
-          p-4
-          border-t border-solid border-gray-light border-modal-bg
-        "
-      >
         <BaseButton
           class="mr-3"
           type="button"
@@ -207,7 +199,7 @@
             !customFieldStore.isEdit ? $t('general.save') : $t('general.update')
           }}
         </BaseButton>
-      </div>
+      </BaseModalFooter>
     </form>
   </BaseModal>
 </template>

resources/scripts/admin/components/modal-components/disks/DoSpacesDisk.vue

@@ -153,7 +153,7 @@
           <BaseSwitch v-model="set_as_default" class="flex" />
         </div>
         <div class="ml-4 right">
-          <p class="p-0 mb-1 text-base leading-snug text-black box-title">
+          <p class="p-0 mb-1 text-base leading-snug text-black dark:text-white box-title">
             {{ $t('settings.disk.is_default') }}
           </p>
         </div>

resources/scripts/admin/components/modal-components/disks/DropboxDisk.vue

@@ -132,7 +132,7 @@
           <BaseSwitch v-model="set_as_default" class="flex" />
         </div>
         <div class="ml-4 right">
-          <p class="p-0 mb-1 text-base leading-snug text-black box-title">
+          <p class="p-0 mb-1 text-base leading-snug text-black dark:text-white box-title">
             {{ $t('settings.disk.is_default') }}
           </p>
         </div>

resources/scripts/admin/components/modal-components/disks/LocalDisk.vue

@@ -63,7 +63,7 @@
         </div>
 
         <div class="ml-4 right">
-          <p class="p-0 mb-1 text-base leading-snug text-black box-title">
+          <p class="p-0 mb-1 text-base leading-snug text-black dark:text-white box-title">
             {{ $t('settings.disk.is_default') }}
           </p>
         </div>

resources/scripts/admin/components/modal-components/disks/S3Disk.vue

@@ -134,7 +134,7 @@
           <BaseSwitch v-model="set_as_default" class="flex" />
         </div>
         <div class="ml-4 right">
-          <p class="p-0 mb-1 text-base leading-snug text-black box-title">
+          <p class="p-0 mb-1 text-base leading-snug text-black dark:text-white box-title">
             {{ $t('settings.disk.is_default') }}
           </p>
         </div>

resources/scripts/components/base/BaseModal.vue

@@ -29,8 +29,21 @@
             leave-to="opacity-0"
           >
             <DialogOverlay
-              class="fixed inset-0 transition-opacity bg-gray-700 bg-opacity-25"
+              class="
-            />
+              fixed
+              inset-0
+              transition-opacity
+              bg-gray-700
+              bg-opacity-25
+              dark:backdrop-blur-sm
+              dark:bg-gray-900/80
+              "
+            >
+              <BaseDarkHighlight
+                class="!bg-highlight/[.17] !top-1/2 -translate-y-1/2 mt-5 h-96"
+                :class="modalSize"
+              />
+            </DialogOverlay>
           </TransitionChild>
 
           <!-- This element is to trick the browser into centering the modal contents. -->
@@ -61,7 +74,11 @@
               my-4
               ${modalSize}
               sm:w-full
-              border-t-8 border-solid rounded shadow-xl  border-primary-500`"
+              dark:shadow-glass
+              dark:border
+              dark:border-white/10
+              dark:bg-gray-800/90
+              border-t-8 border-solid rounded shadow-xl border-primary-500`"
             >
               <div
                 v-if="hasHeaderSlot"
@@ -74,6 +91,8 @@
                   text-lg
                   font-medium
                   text-black
+                  dark:text-white
+                  dark:border-gray-600
                   border-b border-gray-200 border-solid
                 "
               >

resources/scripts/components/base/BaseModalFooter.vue

@@ -0,0 +1,14 @@
+<template>
+  <div
+    class="
+      z-0
+      flex
+      justify-end
+      p-4
+      border-t border-gray-200 border-solid
+      dark:border-gray-600
+    "
+  >
+    <slot />
+  </div>
+</template>

resources/scripts/components/base/base-editor/BaseEditor.vue

@@ -16,15 +16,13 @@
       text-left
       bg-white
       border border-gray-200
-      dark:border-gray-600
       rounded-md
       min-h-[200px]
       overflow-hidden
-      dark:bg-gray-700 dark:text-white
     "
   >
     <div v-if="editor" class="editor-content">
-      <div class="flex justify-end p-2 border-b border-gray-200 dark:border-gray-600 md:hidden">
+      <div class="flex justify-end p-2 border-b border-gray-200 md:hidden">
         <BaseDropdown width-class="w-48">
           <template #activator>
             <div
@@ -44,7 +42,7 @@
               <dots-vertical-icon class="w-6 h-6 text-gray-600" />
             </div>
           </template>
-          <div class="flex flex-wrap space-x-1 dark:text-white">
+          <div class="flex flex-wrap space-x-1">
             <span
               class="
                 flex
@@ -55,9 +53,8 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
-                dark:hover:bg-gray-800
               "
-              :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('bold') }"
+              :class="{ 'bg-gray-200': editor.isActive('bold') }"
               @click="editor.chain().focus().toggleBold().run()"
             >
               <bold-icon class="h-3 cursor-pointer fill-current" />
@@ -72,9 +69,8 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
-                dark:hover:bg-gray-800
               "
-              :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('italic') }"
+              :class="{ 'bg-gray-200': editor.isActive('italic') }"
               @click="editor.chain().focus().toggleItalic().run()"
             >
               <italic-icon class="h-3 cursor-pointer fill-current" />
@@ -89,9 +85,8 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
-                dark:hover:bg-gray-800
               "
-              :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('strike') }"
+              :class="{ 'bg-gray-200': editor.isActive('strike') }"
               @click="editor.chain().focus().toggleStrike().run()"
             >
               <strikethrough-icon class="h-3 cursor-pointer fill-current" />
@@ -106,9 +101,8 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
-                dark:hover:bg-gray-800
               "
-              :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('code') }"
+              :class="{ 'bg-gray-200': editor.isActive('code') }"
               @click="editor.chain().focus().toggleCode().run()"
             >
               <coding-icon class="h-3 cursor-pointer fill-current" />
@@ -123,9 +117,8 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
-                dark:hover:bg-gray-800
               "
-              :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('paragraph') }"
+              :class="{ 'bg-gray-200': editor.isActive('paragraph') }"
               @click="editor.chain().focus().setParagraph().run()"
             >
               <paragraph-icon class="h-3 cursor-pointer fill-current" />
@@ -140,10 +133,9 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
-                dark:hover:bg-gray-800
               "
               :class="{
-                'bg-gray-200 dark:bg-gray-900': editor.isActive('heading', { level: 1 }),
+                'bg-gray-200': editor.isActive('heading', { level: 1 }),
               }"
               @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
             >
@@ -159,10 +151,9 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
-                dark:hover:bg-gray-800
               "
               :class="{
-                'bg-gray-200 dark:bg-gray-900': editor.isActive('heading', { level: 2 }),
+                'bg-gray-200': editor.isActive('heading', { level: 2 }),
               }"
               @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
             >
@@ -178,10 +169,9 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
-                dark:hover:bg-gray-800
               "
               :class="{
-                'bg-gray-200 dark:bg-gray-900': editor.isActive('heading', { level: 3 }),
+                'bg-gray-200': editor.isActive('heading', { level: 3 }),
               }"
               @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
             >
@@ -198,9 +188,8 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
-                dark:hover:bg-gray-800
               "
-              :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('bulletList') }"
+              :class="{ 'bg-gray-200': editor.isActive('bulletList') }"
               @click="editor.chain().focus().toggleBulletList().run()"
             >
               <list-ul-icon class="h-3 cursor-pointer fill-current" />
@@ -215,9 +204,8 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
-                dark:hover:bg-gray-800
               "
-              :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('orderedList') }"
+              :class="{ 'bg-gray-200': editor.isActive('orderedList') }"
               @click="editor.chain().focus().toggleOrderedList().run()"
             >
               <list-icon class="h-3 cursor-pointer fill-current" />
@@ -232,9 +220,8 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
-                dark:hover:bg-gray-800
               "
-              :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('blockquote') }"
+              :class="{ 'bg-gray-200': editor.isActive('blockquote') }"
               @click="editor.chain().focus().toggleBlockquote().run()"
             >
               <quote-icon class="h-3 cursor-pointer fill-current" />
@@ -249,9 +236,8 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
-                dark:hover:bg-gray-800
               "
-              :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('codeBlock') }"
+              :class="{ 'bg-gray-200': editor.isActive('codeBlock') }"
               @click="editor.chain().focus().toggleCodeBlock().run()"
             >
               <code-block-icon class="h-3 cursor-pointer fill-current" />
@@ -266,9 +252,8 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
-                dark:hover:bg-gray-800
               "
-              :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('undo') }"
+              :class="{ 'bg-gray-200': editor.isActive('undo') }"
               @click="editor.chain().focus().undo().run()"
             >
               <undo-icon class="h-3 cursor-pointer fill-current" />
@@ -283,9 +268,8 @@
                 rounded-sm
                 cursor-pointer
                 hover:bg-gray-100
-                dark:hover:bg-gray-800
               "
-              :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('redo') }"
+              :class="{ 'bg-gray-200': editor.isActive('redo') }"
               @click="editor.chain().focus().redo().run()"
             >
               <redo-icon class="h-3 cursor-pointer fill-current" />
@@ -293,7 +277,7 @@
           </div>
         </BaseDropdown>
       </div>
-      <div class="hidden p-2 border-b border-gray-200 dark:border-gray-600 md:flex">
+      <div class="hidden p-2 border-b border-gray-200 md:flex">
         <div class="flex flex-wrap space-x-1">
           <span
             class="
@@ -305,9 +289,8 @@
               rounded-sm
               cursor-pointer
               hover:bg-gray-100
-              dark:hover:bg-gray-800
             "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('bold') }"
+            :class="{ 'bg-gray-200': editor.isActive('bold') }"
             @click="editor.chain().focus().toggleBold().run()"
           >
             <bold-icon class="h-3 cursor-pointer fill-current" />
@@ -322,9 +305,8 @@
               rounded-sm
               cursor-pointer
               hover:bg-gray-100
-              dark:hover:bg-gray-800
             "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('italic') }"
+            :class="{ 'bg-gray-200': editor.isActive('italic') }"
             @click="editor.chain().focus().toggleItalic().run()"
           >
             <italic-icon class="h-3 cursor-pointer fill-current" />
@@ -339,9 +321,8 @@
               rounded-sm
               cursor-pointer
               hover:bg-gray-100
-              dark:hover:bg-gray-800
             "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('strike') }"
+            :class="{ 'bg-gray-200': editor.isActive('strike') }"
             @click="editor.chain().focus().toggleStrike().run()"
           >
             <strikethrough-icon class="h-3 cursor-pointer fill-current" />
@@ -356,9 +337,8 @@
               rounded-sm
               cursor-pointer
               hover:bg-gray-100
-              dark:hover:bg-gray-800
             "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('code') }"
+            :class="{ 'bg-gray-200': editor.isActive('code') }"
             @click="editor.chain().focus().toggleCode().run()"
           >
             <coding-icon class="h-3 cursor-pointer fill-current" />
@@ -373,9 +353,8 @@
               rounded-sm
               cursor-pointer
               hover:bg-gray-100
-              dark:hover:bg-gray-800
             "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('paragraph') }"
+            :class="{ 'bg-gray-200': editor.isActive('paragraph') }"
             @click="editor.chain().focus().setParagraph().run()"
           >
             <paragraph-icon class="h-3 cursor-pointer fill-current" />
@@ -390,9 +369,8 @@
               rounded-sm
               cursor-pointer
               hover:bg-gray-100
-              dark:hover:bg-gray-800
             "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('heading', { level: 1 }) }"
+            :class="{ 'bg-gray-200': editor.isActive('heading', { level: 1 }) }"
             @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
           >
             H1
@@ -407,9 +385,8 @@
               rounded-sm
               cursor-pointer
               hover:bg-gray-100
-              dark:hover:bg-gray-800
             "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('heading', { level: 2 }) }"
+            :class="{ 'bg-gray-200': editor.isActive('heading', { level: 2 }) }"
             @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
           >
             H2
@@ -424,9 +401,8 @@
               rounded-sm
               cursor-pointer
               hover:bg-gray-100
-              dark:hover:bg-gray-800
             "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('heading', { level: 3 }) }"
+            :class="{ 'bg-gray-200': editor.isActive('heading', { level: 3 }) }"
             @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
           >
             H3
@@ -442,9 +418,8 @@
               rounded-sm
               cursor-pointer
               hover:bg-gray-100
-              dark:hover:bg-gray-800
             "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('bulletList') }"
+            :class="{ 'bg-gray-200': editor.isActive('bulletList') }"
             @click="editor.chain().focus().toggleBulletList().run()"
           >
             <list-ul-icon class="h-3 cursor-pointer fill-current" />
@@ -459,9 +434,8 @@
               rounded-sm
               cursor-pointer
               hover:bg-gray-100
-              dark:hover:bg-gray-800
             "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('orderedList') }"
+            :class="{ 'bg-gray-200': editor.isActive('orderedList') }"
             @click="editor.chain().focus().toggleOrderedList().run()"
           >
             <list-icon class="h-3 cursor-pointer fill-current" />
@@ -476,9 +450,8 @@
               rounded-sm
               cursor-pointer
               hover:bg-gray-100
-              dark:hover:bg-gray-800
             "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('blockquote') }"
+            :class="{ 'bg-gray-200': editor.isActive('blockquote') }"
             @click="editor.chain().focus().toggleBlockquote().run()"
           >
             <quote-icon class="h-3 cursor-pointer fill-current" />
@@ -493,9 +466,8 @@
               rounded-sm
               cursor-pointer
               hover:bg-gray-100
-              dark:hover:bg-gray-800
             "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('codeBlock') }"
+            :class="{ 'bg-gray-200': editor.isActive('codeBlock') }"
             @click="editor.chain().focus().toggleCodeBlock().run()"
           >
             <code-block-icon class="h-3 cursor-pointer fill-current" />
@@ -510,9 +482,8 @@
               rounded-sm
               cursor-pointer
               hover:bg-gray-100
-              dark:hover:bg-gray-800
             "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('undo') }"
+            :class="{ 'bg-gray-200': editor.isActive('undo') }"
             @click="editor.chain().focus().undo().run()"
           >
             <undo-icon class="h-3 cursor-pointer fill-current" />
@@ -527,9 +498,8 @@
               rounded-sm
               cursor-pointer
               hover:bg-gray-100
-              dark:hover:bg-gray-800
             "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive('redo') }"
+            :class="{ 'bg-gray-200': editor.isActive('redo') }"
             @click="editor.chain().focus().redo().run()"
           >
             <redo-icon class="h-3 cursor-pointer fill-current" />
@@ -544,9 +514,8 @@
               rounded-sm
               cursor-pointer
               hover:bg-gray-100
-              dark:hover:bg-gray-800
             "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive({ textAlign: 'left' }) }"
+            :class="{ 'bg-gray-200': editor.isActive({ textAlign: 'left' }) }"
             @click="editor.chain().focus().setTextAlign('left').run()"
           >
             <menu-alt2-icon class="h-5 cursor-pointer fill-current" />
@@ -561,9 +530,8 @@
               rounded-sm
               cursor-pointer
               hover:bg-gray-100
-              dark:hover:bg-gray-800
             "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive({ textAlign: 'right' }) }"
+            :class="{ 'bg-gray-200': editor.isActive({ textAlign: 'right' }) }"
             @click="editor.chain().focus().setTextAlign('right').run()"
           >
             <menu-alt3-icon class="h-5 cursor-pointer fill-current" />
@@ -578,10 +546,9 @@
               rounded-sm
               cursor-pointer
               hover:bg-gray-100
-              dark:hover:bg-gray-800
             "
             :class="{
-              'bg-gray-200 dark:bg-gray-900': editor.isActive({ textAlign: 'justify' }),
+              'bg-gray-200': editor.isActive({ textAlign: 'justify' }),
             }"
             @click="editor.chain().focus().setTextAlign('justify').run()"
           >
@@ -597,9 +564,8 @@
               rounded-sm
               cursor-pointer
               hover:bg-gray-100
-              dark:hover:bg-gray-800
             "
-            :class="{ 'bg-gray-200 dark:bg-gray-900': editor.isActive({ textAlign: 'center' }) }"
+            :class="{ 'bg-gray-200': editor.isActive({ textAlign: 'center' }) }"
             @click="editor.chain().focus().setTextAlign('center').run()"
           >
             <menu-center-icon class="h-5 cursor-pointer fill-current" />