Add a site-wide dark mode

src/lib/components/DashboardSection.svelte

@@ -14,9 +14,9 @@
 
 <section class="mt-8">
 	<div>
-		<h2 class="text-lg font-semibold text-slate-900">{title}</h2>
+		<h2 class="text-lg font-semibold text-slate-900 dark:text-slate-100">{title}</h2>
 		{#if description}
-			<p class="mt-1 text-sm text-slate-500">{description}</p>
+			<p class="mt-1 text-sm text-slate-500 dark:text-slate-400">{description}</p>
 		{/if}
 	</div>
 	<div class="mt-4">

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>

src/lib/components/admin/AdminModal.svelte

@@ -53,18 +53,18 @@
 			role="dialog"
 			aria-modal="true"
 			aria-label={title}
-			class="relative z-10 flex max-h-[90vh] w-full max-w-2xl flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl"
+			class="relative z-10 flex max-h-[90vh] w-full max-w-2xl flex-col overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-xl dark:border-slate-800 dark:bg-slate-900"
 		>
 			<div
-				class="flex shrink-0 items-center justify-between gap-3 border-b border-slate-200 px-6 py-4"
+				class="flex shrink-0 items-center justify-between gap-3 border-b border-slate-200 px-6 py-4 dark:border-slate-800"
 			>
-				<h2 class="text-lg font-bold text-slate-900">{title}</h2>
+				<h2 class="text-lg font-bold text-slate-900 dark:text-slate-100">{title}</h2>
 				<div class="flex items-center gap-2">
 					{#if canDelete && recordId}
 						<button
 							type="button"
 							onclick={confirmDelete}
-							class="rounded-md bg-red-50 px-3 py-1.5 text-sm font-medium text-red-600 ring-1 ring-red-200 transition ring-inset hover:bg-red-600 hover:text-white"
+							class="rounded-md bg-red-50 px-3 py-1.5 text-sm font-medium text-red-600 ring-1 ring-red-200 transition ring-inset hover:bg-red-600 hover:text-white dark:bg-red-950/50 dark:text-red-400 dark:ring-red-900"
 						>
 							Delete
 						</button>
@@ -73,7 +73,7 @@
 						type="button"
 						onclick={onClose}
 						aria-label="Close"
-						class="rounded-md p-1.5 text-2xl leading-none text-slate-400 transition hover:bg-slate-100 hover:text-red-600"
+						class="rounded-md p-1.5 text-2xl leading-none text-slate-400 transition hover:bg-slate-100 hover:text-red-600 dark:text-slate-500 dark:hover:bg-slate-800"
 					>
 						&times;
 					</button>

src/lib/components/admin/Toast.svelte

@@ -26,15 +26,15 @@
 {#if visible}
 	<div
 		role="alert"
-		class="fixed right-4 bottom-4 z-50 flex items-center gap-3 rounded-lg border border-slate-700 bg-slate-900 px-4 py-3 text-sm text-white shadow-lg"
+		class="fixed right-4 bottom-4 z-50 flex items-center gap-3 rounded-lg border border-slate-700 bg-slate-900 px-4 py-3 text-sm text-white shadow-lg dark:border-slate-300 dark:bg-slate-950"
 	>
 		<span>{message}</span>
-		<span class="text-xs text-slate-400">{remaining}s</span>
+		<span class="text-xs text-slate-400 dark:text-slate-500">{remaining}s</span>
 		<button
 			type="button"
 			onclick={dismiss}
 			aria-label="Dismiss"
-			class="rounded p-1 text-slate-400 transition hover:text-white"
+			class="rounded p-1 text-slate-400 transition hover:text-white dark:text-slate-500"
 		>
 			&times;
 		</button>

src/lib/components/containers/Window.svelte

@@ -3,7 +3,9 @@
 </script>
 
 <div class="mx-auto w-full max-w-md px-4 py-8 sm:py-12">
-	<div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm sm:p-8">
+	<div
+		class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm sm:p-8 dark:border-slate-800 dark:bg-slate-900"
+	>
 		{@render children()}
 	</div>
 </div>