Fix checkbox in dark mode

Author: sotten

resources/views/components/table/td/bulk-actions.blade.php

@@ -22,7 +22,7 @@
                 type="checkbox"
                 {{
                     $attributes->merge($bulkActionsTdCheckboxAttributes)->class([
-                        'rounded border-gray-300 text-indigo-600 shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600' => ($theme === 'tailwind') && ($bulkActionsTdCheckboxAttributes['default'] ?? true),
+                        'text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 dark:checked:bg-indigo-500 dark:border-gray-600' => ($theme === 'tailwind') && ($bulkActionsTdCheckboxAttributes['default'] ?? true),
                         'form-check-input' => ($theme === 'bootstrap-5') && ($bulkActionsTdCheckboxAttributes['default'] ?? true),
                     ])->except(['default','default-styling','default-colors'])
                 }}

resources/views/components/table/th/bulk-actions.blade.php

@@ -24,7 +24,7 @@
                 :checked="selectedItems.length == paginationTotalItemCount"
                 {{
                     $attributes->merge($bulkActionsThCheckboxAttributes)->class([
-                        'rounded border-gray-300 text-indigo-600 shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600' => ($theme === 'tailwind') && ($bulkActionsThCheckboxAttributes['default'] ?? true),
+                        'text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 dark:checked:bg-indigo-500 dark:border-gray-600' => ($theme === 'tailwind') && ($bulkActionsThCheckboxAttributes['default'] ?? true),
                         'form-check-input' => ($theme === 'bootstrap-5') && ($bulkActionsThCheckboxAttributes['default'] ?? true),
                     ])->except(['default','default-styling','default-colors'])
                 }}

resources/views/components/tools/filters/multi-select.blade.php

@@ -9,7 +9,7 @@
                     type="checkbox"
                     id="{{ $tableName }}-filter-{{ $filter->getKey() }}-select-all-@if($filter->hasCustomPosition()){{ $filter->getCustomPosition() }}@endif"
                     wire:input="selectAllFilterOptions('{{ $filter->getKey() }}')"
-                    class="text-indigo-600 rounded border-gray-300 shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600 disabled:opacity-50 disabled:cursor-wait"
+                    class="text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 dark:checked:bg-indigo-500 dark:border-gray-600 disabled:opacity-50 disabled:cursor-wait"
                 >
                 <label for="{{ $tableName }}-filter-{{ $filter->getKey() }}-select-all-@if($filter->hasCustomPosition()){{ $filter->getCustomPosition() }}@endif" class="dark:text-white">
                 @if ($filter->getFirstOption() != "")
@@ -28,7 +28,7 @@ class="text-indigo-600 rounded border-gray-300 shadow-sm transition duration-150
                         value="{{ $key }}"
                         wire:key="{{ $tableName }}-filter-{{ $filter->getKey() }}-{{ $loop->index }}-@if($filter->hasCustomPosition()){{ $filter->getCustomPosition() }}@endif"
                         {{ $filter->getWireMethod("filterComponents.".$filter->getKey()) }}
-                        class="text-indigo-600 rounded border-gray-300 shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600 disabled:opacity-50 disabled:cursor-wait"
+                        class="text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 dark:checked:bg-indigo-500 dark:border-gray-600 disabled:opacity-50 disabled:cursor-wait"
                     >
                     <label for="{{ $tableName }}-filter-{{ $filter->getKey() }}-{{ $loop->index }}-@if($filter->hasCustomPosition()){{ $filter->getCustomPosition() }}@endif" class="dark:text-white">{{ $value }}</label>
                 </div>
@@ -60,4 +60,4 @@ class="form-check-input"
             </div>
         @endforeach
     @endif
-</div>
+</div>

resources/views/components/tools/toolbar/items/column-select.blade.php

@@ -45,8 +45,8 @@ class="absolute right-0 z-50 mt-2 w-full rounded-md divide-y divide-gray-100 rin
                             class="inline-flex items-center px-2 py-1 disabled:opacity-50 disabled:cursor-wait"
                         >
                             <input
-                                class="text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600 disabled:opacity-50 disabled:cursor-wait"
-                                wire:loading.attr="disabled" 
+                                class="text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 dark:checked:bg-indigo-500 dark:border-gray-600 disabled:opacity-50 disabled:cursor-wait"
+                                wire:loading.attr="disabled"
                                 type="checkbox"
                                 @checked($component->getSelectableSelectedColumns()->count() == $component->getSelectableColumns()->count())
                                 @if($component->getSelectableSelectedColumns()->count() == $component->getSelectableColumns()->count())  wire:click="deselectAllColumns" @else wire:click="selectAllColumns" @endif
@@ -65,7 +65,7 @@ class="text-indigo-600 transition duration-150 ease-in-out border-gray-300 round
                                 class="inline-flex items-center px-2 py-1 disabled:opacity-50 disabled:cursor-wait"
                             >
                                 <input
-                                    class="text-indigo-600 rounded border-gray-300 shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600 disabled:opacity-50 disabled:cursor-wait"
+                                    class="text-indigo-600 transition duration-150 ease-in-out border-gray-300 rounded shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-900 dark:checked:bg-indigo-500 dark:border-gray-600 disabled:opacity-50 disabled:cursor-wait"
                                     wire:model.live="selectedColumns" wire:target="selectedColumns"
                                     wire:loading.attr="disabled" type="checkbox"
                                     value="{{ $columnSlug }}" />
@@ -125,7 +125,7 @@ class="text-indigo-600 rounded border-gray-300 shadow-sm transition duration-150
                         />
 
                         <span class="ml-2">{{ __('livewire-tables::core.All Columns') }}</span>
-                        
+
 
                     </label>
                 </div>