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-04-19 03:04:05 +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/customer/views/BaseCheckon.vue
+++ b/resources/scripts/customer/views/BaseCheckon.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="h-10 w-20 bg-gray-100">
+  <div class="h-10 w-20 bg-surface-tertiary">
    <slot></slot>
  </div>
 </template>
--- a/resources/scripts/customer/views/auth/ForgotPassword.vue
+++ b/resources/scripts/customer/views/auth/ForgotPassword.vue
@@ -31,7 +31,7 @@
    <div class="mt-4 mb-4 text-sm">
      <router-link
        to="login"
-        class="text-sm text-primary-400 hover:text-gray-700"
+        class="text-sm text-primary-400 hover:text-body"
      >
        {{ $t('general.back_to_login') }}
      </router-link>
--- a/resources/scripts/customer/views/auth/Login.vue
+++ b/resources/scripts/customer/views/auth/Login.vue
@@ -39,7 +39,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>
@@ -48,7 +48,7 @@
    <div class="flex items-center justify-between">
      <router-link
        :to="{ name: 'customer.forgot-password' }"
-        class="text-sm text-primary-600 hover:text-gray-500"
+        class="text-sm text-primary-600 hover:text-muted"
      >
        {{ $t('login.forgot_password') }}
      </router-link>
--- a/resources/scripts/customer/views/auth/ResetPassword.vue
+++ b/resources/scripts/customer/views/auth/ResetPassword.vue
@@ -31,7 +31,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/customer/views/dashboard/DashboardStatsItem.vue
+++ b/resources/scripts/customer/views/dashboard/DashboardStatsItem.vue
@@ -6,10 +6,10 @@
      flex
      justify-between
      p-3
-      bg-white
+      bg-surface
      rounded
      shadow
-      hover:bg-gray-50
+      hover:bg-hover
      xl:p-4
      lg:col-span-2
    "
@@ -17,10 +17,10 @@
    :to="route"
  >
    <div>
-      <span class="text-xl font-semibold leading-tight text-black xl:text-3xl">
+      <span class="text-xl font-semibold leading-tight text-heading xl:text-3xl">
        <slot />
      </span>
-      <span class="block mt-1 text-sm leading-tight text-gray-500 xl:text-lg">
+      <span class="block mt-1 text-sm leading-tight text-muted xl:text-lg">
        {{ label }}
      </span>
    </div>
--- a/resources/scripts/customer/views/dashboard/DashboardStatsPlaceholder.vue
+++ b/resources/scripts/customer/views/dashboard/DashboardStatsPlaceholder.vue
@@ -1,7 +1,7 @@
 <template>
  <BaseContentPlaceholders
    :rounded="true"
-    class="relative flex justify-between w-full p-3 bg-white rounded shadow lg:col-span-3 xl:p-4"
+    class="relative flex justify-between w-full p-3 bg-surface rounded shadow lg:col-span-3 xl:p-4"
  >
    <div>
      <BaseContentPlaceholdersText
--- a/resources/scripts/customer/views/dashboard/DashboardStatsSmPlaceholder.vue
+++ b/resources/scripts/customer/views/dashboard/DashboardStatsSmPlaceholder.vue
@@ -7,7 +7,7 @@
      justify-between
      w-full
      p-3
-      bg-white
+      bg-surface
      rounded
      shadow
      lg:col-span-2
--- a/resources/scripts/customer/views/estimates/Index.vue
+++ b/resources/scripts/customer/views/estimates/Index.vue
@@ -50,8 +50,8 @@
        class="px-3 mt-2"
      >
        <BaseInput v-model="filters.estimate_number">
-          <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
-          <BaseIcon name="HashtagIcon" class="h-5 mr-3 text-gray-600" />
+          <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-muted" />
+          <BaseIcon name="HashtagIcon" class="h-5 mr-3 text-body" />
        </BaseInput>
      </BaseInputGroup>

@@ -119,11 +119,11 @@
        <template #cell-actions="{ row }">
          <BaseDropdown>
            <template #activator>
-              <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
+              <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-muted" />
            </template>
            <router-link :to="`estimates/${row.data.id}/view`">
              <BaseDropdownItem>
