Add a site-wide dark mode

src/lib/components/DataTable.svelte

@@ -95,14 +95,14 @@
 
 <div class="mx-auto w-full">
 	<div class="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-		<h2 class="text-xl font-semibold text-slate-900">{title}</h2>
+		<h2 class="text-xl font-semibold text-slate-900 dark:text-slate-100">{title}</h2>
 
 		<div class="flex w-full flex-col gap-3 sm:w-auto sm:flex-row sm:items-center">
 			<input
 				type="search"
 				bind:value={search}
 				placeholder={searchPlaceholder}
-				class="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm transition focus:border-indigo-500 focus:outline-none sm:w-64"
+				class="w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm transition focus:border-indigo-500 focus:outline-none sm:w-64 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100"
 			/>
 			{#if onNew}
 				<button
@@ -128,11 +128,13 @@
 		</div>
 	</div>
 
-	<div class="w-full overflow-x-auto rounded-lg border border-slate-200 bg-white shadow-sm">
-		<table class="w-full min-w-max text-left text-sm text-slate-700">
+	<div
+		class="w-full overflow-x-auto rounded-lg border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900"
+	>
+		<table class="w-full min-w-max text-left text-sm text-slate-700 dark:text-slate-300">
 			<thead>
 				<tr
-					class="border-b border-slate-200 bg-slate-100 text-xs font-semibold tracking-wide text-slate-500"
+					class="border-b border-slate-200 bg-slate-100 text-xs font-semibold tracking-wide text-slate-500 dark:border-slate-800 dark:bg-slate-800 dark:text-slate-400"
 				>
 					{#if draggable}
 						<th scope="col" class="w-10 px-4 py-3"></th>
@@ -145,8 +147,10 @@
 			<tbody>
 				{#each rows as record, i (rowKey(record, i))}
 					<tr
-						class="transition {i % 2 === 0 ? 'bg-white' : 'bg-slate-50'} {onRowClick
-							? 'cursor-pointer hover:bg-indigo-50'
+						class="transition {i % 2 === 0
+							? 'bg-white dark:bg-slate-900'
+							: 'bg-slate-50 dark:bg-slate-950'} {onRowClick
+							? 'cursor-pointer hover:bg-indigo-50 dark:hover:bg-indigo-950'
 							: ''}"
 						{draggable}
 						ondragstart={(e) => handleDragStart(e, i)}
@@ -158,7 +162,7 @@
 						{#if draggable}
 							<td class="px-4 py-3" onclick={(e) => e.stopPropagation()} aria-hidden="true">
 								<span
-									class="cursor-grab text-slate-400 select-none active:cursor-grabbing"
+									class="cursor-grab text-slate-400 select-none active:cursor-grabbing dark:text-slate-500"
 									title="Drag to reorder">⠿</span
 								>
 							</td>
@@ -175,7 +179,7 @@
 												copyValue(column.value(record));
 											}}
 											title="Copy to clipboard"
-											class="ml-1 inline-flex text-slate-400 transition hover:text-indigo-600"
+											class="ml-1 inline-flex text-slate-400 transition hover:text-indigo-600 dark:text-slate-500 dark:hover:text-indigo-400"
 										>
 											<svg
 												viewBox="0 0 16 16"
@@ -203,7 +207,7 @@
 					<tr>
 						<td
 							colspan={columns.length + (draggable ? 1 : 0)}
-							class="bg-white px-4 py-10 text-center text-slate-500"
+							class="bg-white dark:bg-slate-900 px-4 py-10 text-center text-slate-500 dark:text-slate-400"
 						>
 							No results found.
 						</td>