add dark mode toggle in installation step

fix sidebar and table data link in dark mode color
Dark mode fix issue (#1211 )
2025-10-28 04:01:10 -04:00 · 2023-08-21 13:14:20 +05:30 · 2023-08-18 12:47:21 +05:30 · 2023-03-31 17:44:18 +05:30 · 2023-03-31 17:34:58 +05:30
21 changed files with 48 additions and 38 deletions
--- a/resources/scripts/admin/components/modal-components/RolesModal.vue
+++ b/resources/scripts/admin/components/modal-components/RolesModal.vue
@ -40,6 +40,7 @@
            px-4
            md:px-8
            py-1.5
+            dark:text-gray-200
          "
        >
          {{ $tc('settings.roles.permission', 2) }}
--- a/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue
+++ b/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue
@ -93,7 +93,7 @@
                  :name="item.icon"
                  :class="[
                    hasActiveUrl(item.link)
-                      ? 'text-primary-500 '
+                      ? 'text-primary-500 dark:text-primary-400'
                      : 'text-gray-400',
                    'mr-4 shrink-0 h-5 w-5',
                  ]"
@ -149,7 +149,7 @@
          :name="item.icon"
          :class="[
            hasActiveUrl(item.link)
-              ? 'text-primary-500 group-hover:text-primary-500 dark:text-primary-400 dark:group-hover:text-primary-500 '
+              ? 'text-primary-500 dark:text-primary-400'
              : 'text-gray-400 group-hover:text-black dark:text-gray-400 dark:group-hover:text-white',
            'mr-4 shrink-0 h-5 w-5 ',
          ]"
--- a/resources/scripts/admin/views/customers/Index.vue
+++ b/resources/scripts/admin/views/customers/Index.vue
@ -154,7 +154,7 @@
              :text="row.data.name"
              :length="30"
              tag="span"
-              class="font-medium text-primary-500 flex flex-col"
+              class="font-medium text-primary-500 flex flex-col dark:text-primary-400"
            />
            <BaseText
              :text="row.data.contact_name ? row.data.contact_name : ''"
--- a/resources/scripts/admin/views/customers/View.vue
+++ b/resources/scripts/admin/views/customers/View.vue
@ -34,8 +34,8 @@
            v-if="userStore.hasAbilities(abilities.CREATE_ESTIMATE)"
            :to="`/admin/estimates/create?customer=${$route.params.id}`"
          >
-            <BaseDropdownItem class="">
-              <BaseIcon name="DocumentIcon" class="mr-3 text-gray-600" />
+            <BaseDropdownItem v-slot="slotProps">
+              <BaseIcon name="DocumentIcon" :class="slotProps.class" />
              {{ $t('estimates.new_estimate') }}
            </BaseDropdownItem>
          </router-link>
@ -44,8 +44,8 @@
            v-if="userStore.hasAbilities(abilities.CREATE_INVOICE)"
            :to="`/admin/invoices/create?customer=${$route.params.id}`"
          >
-            <BaseDropdownItem>
-              <BaseIcon name="DocumentTextIcon" class="mr-3 text-gray-600" />
+            <BaseDropdownItem v-slot="slotProps">
+              <BaseIcon name="DocumentTextIcon" :class="slotProps.class" />
              {{ $t('invoices.new_invoice') }}
            </BaseDropdownItem>
          </router-link>
@ -54,8 +54,8 @@
            v-if="userStore.hasAbilities(abilities.CREATE_PAYMENT)"
            :to="`/admin/payments/create?customer=${$route.params.id}`"
          >
-            <BaseDropdownItem>
-              <BaseIcon name="CreditCardIcon" class="mr-3 text-gray-600" />
+            <BaseDropdownItem v-slot="slotProps">
+              <BaseIcon name="CreditCardIcon" :class="slotProps.class" />
              {{ $t('payments.new_payment') }}
            </BaseDropdownItem>
          </router-link>
@ -64,8 +64,8 @@
            v-if="userStore.hasAbilities(abilities.CREATE_EXPENSE)"
            :to="`/admin/expenses/create?customer=${$route.params.id}`"
          >
-            <BaseDropdownItem>
-              <BaseIcon name="CalculatorIcon" class="mr-3 text-gray-600" />
+            <BaseDropdownItem v-slot="slotProps">
+              <BaseIcon name="CalculatorIcon" :class="slotProps.class" />
              {{ $t('expenses.new_expense') }}
            </BaseDropdownItem>
          </router-link>