-                <BaseIcon name="EyeIcon" class="h-5 mr-3 text-gray-600" />
+                <BaseIcon name="EyeIcon" class="h-5 mr-3 text-body" />
                {{ $t('general.view') }}
              </BaseDropdownItem>
            </router-link>
@@ -182,7 +182,7 @@ const estimateColumns = computed(() => {
      key: 'estimate_date',
      label: t('estimates.date'),
      thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
    },
    { key: 'estimate_number', label: t('estimates.number', 2) },
    { key: 'status', label: t('estimates.status') },
--- a/resources/scripts/customer/views/estimates/View.vue
+++ b/resources/scripts/customer/views/estimates/View.vue
@@ -25,7 +25,7 @@

    <!-- Sidebar -->
    <div
-      class="fixed top-0 left-0 hidden h-full pt-16 pb-4 bg-white w-88 xl:block"
+      class="fixed top-0 left-0 hidden h-full pt-16 pb-4 bg-surface w-88 xl:block"
    >
      <div
        class="
@@ -35,7 +35,7 @@
          px-4
          pt-8
          pb-6
-          border border-gray-200 border-solid
+          border border-line-default border-solid
        "
      >
        <BaseInput
@@ -46,7 +46,7 @@
          @input="onSearch"
        >
          <template #right>
-            <BaseIcon name="MagnifyingGlassIcon" class="h-5 text-gray-400" />
+            <BaseIcon name="MagnifyingGlassIcon" class="h-5 text-subtle" />
          </template>
        </BaseInput>

@@ -69,7 +69,7 @@
                pb-2
                mb-2
                text-sm
-                border-b border-gray-200 border-solid
+                border-b border-line-default border-solid
              "
            >
              {{ $t('general.sort_by') }}
@@ -136,7 +136,7 @@
          h-full
          pb-32
          overflow-y-scroll
-          border-l border-gray-200 border-solid
+          border-l border-line-default border-solid
          sw-scroll
        "
      >
@@ -146,9 +146,9 @@
          :key="index"
          :to="`/${globalStore.companySlug}/customer/estimates/${estimate.id}/view`"
          :class="[
-            'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-l-transparent',
+            'flex justify-between p-4 items-center cursor-pointer hover:bg-hover-strong border-l-4 border-l-transparent',
            {
-              'bg-gray-100 border-l-4 border-l-primary-500 border-solid':
+              'bg-surface-tertiary border-l-4 border-l-primary-500 border-solid':
                hasActiveUrl(estimate.id),
            },
          ]"
@@ -162,7 +162,7 @@
                not-italic
                font-medium
                leading-5
-                text-gray-500
+                text-muted
                capitalize
              "
            >
@@ -182,13 +182,13 @@
                not-italic
                font-semibold
                leading-8
-                text-right text-gray-900
+                text-right text-heading
                block
              "
              :amount="estimate.total"
              :currency="estimate.currency"
            />
-            <div class="text-sm text-right text-gray-500 non-italic">
+            <div class="text-sm text-right text-muted non-italic">
              {{ estimate.formatted_estimate_date }}
            </div>
          </div>
@@ -196,7 +196,7 @@

        <p
          v-if="!estimateStore.estimates.length"
-          class="flex justify-center px-4 mt-5 text-sm text-gray-600"
+          class="flex justify-center px-4 mt-5 text-sm text-body"
        >
          {{ $t('estimates.no_matching_estimates') }}
        </p>
--- a/resources/scripts/customer/views/invoices/Index.vue
+++ b/resources/scripts/customer/views/invoices/Index.vue
@@ -45,8 +45,8 @@
        class="px-3 mt-2"
      >
        <BaseInput v-model="filters.invoice_number">
-          <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
-          <BaseIcon name="HashtagIcon" class="h-5 ml-3 text-gray-600" />
+          <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-muted" />
+          <BaseIcon name="HashtagIcon" class="h-5 ml-3 text-body" />
        </BaseInput>
      </BaseInputGroup>

@@ -126,11 +126,11 @@
        <template #cell-actions="{ row }">
          <BaseDropdown>
            <template #activator>
-              <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
+              <BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-muted" />
            </template>
            <router-link :to="`invoices/${row.data.id}/view`">
              <BaseDropdownItem>
