Add a dark-mode theme

Author: heymerridew

README.md

@@ -8,7 +8,7 @@
 
 This package provides a *DataTables-like* experience for [Inertia.js](https://inertiajs.com/) with support for searching, filtering, sorting, toggling columns, and pagination. It generates URLs that can be consumed by Spatie's excellent [Laravel Query Builder](https://github.com/spatie/laravel-query-builder) package, with no additional logic needed. The components are styled with [Tailwind CSS 3.0](https://tailwindcss.com/), but it's fully customizable with slots. The data refresh logic is based on Inertia's [Ping CRM demo](https://github.com/inertiajs/pingcrm).
 
-![Inertia.js Table for Laravel Query Builder](https://user-images.githubusercontent.com/8403149/177773377-86c32d69-8f86-47e4-8063-ea227e480d10.mp4)
+[![Inertia.js Table for Laravel Query Builder](https://protone.media/storage/introducing-inertiajs-tables-a-datatables-like-package-for-laravel-query-builder.jpg)](https://user-images.githubusercontent.com/8403149/177773377-86c32d69-8f86-47e4-8063-ea227e480d10.mp4)
 
 ## Support this package!
 

app/package-lock.json

@@ -1,6 +1,6 @@
 <template>
   <div class="min-h-screen flex flex-col items-center bg-gray-100">
-    <div class="w-full max-w-7xl mt-6 sm:px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
+    <div class="w-full max-w-7xl mt-6 sm:px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg dark:bg-gray-800">
       <slot />
     </div>
   </div>

app/resources/js/Layouts/Guest.vue

@@ -6,7 +6,7 @@
         type="button"
         :dusk="dusk"
         :disabled="disabled"
-        class="w-full bg-white border rounded-md shadow-sm px-4 py-2 inline-flex justify-center text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+        class="w-full bg-white border rounded-md shadow-sm px-4 py-2 inline-flex justify-center text-sm font-medium text-gray-700 hover:bg-gray-50 focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:hover:bg-gray-600 dark:border-gray-500"
         :class="{'border-green-300': active, 'border-gray-300': !active, 'cursor-not-allowed': disabled }"
         aria-haspopup="true"
         @click.prevent="toggle"
@@ -19,7 +19,7 @@
         ref="tooltip"
         class="absolute z-10"
       >
-        <div class="mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5">
+        <div class="mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 dark:bg-gray-700">
           <slot />
         </div>
       </div>

js/Components/ButtonWithDropdown.vue

@@ -1,7 +1,7 @@
 <template>
   <nav
     v-if="hasPagination"
-    class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6"
+    class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6 dark:bg-gray-500 dark:border-gray-400 dark:text-gray-100"
   >
     <p v-if="!hasData || pagination.total < 1">
       {{ translations.no_results_found }}
@@ -88,7 +88,7 @@
           :on-change="onPerPageChange"
         />
 
-        <p class="hidden lg:block text-sm text-gray-700 flex-grow">
+        <p class="hidden lg:block text-sm text-gray-700 flex-grow dark:text-gray-100">
           <span class="font-medium">{{ pagination.from }}</span>
           {{ translations.to }}
           <span class="font-medium">{{ pagination.to }}</span>
@@ -105,12 +105,12 @@
           <component
             :is="previousPageUrl ? 'a' : 'div'"
             :class="{
-              'cursor-not-allowed text-gray-400': !previousPageUrl,
-              'text-gray-500 hover:bg-gray-50': previousPageUrl
+              'cursor-not-allowed text-gray-400 dark:bg-gray-700 dark:text-gray-500': !previousPageUrl,
+              'text-gray-500 hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-600': previousPageUrl
             }"
             :href="previousPageUrl"
             :dusk="previousPageUrl ? 'pagination-previous' : null"
-            class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium"
+            class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium dark:border-gray-500"
             @click.prevent="onClick(previousPageUrl)"
           >
             <span class="sr-only">{{ translations.previous }}</span>
@@ -140,11 +140,11 @@
                 "
                 :href="link.url"
                 :dusk="link.url ? `pagination-${link.label}` : null"
-                class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700"
+                class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 dark:bg-gray-700 dark:text-gray-100 dark:border-gray-500 dark:hover:bg-gray-500"
                 :class="{
                   'cursor-not-allowed': !link.url,
                   'hover:bg-gray-50': link.url,
-                  'bg-gray-100': link.active,
+                  'bg-gray-100 dark:bg-blue-500 dark:hover:bg-blue-400': link.active,
                 }"
                 @click.prevent="onClick(link.url)"
               >
@@ -156,12 +156,12 @@
           <component
             :is="nextPageUrl ? 'a' : 'div'"
             :class="{
-              'cursor-not-allowed text-gray-400': !nextPageUrl,
-              'text-gray-500 hover:bg-gray-50': nextPageUrl
+              'cursor-not-allowed text-gray-400 dark:bg-gray-700 dark:text-gray-500': !nextPageUrl,
+              'text-gray-500 hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-600': nextPageUrl
             }"
             :href="nextPageUrl"
             :dusk="nextPageUrl ? 'pagination-next' : null"
-            class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium"
+            class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium dark:border-gray-500"
             @click.prevent="onClick(nextPageUrl)"
           >
             <span class="sr-only">{{ translations.next }}</span>

js/Components/Pagination.vue

@@ -3,7 +3,7 @@
     name="per_page"
     :dusk="dusk"
     :value="value"
-    class="block focus:ring-indigo-500 focus:border-indigo-500 min-w-max shadow-sm text-sm border-gray-300 rounded-md"
+    class="block focus:ring-indigo-500 focus:border-indigo-500 min-w-max shadow-sm text-sm border-gray-300 rounded-md dark:bg-gray-700 dark:text-gray-100 dark:border-gray-500"
     @change="onChange($event.target.value)"
   >
     <option

js/Components/PerPageSelector.vue

@@ -46,19 +46,14 @@
           </slot>
         </div>
 
-
-        <slot
-          name="tableReset"
-          can-be-reset="canBeReset"
-          :on-click="resetQuery"
+        <div
+          v-if="canBeReset"
+          class="order-5 sm:order-3 sm:mr-4 ml-auto"
         >
-          <div
-            v-if="canBeReset"
-            class="order-5 sm:order-3 sm:mr-4 ml-auto"
-          >
+          <slot name="tableReset" :on-click="resetQuery">
             <TableReset :on-click="resetQuery" />
-          </div>
-        </slot>
+          </slot>
+        </div>
 
         <slot
           name="tableAddSearchRow"
@@ -115,15 +110,15 @@
       >
         <TableWrapper :class="{ 'mt-3': !hasOnlyData }">
           <slot name="table">
-            <table class="min-w-full divide-y divide-gray-200 bg-white">
+            <table class="min-w-full divide-y divide-gray-200 bg-white dark:divide-gray-400">
               <thead class="bg-gray-50">
                 <slot
                   name="head"
                   :show="show"
                   :sort-by="sortBy"
                   :header="header"
                 >
-                  <tr class="font-medium text-xs uppercase text-left tracking-wider text-gray-500 py-3 px-6">
+                  <tr class="font-medium text-xs uppercase text-left tracking-wider text-gray-500 py-3 px-6 dark:bg-gray-500 dark:text-gray-100">
                     <HeaderCell
                       v-for="column in queryBuilderProps.columns"
                       :key="`table-${name}-header-${column.key}`"
@@ -133,7 +128,7 @@
                 </slot>
               </thead>
 
-              <tbody class="bg-white divide-y divide-gray-200">
+              <tbody class="bg-white divide-y divide-gray-200 dark:bg-gray-600 dark:divide-gray-400">
                 <slot
                   name="body"
                   :show="show"
@@ -143,16 +138,16 @@
                     :key="`table-${name}-row-${key}`"
                     class=""
                     :class="{
-                      'bg-gray-50': striped && key % 2,
-                      'hover:bg-gray-100': striped,
-                      'hover:bg-gray-50': !striped
+                      'bg-gray-50 dark:bg-gray-500': striped && key % 2,
+                      'hover:bg-gray-100 dark:hover:bg-gray-400': striped,
+                      'hover:bg-gray-50 dark:hover:bg-gray-500': !striped
                     }"
                   >
                     <td
                       v-for="column in queryBuilderProps.columns"
                       v-show="show(column.key)"
                       :key="`table-${name}-row-${key}-column-${column.key}`"
