Add dark mode with CSS custom property theme system

Define 13 semantic color tokens (surface, text, border, hover) with light/dark values in themes.css. Register with Tailwind via @theme inline. Migrate all 335 Vue files from hardcoded gray/white classes to semantic tokens. Add theme toggle (sun/moon/system) in user avatar dropdown. Replace @tailwindcss/forms with custom form reset using theme vars. Add status badge and alert tokens for dark mode. Theme-aware chart grid/labels, skeleton placeholders, and editor. Inline script in <head> prevents flash of wrong theme on load. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-05-07 12:04:06 +00:00 · 2026-04-04 02:05:00 +02:00
parent 7fbe3d85a3
commit 88adfe0e50
221 changed files with 1265 additions and 982 deletions
--- a/resources/scripts/admin/views/settings/BackupSetting.vue
+++ b/resources/scripts/admin/views/settings/BackupSetting.vue
@@ -47,18 +47,18 @@
        <BaseDropdown>
          <template #activator>
            <div class="inline-block">
-              <BaseIcon name="EllipsisHorizontalIcon" class="text-gray-500" />
+              <BaseIcon name="EllipsisHorizontalIcon" class="text-muted" />
            </div>
          </template>

          <BaseDropdownItem @click="onDownloadBckup(row.data)">
-            <BaseIcon name="CloudArrowDownIcon" class="mr-3 text-gray-600" />
+            <BaseIcon name="CloudArrowDownIcon" class="mr-3 text-body" />

            {{ $t('general.download') }}
          </BaseDropdownItem>

          <BaseDropdownItem @click="onRemoveBackup(row.data)">
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-body" />
            {{ $t('general.delete') }}
          </BaseDropdownItem>
        </BaseDropdown>