-                <BaseIcon name="EyeIcon" class="h-5 mr-3 text-gray-600" />
+                <BaseIcon name="EyeIcon" class="h-5 mr-3 text-body" />
                {{ $t('general.view') }}
              </BaseDropdownItem>
            </router-link>
@@ -191,7 +191,7 @@ const itemColumns = computed(() => {
      key: 'invoice_date',
      label: t('invoices.date'),
      thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
    },
    { key: 'invoice_number', label: t('invoices.number') },

--- a/resources/scripts/customer/views/invoices/View.vue
+++ b/resources/scripts/customer/views/invoices/View.vue
@@ -31,7 +31,7 @@

    <!-- Sidebar -->
    <div
-      class="fixed top-0 left-0 hidden h-full pt-16 pb-4 bg-white w-88 xl:block"
+      class="fixed top-0 left-0 hidden h-full pt-16 pb-4 bg-surface w-88 xl:block"
    >
      <div
        class="
@@ -41,7 +41,7 @@
          px-4
          pt-8
          pb-6
-          border border-gray-200 border-solid
+          border border-line-default border-solid
        "
      >
        <BaseInput
@@ -52,7 +52,7 @@
          @input="onSearch"
        >
          <template #right>
-            <BaseIcon name="MagnifyingGlassIcon" class="h-5 text-gray-400" />
+            <BaseIcon name="MagnifyingGlassIcon" class="h-5 text-subtle" />
          </template>
        </BaseInput>

@@ -75,7 +75,7 @@
                pb-2
                mb-2
                text-sm
-                border-b border-gray-200 border-solid
+                border-b border-line-default border-solid
              "
            >
              {{ $t('general.sort_by') }}
@@ -142,7 +142,7 @@
          h-full
          pb-32
          overflow-y-scroll
-          border-l border-gray-200 border-solid
+          border-l border-line-default border-solid
          sw-scroll
        "
      >
@@ -152,9 +152,9 @@
          :key="index"
          :to="`/${globalStore.companySlug}/customer/invoices/${invoice.id}/view`"
          :class="[
-            'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-l-transparent',
+            'flex justify-between p-4 items-center cursor-pointer hover:bg-hover-strong border-l-4 border-l-transparent',
            {
-              'bg-gray-100 border-l-4 border-l-primary-500 border-solid':
+              'bg-surface-tertiary border-l-4 border-l-primary-500 border-solid':
                hasActiveUrl(invoice.id),
            },
          ]"
@@ -167,7 +167,7 @@
                not-italic
                font-medium
                leading-5
-                text-gray-500
+                text-muted
                capitalize
                text-md
              "
@@ -187,14 +187,14 @@
                not-italic
                font-semibold
                leading-8
-                text-right text-gray-900
+                text-right text-heading
                block
              "
              :amount="invoice.total"
              :currency="invoice.currency"
            />

-            <div class="text-sm text-right text-gray-500 non-italic">
+            <div class="text-sm text-right text-muted non-italic">
              {{ invoice.formatted_invoice_date }}
            </div>
          </div>
@@ -202,7 +202,7 @@

        <p
          v-if="!invoiceStore.invoices.length"
-          class="flex justify-center px-4 mt-5 text-sm text-gray-600"
+          class="flex justify-center px-4 mt-5 text-sm text-body"
        >
          {{ $t('invoices.no_matching_invoices') }}
        </p>
--- a/resources/scripts/customer/views/payments/Index.vue
+++ b/resources/scripts/customer/views/payments/Index.vue
@@ -113,11 +113,11 @@
        <template #cell-actions="{ row }">
          <BaseDropdown>
            <template #activator>
-              <BaseIcon name="EllipsisHorizontalIcon" class="w-5 text-gray-500" />
+              <BaseIcon name="EllipsisHorizontalIcon" class="w-5 text-muted" />
            </template>
            <router-link :to="`payments/${row.data.id}/view`">
              <BaseDropdownItem>
-                <BaseIcon name="EyeIcon" class="h-5 mr-3 text-gray-600" />
+                <BaseIcon name="EyeIcon" class="h-5 mr-3 text-body" />
                {{ $t('general.view') }}
              </BaseDropdownItem>
            </router-link>