--- a/resources/scripts/admin/views/customers/partials/CustomerViewSidebar.vue
+++ b/resources/scripts/admin/views/customers/partials/CustomerViewSidebar.vue
@ -13,6 +13,7 @@
      xl:ml-64
      w-88
      xl:block
+      dark:bg-gray-800
    "
  >
    <div
@ -25,6 +26,7 @@
        pb-2
        border border-gray-200 border-solid
        height-full
+        dark:border-gray-600
      "
    >
      <BaseInput
@ -59,6 +61,7 @@
              mb-2
              text-sm
              border-b border-gray-200 border-solid
+              dark:border-gray-600
            "
          >
            {{ $t('general.sort_by') }}
@ -114,6 +117,7 @@
        border-l border-gray-200 border-solid
        sidebar
        base-scroll
+        dark:border-gray-600
      "
    >
      <div v-for="(customer, index) in customerList" :key="index">
@ -122,9 +126,9 @@
          :id="'customer-' + customer.id"
          :to="`/admin/customers/${customer.id}/view`"
          :class="[
-            'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent',
+            'flex justify-between p-4 items-center cursor-pointer hover:bg-gray-100 border-l-4 border-transparent dark:hover:bg-gray-700',
            {
-              'bg-gray-100 border-l-4 border-primary-500 border-solid':
+              'bg-gray-100 border-l-4 border-primary-500 border-solid dark:border-primary-400 dark:bg-gray-700':
                hasActiveUrl(customer.id),
            },
          ]"
@ -143,6 +147,7 @@
                text-black
                capitalize
                truncate
+                dark:text-white
              "
            />

@ -157,6 +162,7 @@
                font-medium
                leading-5
                text-gray-600
+                dark:text-gray-400
              "
            />
          </div>
@ -175,7 +181,7 @@
      </div>
      <p
        v-if="!customerList?.length && !isFetching"
-        class="flex justify-center px-4 mt-5 text-sm text-gray-600"
+        class="flex justify-center px-4 mt-5 text-sm text-gray-600 dark:text-gray-300"
      >
        {{ $t('customers.no_matching_customers') }}
      </p>
--- a/resources/scripts/admin/views/dashboard/DashboardTable.vue
+++ b/resources/scripts/admin/views/dashboard/DashboardTable.vue
@ -28,7 +28,7 @@
          <template #cell-user="{ row }">
            <router-link
              :to="{ path: `invoices/${row.data.id}/view` }"
-              class="font-medium text-primary-500"
+              class="font-medium text-primary-500 dark:text-primary-400"
            >
              {{ row.data.customer.name }}
            </router-link>
@ -78,7 +78,7 @@
          <template #cell-user="{ row }">
            <router-link
              :to="{ path: `estimates/${row.data.id}/view` }"
-              class="font-medium text-primary-500"
+              class="font-medium text-primary-500 dark:text-primary-400"
            >
              {{ row.data.customer.name }}
            </router-link>
--- a/resources/scripts/admin/views/estimates/Index.vue
+++ b/resources/scripts/admin/views/estimates/Index.vue
@ -205,7 +205,7 @@
        <template #cell-estimate_number="{ row }">
          <router-link
            :to="{ path: `estimates/${row.data.id}/view` }"
-            class="font-medium text-primary-500"
+            class="font-medium text-primary-500 dark:text-primary-400"
          >
            {{ row.data.estimate_number }}
          </router-link>
--- a/resources/scripts/admin/views/expenses/Index.vue
+++ b/resources/scripts/admin/views/expenses/Index.vue
@ -171,7 +171,7 @@
        <template #cell-name="{ row }">
          <router-link
            :to="{ path: `expenses/${row.data.id}/edit` }"
-            class="font-medium text-primary-500"
+            class="font-medium text-primary-500 dark:text-primary-400"
          >
            {{ row.data.expense_category.name }}
          </router-link>
--- a/resources/scripts/admin/views/installation/Installation.vue
+++ b/resources/scripts/admin/views/installation/Installation.vue
@ -1,5 +1,6 @@
 <template>
  <div class="flex flex-col items-center justify-between w-full pt-10">
+      <LightDarkButton class="absolute z-10 top-2 right-2"/>
    <img
      id="logo-crater"
      src="/img/crater-logo.png"
@ -29,6 +30,7 @@ import Step7CompanyInfo from './Step7CompanyInfo.vue'
 import Step8CompanyPreferences from './Step8CompanyPreferences.vue'
 import { useInstallationStore } from '@/scripts/admin/stores/installation'
 import { useRouter } from 'vue-router'