@@ -95,17 +95,17 @@ const backupColumns = computed(() => {
      key: 'path',
      label: t('settings.backup.path'),
      thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
    },
    {
      key: 'created_at',
      label: t('settings.backup.created_at'),
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
    },
    {
      key: 'size',
      label: t('settings.backup.size'),
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
    },
    {
      key: 'actions',
--- a/resources/scripts/admin/views/settings/CompanyInfoSettings.vue
+++ b/resources/scripts/admin/views/settings/CompanyInfoSettings.vue
@@ -110,10 +110,10 @@

      <div v-if="companyStore.companies.length !== 1" class="py-5">
        <BaseDivider class="my-4" />
-        <h3 class="text-lg leading-6 font-medium text-gray-900">
+        <h3 class="text-lg leading-6 font-medium text-heading">
          {{ $t('settings.company_info.delete_company') }}
        </h3>
-        <div class="mt-2 max-w-xl text-sm text-gray-500">
+        <div class="mt-2 max-w-xl text-sm text-muted">
          <p>
            {{ $t('settings.company_info.delete_company_description') }}
          </p>
--- a/resources/scripts/admin/views/settings/CompanyMailConfigSetting.vue
+++ b/resources/scripts/admin/views/settings/CompanyMailConfigSetting.vue
@@ -35,7 +35,7 @@
      </component>
    </div>

-    <div v-if="!useCustomMailConfig" class="mt-4 p-4 rounded-md bg-gray-50 text-sm text-gray-500">
+    <div v-if="!useCustomMailConfig" class="mt-4 p-4 rounded-md bg-surface-secondary text-sm text-muted">
      {{ $t('settings.mail.using_global_mail_config') }}
    </div>
  </BaseSettingCard>
--- a/resources/scripts/admin/views/settings/CustomFieldsSetting.vue
+++ b/resources/scripts/admin/views/settings/CustomFieldsSetting.vue
@@ -27,7 +27,7 @@
    >
      <template #cell-name="{ row }">
        {{ row.data.name }}
-        <span class="text-xs text-gray-500"> ({{ row.data.slug }})</span>
+        <span class="text-xs text-muted"> ({{ row.data.slug }})</span>
      </template>

      <template #cell-model_type="{ row }">
@@ -96,7 +96,7 @@ const customFieldsColumns = computed(() => {
      key: 'name',
      label: t('settings.custom_fields.name'),
      thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
    },
    {
      key: 'model_type',
--- a/resources/scripts/admin/views/settings/ExchangeRateProviderSetting.vue
+++ b/resources/scripts/admin/views/settings/ExchangeRateProviderSetting.vue
@@ -8,7 +8,7 @@
            {{ $t('settings.menu_title.exchange_rate') }}
          </h6>
          <p
-            class="mt-2 text-sm leading-snug text-left text-gray-500"
+            class="mt-2 text-sm leading-snug text-left text-muted"
            style="max-width: 680px"
          >
            {{ $t('settings.exchange_rate.providers_description') }}
@@ -49,17 +49,17 @@
        <BaseDropdown>
          <template #activator>
            <div class="inline-block">
-              <EllipsisHorizontalIcon class="w-5 text-gray-500" />
+              <EllipsisHorizontalIcon class="w-5 text-muted" />
            </div>
          </template>

          <BaseDropdownItem @click="editExchangeRate(row.data.id)">
-            <PencilIcon class="h-5 mr-3 text-gray-600" />
+            <PencilIcon class="h-5 mr-3 text-body" />
            {{ $t('general.edit') }}
          </BaseDropdownItem>

          <BaseDropdownItem @click="removeExchangeRate(row.data.id)">
-            <TrashIcon class="h-5 mr-3 text-gray-600" />
+            <TrashIcon class="h-5 mr-3 text-body" />
            {{ $t('general.delete') }}
          </BaseDropdownItem>
        </BaseDropdown>
@@ -104,19 +104,19 @@ const drivers = computed(() => {
      key: 'driver',
      label: t('settings.exchange_rate.driver'),
      thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
    },
    {
      key: 'key',
      label: t('settings.exchange_rate.key'),
      thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
    },
    {
      key: 'active',
      label: t('settings.exchange_rate.active'),
      thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
    },
    {
      key: 'actions',
--- a/resources/scripts/admin/views/settings/ExpenseCategorySetting.vue
+++ b/resources/scripts/admin/views/settings/ExpenseCategorySetting.vue
@@ -65,13 +65,13 @@ const ExpenseCategoryColumns = computed(() => {
      key: 'name',
      label: t('settings.expense_category.category_name'),
      thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
    },
    {
      key: 'description',
      label: t('settings.expense_category.category_description'),
      thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
    },

    {
--- a/resources/scripts/admin/views/settings/FileDiskSetting.vue
+++ b/resources/scripts/admin/views/settings/FileDiskSetting.vue
@@ -39,7 +39,7 @@
        <BaseDropdown v-if="isNotSystemDisk(row.data)">
          <template #activator>
            <div class="inline-block">
-              <BaseIcon name="EllipsisHorizontalIcon" class="text-gray-500" />
+              <BaseIcon name="EllipsisHorizontalIcon" class="text-muted" />
            </div>
          </template>

@@ -56,7 +56,7 @@
            v-if="row.data.type !== 'SYSTEM'"
            @click="openEditDiskModal(row.data)"
          >
-            <BaseIcon name="PencilIcon" class="mr-3 text-gray-600" />
+            <BaseIcon name="PencilIcon" class="mr-3 text-body" />

            {{ $t('general.edit') }}
          </BaseDropdownItem>
@@ -65,7 +65,7 @@
            v-if="row.data.type !== 'SYSTEM' && !row.data.set_as_default"
            @click="removeDisk(row.data.id)"
          >
-            <BaseIcon name="TrashIcon" class="mr-3 text-gray-600" />
+            <BaseIcon name="TrashIcon" class="mr-3 text-body" />
            {{ $t('general.delete') }}
          </BaseDropdownItem>
        </BaseDropdown>
@@ -109,26 +109,26 @@ const fileDiskColumns = computed(() => {
      key: 'name',
      label: t('settings.disk.disk_name'),
      thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
    },
    {
      key: 'driver',
      label: t('settings.disk.filesystem_driver'),
      thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
    },
    {
      key: 'type',
      label: t('settings.disk.disk_type'),
      thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
    },

    {
      key: 'set_as_default',
      label: t('settings.disk.is_default'),
      thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
    },
    {
      key: 'actions',
--- a/resources/scripts/admin/views/settings/NotesSetting.vue
+++ b/resources/scripts/admin/views/settings/NotesSetting.vue
@@ -66,13 +66,13 @@ const notesColumns = computed(() => {
      key: 'name',
      label: t('settings.customization.notes.name'),
      thClass: 'extra',
-      tdClass: 'font-medium text-gray-900 flex gap-1 items-center',
+      tdClass: 'font-medium text-heading flex gap-1 items-center',
    },
    {
      key: 'type',
      label: t('settings.customization.notes.type'),
      thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
    },

    {
--- a/resources/scripts/admin/views/settings/NotificationsSetting.vue
+++ b/resources/scripts/admin/views/settings/NotificationsSetting.vue
@@ -44,7 +44,7 @@

    <BaseDivider class="mt-6 mb-2" />

-    <ul class="divide-y divide-gray-200">
+    <ul class="divide-y divide-line-default">
      <BaseSwitchSection
        v-model="invoiceViewedField"
        :title="$t('settings.notification.invoice_viewed')"
--- a/resources/scripts/admin/views/settings/PaymentsModeSetting.vue
+++ b/resources/scripts/admin/views/settings/PaymentsModeSetting.vue
@@ -58,7 +58,7 @@ const paymentColumns = computed(() => {
      key: 'name',
      label: t('settings.payment_modes.mode_name'),
      thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
    },
    {
      key: 'actions',
--- a/resources/scripts/admin/views/settings/RolesSettings.vue
+++ b/resources/scripts/admin/views/settings/RolesSettings.vue
@@ -64,12 +64,12 @@ const roleColumns = computed(() => {
      key: 'name',
      label: t('settings.roles.role_name'),
      thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
    },
    {
      key: 'created_at',
      label: t('settings.roles.added_on'),
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
    },

    {
--- a/resources/scripts/admin/views/settings/SettingsIndex.vue
+++ b/resources/scripts/admin/views/settings/SettingsIndex.vue
@@ -24,7 +24,7 @@
      />
    </div>

-    <div class="flex">
+    <div class="flex gap-8">
      <div class="hidden mt-1 xl:block min-w-[240px]">
        <BaseList>
          <BaseListItem
--- a/resources/scripts/admin/views/settings/TaxTypesSetting.vue
+++ b/resources/scripts/admin/views/settings/TaxTypesSetting.vue
@@ -102,19 +102,19 @@ const taxTypeColumns = computed(() => {
      key: 'name',
      label: t('settings.tax_types.tax_name'),
      thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
    },
    {
      key: 'calculation_type',
      label: t('settings.tax_types.calculation_type'),
      thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
    },
    {
      key: 'amount',
      label: t('settings.tax_types.amount'),
      thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
    },
    {
      key: 'actions',
--- a/resources/scripts/admin/views/settings/UpdateAppSetting.vue
+++ b/resources/scripts/admin/views/settings/UpdateAppSetting.vue
@@ -8,7 +8,7 @@
        {{ $t('settings.update_app.current_version') }}
      </label>

-      <div class="w-full border-b-2 border-gray-100 border-solid pb-4">
+      <div class="w-full border-b-2 border-line-light border-solid pb-4">
        <div
          class="
          box-border
@@ -16,9 +16,9 @@
          w-auto
          p-3
          my-2
-          text-sm text-gray-600
-          bg-gray-200
-          border border-gray-200 border-solid
+          text-sm text-body
+          bg-surface-muted
+          border border-line-default border-solid
          rounded-md
          version
        "
@@ -81,9 +81,9 @@
            w-auto
            p-3
            my-2
-            text-sm text-gray-600
-            bg-gray-200
-            border border-gray-200 border-solid
+            text-sm text-body
+            bg-surface-muted
+            border border-line-default border-solid
            rounded-md
            version
          "
@@ -98,7 +98,7 @@
            mb-2
            text-sm
            leading-snug
-            text-gray-500
+            text-muted
            update-description
          "
          style="white-space: pre-wrap; max-width: 480px"
@@ -113,7 +113,7 @@
            mb-8
            text-sm
            leading-snug
-            text-gray-500
+            text-muted
            update-changelog
          "
          style="white-space: pre-wrap; max-width: 480px"
@@ -125,11 +125,11 @@
          {{ $t('settings.update_app.requirements') }}
        </label>

-        <table class="w-1/2 mt-2 border-2 border-gray-200 BaseTable-fixed">
+        <table class="w-1/2 mt-2 border-2 border-line-default BaseTable-fixed">
          <tr
            v-for="(ext, i) in requiredExtentions"
            :key="i"
-            class="p-2 border-2 border-gray-200"
+            class="p-2 border-2 border-line-default"
          >
            <td width="70%" class="p-2 text-sm truncate">
              {{ i }}
@@ -170,7 +170,7 @@
            {{ $t('settings.update_app.update_progress') }}
          </h6>
          <p
-            class="mb-8 text-sm leading-snug text-gray-500"
+            class="mb-8 text-sm leading-snug text-muted"
            style="max-width: 480px"
          >
            {{ $t('settings.update_app.progress_text') }}
@@ -189,13 +189,13 @@
            justify-between
            w-full
            py-3
-            border-b border-gray-200 border-solid
+            border-b border-line-default border-solid
            last:border-b-0
          "
        >
          <p class="m-0 text-sm leading-8">{{ $t(step.translationKey) }}</p>
          <div class="flex flex-row items-center">
-            <span v-if="step.time" class="mr-3 text-xs text-gray-500">
+            <span v-if="step.time" class="mr-3 text-xs text-muted">
              {{ step.time }}
            </span>
            <span
@@ -329,7 +329,7 @@ function statusClass(step) {

  switch (status) {
    case 'pending':
-      return 'text-primary-800 bg-gray-200'
+      return 'text-primary-800 bg-surface-muted'
    case 'finished':
      return 'text-teal-500 bg-teal-100'
    case 'running':
--- a/resources/scripts/admin/views/settings/customization/NumberCustomizer.vue
+++ b/resources/scripts/admin/views/settings/customization/NumberCustomizer.vue
@@ -1,8 +1,8 @@
 <template>
-  <h6 class="text-gray-900 text-lg font-medium">
+  <h6 class="text-heading text-lg font-medium">
    {{ $t(`settings.customization.${type}s.${type}_number_format`) }}
  </h6>
-  <p class="mt-1 text-sm text-gray-500">
+  <p class="mt-1 text-sm text-muted">
    {{
      $t(`settings.customization.${type}s.${type}_number_format_description`)
    }}
@@ -27,8 +27,8 @@
              not-italic
              font-medium
              leading-5
-              text-left text-gray-700
-              border-t border-b border-gray-200 border-solid
+              text-left text-body
+              border-t border-b border-line-default border-solid
            "
          ></th>
          <th
@@ -39,8 +39,8 @@
              not-italic
              font-medium
              leading-5
-              text-left text-gray-700
-              border-t border-b border-gray-200 border-solid
+              text-left text-body
+              border-t border-b border-line-default border-solid
            "
          >
            {{ $t('settings.customization.component') }}
@@ -53,8 +53,8 @@
              not-italic
              font-medium
              leading-5
-              text-left text-gray-700
-              border-t border-b border-gray-200 border-solid
+              text-left text-body
+              border-t border-b border-line-default border-solid
            "
          >
            {{ $t('settings.customization.Parameter') }}
@@ -67,15 +67,15 @@
              not-italic
              font-medium
              leading-5
-              text-left text-gray-700
-              border-t border-b border-gray-200 border-solid
+              text-left text-body
+              border-t border-b border-line-default border-solid
            "
          ></th>
        </tr>
      </thead>
      <draggable
        v-model="selectedFields"
-        class="divide-y divide-gray-200"
+        class="divide-y divide-line-default"
        item-key="id"
        tag="tbody"
        handle=".handle"
@@ -83,7 +83,7 @@
      >
        <template #item="{ element }">
          <tr class="relative">
-            <td class="text-gray-300 cursor-move handle align-middle">
+            <td class="text-subtle cursor-move handle align-middle">
              <DragIcon />
            </td>
            <td class="px-5 py-4">
@@ -93,7 +93,7 @@
                  text-sm
                  not-italic
                  font-medium
-                  text-primary-800
+                  text-primary-500
                  whitespace-nowrap
                  mr-2
                  min-w-[200px]
@@ -102,7 +102,7 @@
                {{ element.label }}
              </label>

-              <p class="text-xs text-gray-500 mt-1">
+              <p class="text-xs text-muted mt-1">
                {{ element.description }}
              </p>
            </td>
--- a/resources/scripts/admin/views/settings/customization/estimates/EstimatesTab.vue
+++ b/resources/scripts/admin/views/settings/customization/estimates/EstimatesTab.vue
@@ -15,7 +15,7 @@

  <BaseDivider class="mt-6 mb-2" />

-  <ul class="divide-y divide-gray-200">
+  <ul class="divide-y divide-line-default">
    <BaseSwitchSection
      v-model="sendAsAttachmentField"
      :title="$t('settings.customization.estimates.estimate_email_attachment')"
--- a/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabConvertEstimate.vue
+++ b/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabConvertEstimate.vue
@@ -1,8 +1,8 @@
 <template>
-  <h6 class="text-gray-900 text-lg font-medium">
+  <h6 class="text-heading text-lg font-medium">
    {{ $t('settings.customization.estimates.convert_estimate_options') }}
  </h6>
-  <p class="mt-1 text-sm text-gray-500">
+  <p class="mt-1 text-sm text-muted">
    {{ $t('settings.customization.estimates.convert_estimate_description') }}
  </p>

--- a/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabDefaultFormats.vue
+++ b/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabDefaultFormats.vue
@@ -1,9 +1,9 @@
 <template>
  <form @submit.prevent="submitForm">
-    <h6 class="text-gray-900 text-lg font-medium">
+    <h6 class="text-heading text-lg font-medium">
      {{ $t('settings.customization.estimates.default_formats') }}
    </h6>
-    <p class="mt-1 text-sm text-gray-500 mb-2">
+    <p class="mt-1 text-sm text-muted mb-2">
      {{ $t('settings.customization.estimates.default_formats_description') }}
    </p>

--- a/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabExpiryDate.vue
+++ b/resources/scripts/admin/views/settings/customization/estimates/EstimatesTabExpiryDate.vue
@@ -1,9 +1,9 @@
 <template>
  <form @submit.prevent="submitForm">
-    <h6 class="text-gray-900 text-lg font-medium">
+    <h6 class="text-heading text-lg font-medium">
      {{ $t('settings.customization.estimates.expiry_date') }}
    </h6>
-    <p class="mt-1 text-sm text-gray-500 mb-2">
+    <p class="mt-1 text-sm text-muted mb-2">
      {{ $t('settings.customization.estimates.expiry_date_description') }}
    </p>

--- a/resources/scripts/admin/views/settings/customization/invoices/InvoicesTab.vue
+++ b/resources/scripts/admin/views/settings/customization/invoices/InvoicesTab.vue
@@ -15,7 +15,7 @@

  <BaseDivider class="mt-6 mb-2" />

-  <ul class="divide-y divide-gray-200">
+  <ul class="divide-y divide-line-default">
    <BaseSwitchSection
      v-model="sendAsAttachmentField"
      :title="$t('settings.customization.invoices.invoice_email_attachment')"
--- a/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDefaultFormats.vue
+++ b/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDefaultFormats.vue
@@ -1,9 +1,9 @@
 <template>
  <form @submit.prevent="submitForm">
-    <h6 class="text-gray-900 text-lg font-medium">
+    <h6 class="text-heading text-lg font-medium">
      {{ $t('settings.customization.invoices.default_formats') }}
    </h6>
-    <p class="mt-1 text-sm text-gray-500 mb-2">
+    <p class="mt-1 text-sm text-muted mb-2">
      {{ $t('settings.customization.invoices.default_formats_description') }}
    </p>

--- a/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDueDate.vue
+++ b/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabDueDate.vue
@@ -1,9 +1,9 @@
 <template>
  <form @submit.prevent="submitForm">
-    <h6 class="text-gray-900 text-lg font-medium">
+    <h6 class="text-heading text-lg font-medium">
      {{ $t('settings.customization.invoices.due_date') }}
    </h6>
-    <p class="mt-1 text-sm text-gray-500 mb-2">
+    <p class="mt-1 text-sm text-muted mb-2">
      {{ $t('settings.customization.invoices.due_date_description') }}
    </p>

--- a/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabRetrospective.vue
+++ b/resources/scripts/admin/views/settings/customization/invoices/InvoicesTabRetrospective.vue
@@ -1,8 +1,8 @@
 <template>
-  <h6 class="text-gray-900 text-lg font-medium">
+  <h6 class="text-heading text-lg font-medium">
    {{ $t('settings.customization.invoices.retrospective_edits') }}
  </h6>
-  <p class="mt-1 text-sm text-gray-500">
+  <p class="mt-1 text-sm text-muted">
    {{ $t('settings.customization.invoices.retrospective_edits_description') }}
  </p>

--- a/resources/scripts/admin/views/settings/customization/items/ItemsTab.vue
+++ b/resources/scripts/admin/views/settings/customization/items/ItemsTab.vue
@@ -15,14 +15,14 @@
      <BaseDropdown>
        <template #activator>
          <div class="inline-block">
-            <BaseIcon name="EllipsisHorizontalIcon" class="text-gray-500" />
+            <BaseIcon name="EllipsisHorizontalIcon" class="text-muted" />
          </div>
        </template>

        <BaseDropdownItem @click="editItemUnit(row)">
          <BaseIcon
            name="PencilIcon"
-            class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+            class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
          />

          {{ $t('general.edit') }}
@@ -30,7 +30,7 @@
        <BaseDropdownItem @click="removeItemUnit(row)">
          <BaseIcon
            name="TrashIcon"
-            class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
+            class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
          />
          {{ $t('general.delete') }}
        </BaseDropdownItem>
@@ -60,7 +60,7 @@ const columns = computed(() => {
      key: 'name',
      label: t('settings.customization.items.unit_name'),
      thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
    },
    {
      key: 'actions',
--- a/resources/scripts/admin/views/settings/customization/payments/PaymentsTab.vue
+++ b/resources/scripts/admin/views/settings/customization/payments/PaymentsTab.vue
@@ -7,7 +7,7 @@

  <BaseDivider class="mt-6 mb-2" />

-  <ul class="divide-y divide-gray-200">
+  <ul class="divide-y divide-line-default">
    <BaseSwitchSection
      v-model="sendAsAttachmentField"
      :title="$t('settings.customization.payments.payment_email_attachment')"
--- a/resources/scripts/admin/views/settings/customization/payments/PaymentsTabDefaultFormats.vue
+++ b/resources/scripts/admin/views/settings/customization/payments/PaymentsTabDefaultFormats.vue
@@ -1,9 +1,9 @@
 <template>
  <form @submit.prevent="submitForm">
-    <h6 class="text-gray-900 text-lg font-medium">
+    <h6 class="text-heading text-lg font-medium">
      {{ $t('settings.customization.payments.default_formats') }}
    </h6>
-    <p class="mt-1 text-sm text-gray-500 mb-2">
+    <p class="mt-1 text-sm text-muted mb-2">
      {{ $t('settings.customization.payments.default_formats_description') }}
    </p>

--- a/resources/scripts/admin/views/settings/mail-driver/MailgunMailDriver.vue
+++ b/resources/scripts/admin/views/settings/mail-driver/MailgunMailDriver.vue
@@ -60,7 +60,7 @@
          <template #right>
            <BaseIcon
              :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
-              class="mr-1 text-gray-500 cursor-pointer"
+              class="mr-1 text-muted cursor-pointer"
              @click="isShowPassword = !isShowPassword"
            />
          </template>
--- a/resources/scripts/admin/views/settings/mail-driver/SesMailDriver.vue
+++ b/resources/scripts/admin/views/settings/mail-driver/SesMailDriver.vue
@@ -155,7 +155,7 @@
          <template #right>
            <BaseIcon
              :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
-              class="mr-1 text-gray-500 cursor-pointer"
+              class="mr-1 text-muted cursor-pointer"
              @click="isShowPassword = !isShowPassword"
            />
          </template>
--- a/resources/scripts/admin/views/settings/mail-driver/SmtpMailDriver.vue
+++ b/resources/scripts/admin/views/settings/mail-driver/SmtpMailDriver.vue
@@ -64,7 +64,7 @@
          <template #right>
            <BaseIcon
              :name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
-              class="mr-1 text-gray-500 cursor-pointer"
+              class="mr-1 text-muted cursor-pointer"
              @click="isShowPassword = !isShowPassword"
            />
          </template>