@@ -176,7 +176,7 @@ const paymentColumns = computed(() => {
      key: 'payment_date',
      label: t('payments.date'),
      thClass: 'extra',
-      tdClass: 'font-medium text-gray-900',
+      tdClass: 'font-medium text-heading',
    },
    { key: 'payment_number', label: t('payments.payment_number') },
    { key: 'payment_mode', label: t('payments.payment_mode') },
--- a/resources/scripts/customer/views/payments/View.vue
+++ b/resources/scripts/customer/views/payments/View.vue
@@ -19,7 +19,7 @@

    <!-- Sidebar -->
    <div
-      class="fixed top-0 left-0 hidden h-full pt-16 pb-4 bg-white w-88 xl:block"
+      class="fixed top-0 left-0 hidden h-full pt-16 pb-4 bg-surface w-88 xl:block"
    >
      <div
        class="
@@ -29,7 +29,7 @@
          px-4
          pt-8
          pb-6
-          border border-gray-200 border-solid
+          border border-line-default border-solid
        "
      >
        <BaseInput
@@ -40,7 +40,7 @@
          @input="onSearch"
        >
          <template #right>
-            <BaseIcon name="MagnifyingGlassIcon" class="h-5 text-gray-400" />
+            <BaseIcon name="MagnifyingGlassIcon" class="h-5 text-subtle" />
          </template>
        </BaseInput>

@@ -63,7 +63,7 @@
                pb-2
                mb-2
                text-sm
-                border-b border-gray-200 border-solid
+                border-b border-line-default border-solid
              "
            >
              {{ $t('general.sort_by') }}
@@ -130,7 +130,7 @@
          h-full
          pb-32
          overflow-y-scroll
-          border-l border-gray-200 border-solid
+          border-l border-line-default border-solid
          sw-scroll
        "
      >
@@ -140,9 +140,9 @@
          :key="index"
          :to="`/${globalStore.companySlug}/customer/payments/${payment.id}/view`"
          :class="[
-            'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-l-transparent',
+            'flex justify-between p-4 items-center cursor-pointer hover:bg-hover-strong border-l-4 border-l-transparent',
            {
-              'bg-gray-100 border-l-4 border-l-primary-500 border-solid':
+              'bg-surface-tertiary border-l-4 border-l-primary-500 border-solid':
                hasActiveUrl(payment.id),
            },
          ]"
@@ -156,7 +156,7 @@
                not-italic
                font-medium
                leading-5
-                text-gray-500
+                text-muted
                capitalize
              "
            >
@@ -172,14 +172,14 @@
                not-italic
                font-semibold
                leading-8
-                text-right text-gray-900
+                text-right text-heading
                block
              "
              :amount="payment.amount"
              :currency="payment.currency"
            />

-            <div class="text-sm text-right text-gray-500 non-italic">
+            <div class="text-sm text-right text-muted non-italic">
              {{ payment.formatted_payment_date }}
            </div>
          </div>
@@ -187,7 +187,7 @@

        <p
          v-if="!paymentStore.payments.length"
-          class="flex justify-center px-4 mt-5 text-sm text-gray-600"
+          class="flex justify-center px-4 mt-5 text-sm text-body"
        >
          {{ $t('payments.no_matching_payments') }}
        </p>
--- a/resources/scripts/customer/views/settings/AddressInformation.vue
+++ b/resources/scripts/customer/views/settings/AddressInformation.vue
@@ -6,7 +6,7 @@
          {{ $t('settings.menu_title.address_information') }}
        </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.address_information.section_description') }}
--- a/resources/scripts/customer/views/settings/CustomerSettings.vue
+++ b/resources/scripts/customer/views/settings/CustomerSettings.vue
@@ -6,7 +6,7 @@
          {{ $t('settings.account_settings.account_settings') }}
        </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.account_settings.section_description') }}
@@ -73,7 +73,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>
@@ -96,7 +96,7 @@
            <template #right>
              <BaseIcon
                :name="isShowConfirmPassword ? 'EyeIcon' : 'EyeSlashIcon'"
-                class="mr-1 text-gray-500 cursor-pointer"
+                class="mr-1 text-muted cursor-pointer"
                @click="isShowConfirmPassword = !isShowConfirmPassword"
              />
            </template>