+import LightDarkButton from '@/scripts/components/LightDarkButton.vue'

 export default {
  components: {
@ -40,6 +42,7 @@ export default {
    step_6: Step6AccountSettings,
    step_7: Step7CompanyInfo,
    step_8: Step8CompanyPreferences,
+    LightDarkButton
  },

  setup() {
--- a/resources/scripts/admin/views/invoices/Index.vue
+++ b/resources/scripts/admin/views/invoices/Index.vue
@ -220,7 +220,7 @@
        <template #cell-invoice_number="{ row }">
          <router-link
            :to="{ path: `invoices/${row.data.id}/view` }"
-            class="font-medium text-primary-500"
+            class="font-medium text-primary-500 dark:text-primary-400"
          >
            {{ row.data.invoice_number }}
          </router-link>
--- a/resources/scripts/admin/views/items/Index.vue
+++ b/resources/scripts/admin/views/items/Index.vue
@ -153,7 +153,7 @@
        <template #cell-name="{ row }">
          <router-link
            :to="{ path: `items/${row.data.id}/edit` }"
-            class="font-medium text-primary-500"
+            class="font-medium text-primary-500 dark:text-primary-400"
          >
            {{ row.data.name }}
          </router-link>
--- a/resources/scripts/admin/views/payments/Index.vue
+++ b/resources/scripts/admin/views/payments/Index.vue
@ -158,7 +158,7 @@
        <template #cell-payment_number="{ row }">
          <router-link
            :to="{ path: `payments/${row.data.id}/view` }"
-            class="font-medium text-primary-500"
+            class="font-medium text-primary-500 dark:text-primary-400"
          >
            {{ row.data.payment_number }}
          </router-link>
--- a/resources/scripts/admin/views/recurring-invoices/Index.vue
+++ b/resources/scripts/admin/views/recurring-invoices/Index.vue
@ -204,7 +204,7 @@
              :text="row.data.customer.name"
              :length="30"
              tag="span"
-              class="font-medium text-primary-500 flex flex-col"
+              class="font-medium text-primary-500 flex flex-col dark:text-primary-400"
            />

            <BaseText
--- a/resources/scripts/admin/views/settings/UpdateAppSetting.vue
+++ b/resources/scripts/admin/views/settings/UpdateAppSetting.vue
@ -92,7 +92,7 @@
          <tr
            v-for="(ext, i) in requiredExtentions"
            :key="i"
-            class="p-2 border-2 border-gray-200"
+            class="p-2 border-2 border-gray-200 dark:border-gray-600"
          >
            <td width="70%" class="p-2 text-sm truncate">
              {{ i }}
@ -121,7 +121,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-gray-500 dark:text-gray-400"
            style="max-width: 480px"
          >
            {{ $t('settings.update_app.progress_text') }}
@ -135,11 +135,11 @@
        <li
          v-for="step in updateSteps"
          :key="step.stepUrl"
-          class="flex justify-between w-full py-3 border-b border-gray-200 border-solid last:border-b-0"
+          class="flex justify-between w-full py-3 border-b border-gray-200 dark:border-gray-600 border-solid last:border-b-0"
        >
-          <p class="m-0 text-sm leading-8">{{ $t(step.translationKey) }}</p>
+          <p class="m-0 text-sm dark:text-gray-300 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-gray-500 dark:text-gray-300">
              {{ step.time }}
            </span>
            <span
@ -275,7 +275,7 @@ function statusClass(step) {
    case 'running':
      return 'text-blue-400 bg-blue-100'
    case 'error':
-      return 'text-danger bg-red-200'
+      return 'text-red-400 bg-red-200'
    default:
      return ''
  }
--- a/resources/scripts/admin/views/users/Index.vue
+++ b/resources/scripts/admin/views/users/Index.vue
@ -158,7 +158,7 @@
        <template #cell-name="{ row }">
          <router-link
            :to="{ path: `users/${row.data.id}/edit` }"
-            class="font-medium text-primary-500"
+            class="font-medium text-primary-500 dark:text-primary-400"
          >
            {{ row.data.name }}
          </router-link>
--- a/resources/scripts/components/CustomerLightDarkButton.vue
+++ b/resources/scripts/components/CustomerLightDarkButton.vue
@ -14,7 +14,7 @@
    "
    @click="onChange"
  >
-    <BaseIcon v-if="!globalStore.isDarkModeOn" class="h-5 w-5 text-black" name="SunIcon" />
+  <BaseIcon v-if="!globalStore.isDarkModeOn" class="h-5 w-5 text-yellow-500" name="SunIcon" />
    <BaseIcon v-else class="h-5 w-5 text-white" name="MoonIcon" />
  </button>
 </template>
--- a/resources/scripts/customer/layouts/partials/TheSiteHeader.vue
+++ b/resources/scripts/customer/layouts/partials/TheSiteHeader.vue
@ -45,7 +45,7 @@
        </div>
        <div class="hidden sm:ml-6 sm:flex sm:items-center">
          <!-- Dark mode Toggle -->
-          <CustomerLightDarkButton/>
+          <LightDarkButton/>

          <!-- Profile dropdown -->

@ -151,7 +151,7 @@
            </div>
        </div>
          <!-- Dark mode Toggle -->
-          <CustomerLightDarkButton/>
+          <LightDarkButton/>
        </div>
        <div class="mt-3 space-y-1">
          <router-link
@ -178,7 +178,7 @@ import { useRoute, useRouter } from 'vue-router'
 import { ref, watch, computed } from 'vue'
 import { useGlobalStore } from '@/scripts/customer/stores/global'
 import MainLogo from '@/scripts/components/icons/MainLogo.vue'
-import CustomerLightDarkButton from '@/scripts/components/CustomerLightDarkButton.vue'
+import LightDarkButton from '@/scripts/components/LightDarkButton.vue'
 import {
  Disclosure,
  DisclosureButton,
--- a/resources/scripts/customer/views/dashboard/DashboardTable.vue
+++ b/resources/scripts/customer/views/dashboard/DashboardTable.vue
@ -26,7 +26,7 @@
            :to="{
              path: `/${globalStore.companySlug}/customer/invoices/${row.data.id}/view`,
            }"
-            class="font-medium text-primary-500"
+            class="font-medium text-primary-500 dark:text-primary-400"
          >
            {{ row.data.invoice_number }}
          </router-link>
@ -73,7 +73,7 @@
            :to="{
              path: `/${globalStore.companySlug}/customer/estimates/${row.data.id}/view`,
            }"
-            class="font-medium text-primary-500"
+            class="font-medium text-primary-500 dark:text-primary-400"
          >
            {{ row.data.estimate_number }}
          </router-link>
--- a/resources/scripts/customer/views/estimates/Index.vue
+++ b/resources/scripts/customer/views/estimates/Index.vue
@ -100,7 +100,7 @@
        <template #cell-estimate_number="{ row }">
          <router-link
            :to="{ path: `estimates/${row.data.id}/view` }"
-            class="font-medium text-primary-500"
+            class="font-medium text-primary-500 dark:text-primary-400"
          >
            {{ row.data.estimate_number }}
          </router-link>
--- a/resources/scripts/customer/views/invoices/Index.vue
+++ b/resources/scripts/customer/views/invoices/Index.vue
@ -95,7 +95,7 @@
        <template #cell-invoice_number="{ row }">
          <router-link
            :to="{ path: `invoices/${row.data.id}/view` }"
-            class="font-medium text-primary-500"
+            class="font-medium text-primary-500 dark:text-primary-400"
          >
            {{ row.data.invoice_number }}
          </router-link>
--- a/resources/scripts/customer/views/payments/Index.vue
+++ b/resources/scripts/customer/views/payments/Index.vue
@ -78,7 +78,7 @@
            :to="{
              path: `payments/${row.data.id}/view`,
            }"
-            class="font-medium text-primary-500"
+            class="font-medium text-primary-500 dark:text-primary-400"
          >
            {{ row.data.payment_number }}
          </router-link>
Author	SHA1	Message	Date
yashkanakiya	b2d181975c	add dark mode toggle in installation step	2023-08-21 13:14:20 +05:30
yashkanakiya	a03d4138fd	fix sidebar and table data link in dark mode color	2023-08-18 12:47:21 +05:30
Yash Kanakiya	f4bc78ce98	Dark mode fix issue (#1211 ) * fix dark mode in item row and switch issue * change class for create items title issue * fix indentation and remove console log --------- Co-authored-by: yogesh-gohil <yogeshgohil1611@gmail.com>	2023-03-31 17:44:18 +05:30
Yash Kanakiya	ba769864d4	fix view sidebar and customer dropdown dark issue (#1210 ) * fix view sidebar and customer dropdown dark issue * fix update app settings dark mode --------- Co-authored-by: yogesh-gohil <yogeshgohil1611@gmail.com>	2023-03-31 17:34:58 +05:30