-                      class="text-sm py-4 px-6 text-gray-500 whitespace-nowrap"
+                      class="text-sm py-4 px-6 text-gray-500 whitespace-nowrap dark:text-gray-100"
                     >
                       <slot
                         :name="`cell(${column.key})`"

js/Components/Table.vue

@@ -31,7 +31,7 @@
         v-for="(searchInput, key) in searchInputs"
         :key="key"
         :dusk="`add-search-row-${searchInput.key}`"
-        class="text-left w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
+        class="text-left w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:bg-gray-600 dark:hover:text-gray-100 rounded-md"
         role="menuitem"
         @click.prevent="enableSearch(searchInput.key)"
       >

js/Components/TableAddSearchRow.vue

@@ -31,22 +31,22 @@
       class="min-w-max"
     >
       <div class="px-2">
-        <ul class="divide-y divide-gray-200">
+        <ul class="divide-y divide-gray-200 dark:divide-gray-500">
           <li
             v-for="(column, key) in props.columns"
             v-show="column.can_be_hidden"
             :key="key"
             class="py-2 flex items-center justify-between"
           >
             <p
-              class="text-sm text-gray-900"
+              class="text-sm text-gray-900 dark:text-gray-100"
             >
               {{ column.label }}
             </p>
 
             <button
               type="button"
-              class="ml-4 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-light-blue-500"
+              class="ml-4 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-light-blue-500"
               :class="{
                 'bg-green-500': !column.hidden,
                 'bg-gray-200': column.hidden,

js/Components/TableColumns.vue

@@ -32,16 +32,17 @@
       <div
         v-for="(filter, key) in filters"
         :key="key"
+        class="rounded-md dark:bg-gray-700"
       >
-        <h3 class="text-xs uppercase tracking-wide bg-gray-100 p-3">
+        <h3 class="text-xs uppercase tracking-wide bg-gray-100 p-3 dark:text-gray-100 dark:bg-gray-700 dark:rounded-md">
           {{ filter.label }}
         </h3>
         <div class="p-2">
           <select
             v-if="filter.type === 'select'"
             :name="filter.key"
             :value="filter.value"
-            class="block focus:ring-indigo-500 focus:border-indigo-500 w-full shadow-sm text-sm border-gray-300 rounded-md"
+            class="block focus:ring-indigo-500 focus:border-indigo-500 w-full shadow-sm text-sm border-gray-300 rounded-md dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500"
             @change="onFilterChange(filter.key, $event.target.value)"
           >
             <option