Implement dark theme styles in app.css and update layout components for dark mode compatibility. Add API endpoint links with copy functionality in package page.

src/app.css

@@ -1,3 +1,18 @@
 @import 'tailwindcss';
 @plugin '@tailwindcss/forms';
 @plugin '@tailwindcss/typography';
+
+/* Global dark theme defaults */
+:root {
+  color-scheme: dark;
+}
+
+html, body {
+  background-color: #0b0f19;
+  color: #e5e7eb;
+}
+
+/* Tailwind utility overrides for dark appearance */
+.prose {
+  @apply prose-invert;
+}

src/routes/+layout.svelte

@@ -2,28 +2,29 @@
 	import '../app.css';
 </script>
 
-<div class="min-h-screen bg-gray-50">
+
+<div class="min-h-screen bg-gray-950 text-gray-100">
 	<!-- Navigation -->
-	<nav class="bg-white shadow-sm border-b">
+	<nav class="bg-gray-900 shadow-sm border-b border-gray-800">
 		<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 			<div class="flex justify-between h-16">
 				<div class="flex">
 					<div class="flex-shrink-0 flex items-center">
-						<a href="/" class="text-xl font-bold text-gray-900">
+						<a href="/" class="text-xl font-bold text-gray-100">
 							PyPI Stats
 						</a>
 					</div>
 					<div class="hidden sm:ml-6 sm:flex sm:space-x-8">
-						<a href="/" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
+						<a href="/" class="border-transparent text-gray-300 hover:border-gray-600 hover:text-white inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
 							Home
 						</a>
-						<a href="/about" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
+						<a href="/about" class="border-transparent text-gray-300 hover:border-gray-600 hover:text-white inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
 							About
 						</a>
-						<a href="/faqs" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
+						<a href="/faqs" class="border-transparent text-gray-300 hover:border-gray-600 hover:text-white inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
 							FAQs
 						</a>
-						<a href="/api" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
+						<a href="/api" class="border-transparent text-gray-300 hover:border-gray-600 hover:text-white inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
 							API
 						</a>
                         
@@ -39,9 +40,9 @@
 	</main>
 
 	<!-- Footer -->
-	<footer class="bg-white border-t mt-16">
+	<footer class="bg-gray-900 border-t border-gray-800 mt-16">
 		<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
-			<div class="text-center text-gray-500 text-sm">
+			<div class="text-center text-gray-400 text-sm">
 				<p>PyPI Stats - Download statistics for Python packages</p>
 			</div>
 		</div>

src/routes/packages/[package]/+page.svelte

@@ -30,6 +30,21 @@
 		}
 	}
 
+	// API endpoints for quick links
+	const apiEndpoints = [
+		{ label: 'Recent downloads', path: 'recent' },
+		{ label: 'Overall downloads', path: 'overall' },
+		{ label: 'Python major versions', path: 'python_major' },
+		{ label: 'Python minor versions', path: 'python_minor' },
+		{ label: 'System downloads', path: 'system' },
+		{ label: 'Installer breakdown', path: 'installer' },
+		{ label: 'Summary totals', path: 'summary' }
+	];
+
+	function endpointUrl(path: string): string {
+		return `/api/packages/${encodeURIComponent(data.packageName)}/${path}`;
+	}
+
 	// Streaming handled with {#await} blocks below
 
 	// Build combined Python versions rows reactively
@@ -512,38 +527,23 @@
 		{/await}
 	{/if}
 
-	<!-- API Links -->
+    <!-- API Links -->
-	<div class="rounded-lg bg-blue-50 p-6">
+    <div class="rounded-lg border border-gray-800 bg-gray-900 p-6">
-		<h3 class="mb-4 text-lg font-semibold text-gray-900">API Access</h3>
+        <h3 class="mb-4 text-lg font-semibold text-gray-100">API Access</h3>
-		<div class="grid grid-cols-1 gap-4 text-sm md:grid-cols-2">
+        <div class="grid grid-cols-1 gap-3 text-sm md:grid-cols-2 lg:grid-cols-3">
-			<div>
+            {#each apiEndpoints as ep}
-				<strong>Recent downloads:</strong>
+                <div class="flex items-center justify-between rounded-md border border-gray-800 bg-gray-950 px-3 py-2">
-				<a
+                    <div class="min-w-0">
-					href="/api/packages/{data.packageName}/recent"
+                        <div class="text-gray-300">{ep.label}</div>
-					class="ml-2 text-blue-600 hover:text-blue-800">JSON</a
+                        <a class="truncate text-xs text-blue-400 hover:text-blue-300" href={endpointUrl(ep.path)} rel="noopener" target="_blank">{endpointUrl(ep.path)}</a>
-				>
+                    </div>
-			</div>
+                    <button
-			<div>
+                        class="ml-3 shrink-0 rounded-md border border-blue-700 bg-blue-800 px-2 py-1 text-xs text-white hover:bg-blue-700"
-				<strong>Overall downloads:</strong>
+                        onclick={() => navigator.clipboard?.writeText(endpointUrl(ep.path))}
-				<a
+                        aria-label={`Copy ${ep.label} URL`}
-					href="/api/packages/{data.packageName}/overall"
+                    >Copy</button>
-					class="ml-2 text-blue-600 hover:text-blue-800">JSON</a
+                </div>
-				>
+            {/each}
-			</div>
+        </div>
-			<div>
+    </div>
-				<strong>Python major versions:</strong>
-				<a
-					href="/api/packages/{data.packageName}/python_major"
-					class="ml-2 text-blue-600 hover:text-blue-800">JSON</a
-				>
-			</div>
-			<div>
-				<strong>System downloads:</strong>
-				<a
-					href="/api/packages/{data.packageName}/system"
-					class="ml-2 text-blue-600 hover:text-blue-800">JSON</a
-				>
-			</div>
-		</div>
-	</div>
 </div>