Merge pull request #11 from stechstudio/Dark_Theme_Support

Add dark theme support

Author: jszobody

dist/theme.css

@@ -1,3 +1,6 @@
-@import "tailwindcss";
+@import "tailwindcss/utilities";
+@reference "tailwindcss/theme";
 
 @source "../../resources/views";
+
+@custom-variant dark (&:where(.dark, .dark *));

resources/css/theme.css

@@ -14,15 +14,15 @@
         </div>
 
         <div wire:poll.10s>
-            <table class="min-w-full divide-y divide-gray-200">
-                <thead class="bg-gray-50">
+            <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
+                <thead class="bg-gray-50 dark:bg-gray-800">
                     <tr>
-                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Key</th>
-                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Value</th>
+                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Key</th>
+                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Value</th>
                     </tr>
                 </thead>
 
-                <tbody class="bg-white divide-y divide-gray-200">
+                <tbody class="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
                     @foreach($$activeTab as $key => $value)
                         <tr>
                             <td class="px-4 py-1">{{ $key }}</td>

resources/views/status.blade.php

@@ -8,7 +8,6 @@
 use STS\FilamentOpcache\Widgets\OpcacheMemoryWidget;
 use Filament\Contracts\Plugin;
 use Filament\Panel;
-use Filament\Support\Colors\Color;
 
 class FilamentOpcachePlugin implements Plugin
 {