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-16 01:34:08 +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/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>