adding dark mode support

components/Footer.tsx

@@ -1,6 +1,6 @@
 export default function Footer() {
   return (
-    <footer class="flex justify-between mt-14 text-sm text-gray-600">
+    <footer class="flex justify-between mt-14 text-sm text-gray-600 dark:text-gray-400">
       <span>&copy; 2024 Stephen Melnicki</span>
       <ul class="flex justify-end gap-4">
         <li>

components/Form.tsx

@@ -6,19 +6,19 @@ export default function Form() {
           Content
         </label>
         <textarea
-          class="min-w-full h-44 p-2 font-mono border rounded-md border-gray-600"
+          class="min-w-full h-44 px-3 py-2 font-mono shadow-sm border-0 rounded-md ring-1 ring-inset ring-gray-600"
           id="content"
           name="content"
           type="text"
           autoFocus
           required
         />
-        <p class="mt-2 leading-6 text-sm text-gray-600">
+        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
           Pastes expire in one hour.
         </p>
         <button
           type="submit"
-          class="mt-8 px-4 py-2 ml-auto font-semibold border rounded-md bg-blue-600 border-blue-600 text-white hover:bg-white hover:text-blue-600"
+          class="mt-8 ml-auto px-4 py-2 font-semibold rounded-md bg-blue-600 text-white"
         >
           Submit
         </button>

components/Header.tsx

@@ -1,12 +1,12 @@
 export default function Header() {
   return (
     <header>
-      <a href="/">
+      <a class="inline-block" href="/">
         <h1 class="font-bold text-4xl">
           Deno Paste
         </h1>
       </a>
-      <p class="mt-1 text-sm leading-6 text-gray-600">
+      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
         A minimal plain text storage service
       </p>
     </header>

components/Paste.tsx

@@ -6,22 +6,22 @@ interface PasteProps {
 export default function Paste({ id, contents }: PasteProps) {
   return (
     <main class="my-6">
-      <div class="mb-6 flex items-center justify-end gap-x-6">
+      <div class="mb-6 flex items-center justify-end gap-x-4">
         <a
-          class="font-semibold text-gray-900"
+          class="px-4 py-2 font-semibold rounded-md"
           href={`/${id}/raw`}
         >
           View raw
         </a>
         <button
           id="copy-btn"
-          class="px-4 py-2 font-semibold border rounded-md bg-blue-600 border-blue-600 text-white hover:bg-white hover:text-blue-600"
+          class="px-4 py-2 font-semibold rounded-md bg-blue-600 text-white"
           type="button"
         >
           Copy to clipboard
         </button>
       </div>
-      <pre class="bg-gray-50 border rounded-md border-gray-600 overflow-x-scroll">
+      <pre class="bg-gray-100 dark:bg-neutral-800 border rounded-md border-gray-600 overflow-x-scroll">
           {
             contents
               .split('\n')
@@ -40,11 +40,13 @@ interface LineProps {
 function Line({ line, index }: LineProps) {
   const classes = [
     "before:bg-white",
+    "before:dark:bg-inherit",
     "before:text-gray-600",
+    "before:dark:text-gray-400",
     "before:inline-block",
     "before:mr-4",
     "before:pr-4",
-    "before:w-14",
+    "before:w-16",
     "before:text-right",
     "before:content-[attr(data-line-number)]",
     "before:border-r",

routes/_404.tsx

@@ -8,13 +8,13 @@ export default function NotFound() {
       </Head>
       <main class="my-24 text-center">
         <h2 class="text-3xl font-bold mb-4">Paste not found</h2>
-        <p>
+        <p class="text-gray-600 dark:text-gray-400">
           Sorry, we couldn't find the paste you're looking for.
         </p>
-        <p class="mb-8">
+        <p class="mb-8 text-gray-600 dark:text-gray-400">
           Pastes are automatically deleted after one hour.
         </p>
-        <a class="text-gray-900 hover:underline" href="/">
+        <a class="hover:underline" href="/">
           Back to home
         </a>
       </main>

routes/_500.tsx

@@ -13,8 +13,8 @@ export default function Error({ error }: PageProps) {
       </Head>
       <main class="my-24 text-center">
         <h2 class="text-3xl font-bold mb-4">Server error</h2>
-        <p class="mb-8">{message}</p>
-        <a class="text-gray-900 hover:underline" href="/">
+        <p class="mb-8 text-gray-600 dark:text-gray-400">{message}</p>
+        <a class="hover:underline" href="/">
           Back to home
         </a>
       </main>

static/styles.css

@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+:root {
+  color-scheme: light dark;
+}