darker shadows in dark mode

src/components/account.tsx

···
       <Show when={openManager()}>
         <dialog
           ref={setModal}
-          class="starting:backdrop-brightness-100 fixed left-0 top-0 z-20 flex h-screen w-screen items-center justify-center bg-transparent backdrop-brightness-50 transition duration-300"
+          class="starting:backdrop-brightness-100 backdrop-brightness-40 fixed left-0 top-0 z-20 flex h-screen w-screen items-center justify-center bg-transparent transition duration-300"
         >
-          <div class="starting:opacity-0 dark:bg-dark-300 absolute top-12 rounded-md bg-zinc-100 p-4 text-slate-900 transition-opacity duration-300 dark:text-slate-100">
+          <div class="starting:opacity-0 dark:bg-dark-500 absolute top-12 rounded-md bg-zinc-100 p-4 text-slate-900 transition-opacity duration-300 dark:text-slate-100">
             <h3 class="mb-2 font-bold">Manage accounts</h3>
             <div class="border-b-0.5 mb-2 max-h-[20rem] overflow-y-auto border-neutral-500 pb-2 md:max-h-[25rem]">
               <For each={Object.keys(sessions)}>
···
       <button onclick={() => setOpenManager(true)}>
         <Tooltip text="Accounts">
           {loginState() && avatar() ?
-            <img src={avatar()} class="size-5 rounded-full shadow-sm" />
+            <img src={avatar()} class="dark:shadow-dark-900 size-5 rounded-full shadow-sm" />
           : <div class="i-lucide-circle-user-round text-xl" />}
         </Tooltip>
       </button>

src/components/backlinks.tsx

···
             <button
               type="button"
               onclick={() => setMore(true)}
-              class="dark:hover:bg-dark-100 dark:bg-dark-300 focus:outline-1.5 rounded-lg bg-white px-2 py-1.5 text-xs font-bold shadow-sm hover:bg-zinc-200 focus:outline-blue-500"
+              class="dark:hover:bg-dark-100 dark:bg-dark-300 focus:outline-1.5 rounded-lg bg-white px-2 py-1.5 text-xs font-bold shadow-sm hover:bg-zinc-200 focus:outline-blue-500 dark:shadow-dark-900"
             >
               Load More
             </button>

src/components/create.tsx

···
       <Show when={openDialog()}>
         <dialog
           ref={setModal}
-          class="starting:backdrop-brightness-100 fixed left-0 top-0 z-20 flex h-screen w-screen items-center justify-center bg-transparent backdrop-brightness-50 transition duration-300"
+          class="starting:backdrop-brightness-100 backdrop-brightness-40 fixed left-0 top-0 z-20 flex h-screen w-screen items-center justify-center bg-transparent transition duration-300"
         >
-          <div class="starting:opacity-0 dark:bg-dark-300 w-21rem sm:w-xl absolute top-12 rounded-md bg-zinc-100 p-2 text-slate-900 transition-opacity duration-300 sm:p-4 lg:w-[50rem] dark:text-slate-100">
+          <div class="starting:opacity-0 dark:bg-dark-500 w-21rem sm:w-xl absolute top-12 rounded-md bg-zinc-100 p-2 text-slate-900 transition-opacity duration-300 sm:p-4 lg:w-[50rem] dark:text-slate-100">
             <div class="mb-2 flex w-full justify-between">
               <h3 class="font-bold">{props.create ? "Creating" : "Editing"} record</h3>
               <div
···
                   <select
                     name="validate"
                     id="validate"
-                    class="dark:bg-dark-100 focus:outline-1.5 rounded-lg bg-white px-1 py-1 shadow-sm focus:outline-blue-500"
+                    class="dark:bg-dark-100 focus:outline-1.5 dark:shadow-dark-900 rounded-lg bg-white px-1 py-1 shadow-sm focus:outline-blue-500"
                   >
                     <option value="unset">Unset</option>
                     <option value="true">True</option>
···
                         createRecord(new FormData(formRef))
                       : editRecord(new FormData(formRef))
                     }
-                    class="focus:outline-1.5 rounded-lg bg-blue-500 px-2 py-1.5 text-xs font-bold text-slate-100 shadow-sm hover:bg-blue-400 focus:outline-blue-500 sm:text-sm dark:bg-blue-600 dark:hover:bg-blue-500"
+                    class="focus:outline-1.5 dark:shadow-dark-900 rounded-lg bg-blue-500 px-2 py-1.5 text-xs font-bold text-slate-100 shadow-sm hover:bg-blue-400 focus:outline-blue-500 sm:text-sm dark:bg-blue-600 dark:hover:bg-blue-500"
                   >
                     Confirm
                   </button>

src/components/editor.tsx

···
     });
   });
 
-  return <div ref={editorDiv} class="h-20rem sm:h-24rem shadow-sm"></div>;
+  return <div ref={editorDiv} class="h-20rem sm:h-24rem dark:shadow-dark-900 shadow-sm"></div>;
 };
 
 export { Editor, editor };

src/components/search.tsx

···
         </label>
       </div>
       <div class="flex w-full items-center gap-2">
-        <div class="dark:bg-dark-100 focus-within:outline-1.5 flex grow items-center gap-2 rounded-lg bg-white px-2 py-1 shadow-sm focus-within:outline-blue-500">
+        <div class="dark:bg-dark-100 focus-within:outline-1.5 dark:shadow-dark-900 flex grow items-center gap-2 rounded-lg bg-white px-2 py-1 shadow-sm focus-within:outline-blue-500">
           <input
             type="text"
             spellcheck={false}

src/components/settings.tsx

···
       <Show when={openSettings()}>
         <dialog
           ref={setModal}
-          class="starting:backdrop-brightness-100 fixed left-0 top-0 z-20 flex h-screen w-screen items-center justify-center bg-transparent backdrop-brightness-50 transition duration-300"
+          class="starting:backdrop-brightness-100 backdrop-brightness-40 fixed left-0 top-0 z-20 flex h-screen w-screen items-center justify-center bg-transparent transition duration-300"
         >
-          <div class="starting:opacity-0 dark:bg-dark-300 absolute top-12 rounded-md bg-zinc-100 p-4 text-slate-900 transition-opacity duration-300 dark:text-slate-100">
+          <div class="starting:opacity-0 dark:bg-dark-500 absolute top-12 rounded-md bg-zinc-100 p-4 text-slate-900 transition-opacity duration-300 dark:text-slate-100">
             <h3 class="border-b-0.5 mb-2 border-neutral-500 pb-2 font-bold">Settings</h3>
             <h4 class="mb-1 font-semibold">Theme</h4>
             <div class="w-xs flex gap-2">

src/components/text-input.tsx

···
       disabled={props.disabled}
       required={props.required}
       class={
-        "dark:bg-dark-100 focus:outline-1.5 rounded-lg bg-white px-2 py-1 shadow-sm focus:outline-blue-500 " +
+        "dark:bg-dark-100 focus:outline-1.5 rounded-lg bg-white px-2 py-1 shadow-sm focus:outline-blue-500 dark:shadow-dark-900 " +
         props.class
       }
       onInput={props.onInput}

src/components/tooltip.tsx

···
       <Show when={!isTouchDevice}>
         <span
           style={`transform: translate(-50%, 28px); min-width: ${width}ch`}
-          class={`left-50% border-0.5 pointer-events-none absolute z-10 hidden select-none whitespace-nowrap rounded border-neutral-300 bg-white p-1 text-center font-sans text-xs text-slate-900 shadow-md group-hover/tooltip:inline dark:border-neutral-600 dark:bg-neutral-800 dark:text-slate-100`}
+          class={`left-50% border-0.5 dark:shadow-dark-900 pointer-events-none absolute z-10 hidden select-none whitespace-nowrap rounded border-neutral-300 bg-white p-1 text-center font-sans text-xs text-slate-900 shadow-md group-hover/tooltip:inline dark:border-neutral-600 dark:bg-neutral-800 dark:text-slate-100`}
         >
           {props.text}
         </span>

src/layout.tsx

···
         </Show>
       </div>
       <Show when={copyNotice()}>
-        <div class="dark:bg-dark-100 fixed bottom-8 z-10 flex items-center rounded-md bg-neutral-200 p-2 shadow-md">
+        <div class="dark:bg-dark-100 dark:shadow-dark-900 fixed bottom-8 z-10 flex items-center rounded-md bg-neutral-200 p-2 shadow-md">
           <div class="i-lucide-clipboard-check mr-1 text-xl" />
           Copied to clipboard
         </div>

src/views/blob.tsx

···
         <button
           type="button"
           onclick={() => refetch()}
-          class="dark:hover:bg-dark-100 dark:bg-dark-300 focus:outline-1.5 rounded-lg bg-white px-2 py-1.5 text-xs font-bold shadow-sm hover:bg-zinc-200 focus:outline-blue-500"
+          class="dark:hover:bg-dark-100 dark:bg-dark-300 focus:outline-1.5 rounded-lg bg-white px-2 py-1.5 text-xs font-bold shadow-sm hover:bg-zinc-200 focus:outline-blue-500 dark:shadow-dark-900"
         >
           Load More
         </button>

src/views/collection.tsx

···
       <Show when={hover()}>
         <span
           ref={previewRef}
-          class={`dark:bg-dark-500/70 left-50% max-h-md z-25 backdrop-blur-xs border-0.5 pointer-events-none absolute block w-max max-w-sm -translate-x-1/2 overflow-hidden whitespace-pre-wrap rounded-md border-neutral-300 bg-zinc-100/70 p-2 text-xs shadow-md lg:max-w-lg dark:border-neutral-700 ${isOverflowing(previewHeight()) ? "bottom-7" : "top-7"}`}
+          class={`dark:bg-dark-500/70 left-50% max-h-md z-25 backdrop-blur-xs border-0.5 dark:shadow-dark-900 pointer-events-none absolute block w-max max-w-sm -translate-x-1/2 overflow-hidden whitespace-pre-wrap rounded-md border-neutral-300 bg-zinc-100/70 p-2 text-xs shadow-md lg:max-w-lg dark:border-neutral-700 ${isOverflowing(previewHeight()) ? "bottom-7" : "top-7"}`}
         >
           <JSONValue
             data={props.record.record.value as JSONType}
···
                 <button
                   type="button"
                   onclick={() => refetch()}
-                  class="dark:hover:bg-dark-100 dark:bg-dark-300 focus:outline-1.5 rounded-lg bg-white px-2 py-1.5 text-xs font-bold shadow-sm hover:bg-zinc-200 focus:outline-blue-500"
+                  class="dark:hover:bg-dark-100 dark:bg-dark-300 focus:outline-1.5 dark:shadow-dark-900 rounded-lg bg-white px-2 py-1.5 text-xs font-bold shadow-sm hover:bg-zinc-200 focus:outline-blue-500"
                 >
                   Load More
                 </button>

src/views/labels.tsx

···
             spellcheck={false}
             rows={3}
             value={searchParams.uriPatterns ?? "*"}
-            class="dark:bg-dark-100 focus:outline-1.5 mb-1 grow rounded-lg bg-white px-2 py-1 shadow-sm focus:outline-blue-500"
+            class="dark:bg-dark-100 focus:outline-1.5 mb-1 grow rounded-lg bg-white px-2 py-1 shadow-sm focus:outline-blue-500 dark:shadow-dark-900"
           />
           <div class="flex justify-center">
             <Show when={!response.loading}>
···
                 <button
                   type="button"
                   onclick={() => refetch()}
-                  class="dark:hover:bg-dark-100 dark:bg-dark-300 focus:outline-1.5 rounded-lg bg-white px-2 py-1.5 text-xs font-bold shadow-sm hover:bg-zinc-200 focus:outline-blue-500"
+                  class="dark:hover:bg-dark-100 dark:bg-dark-300 focus:outline-1.5 rounded-lg bg-white px-2 py-1.5 text-xs font-bold shadow-sm hover:bg-zinc-200 focus:outline-blue-500 dark:shadow-dark-900"
                 >
                   Load More
                 </button>

src/views/pds.tsx

···
             <button
               type="button"
               onclick={() => refetch()}
-              class="dark:hover:bg-dark-100 dark:bg-dark-300 focus:outline-1.5 mt-2 rounded-lg bg-white px-2 py-1.5 text-xs font-bold shadow-sm hover:bg-zinc-200 focus:outline-blue-500"
+              class="dark:hover:bg-dark-100 dark:bg-dark-300 focus:outline-1.5 mt-2 rounded-lg bg-white px-2 py-1.5 text-xs font-bold shadow-sm hover:bg-zinc-200 focus:outline-blue-500 dark:shadow-dark-900"
             >
               Load More
             </button>

src/views/record.tsx

···
                 <button
                   type="button"
                   onclick={deleteRecord}
-                  class="left-50% w-7rem absolute top-7 z-50 -translate-x-1/2 rounded-lg bg-red-500 px-2 py-1.5 text-sm font-bold text-slate-100 shadow-sm hover:bg-red-400 dark:bg-red-600 dark:hover:bg-red-500"
+                  class="left-50% w-7rem dark:shadow-dark-900 absolute top-7 z-50 -translate-x-1/2 rounded-lg bg-red-500 px-2 py-1.5 text-sm font-bold text-slate-100 shadow-sm hover:bg-red-400 dark:bg-red-600 dark:hover:bg-red-500"
                 >
                   Delete record
                 </button>

src/views/repo.tsx

···
                     <button
                       type="button"
                       onclick={() => downloadRepo()}
-                      class="dark:hover:bg-dark-100 dark:bg-dark-300 focus:outline-1.5 flex items-center gap-1 rounded-lg bg-white px-2 py-1.5 text-xs font-bold shadow-sm hover:bg-zinc-200 focus:outline-blue-500"
+                      class="dark:hover:bg-dark-100 dark:bg-dark-300 focus:outline-1.5 flex items-center gap-1 rounded-lg bg-white px-2 py-1.5 text-xs font-bold shadow-sm hover:bg-zinc-200 focus:outline-blue-500 dark:shadow-dark-900"
                     >
                       <div class="i-lucide-download text-sm" />
                       Export Repo

src/views/stream.tsx

···
                 spellcheck={false}
                 placeholder="Comma-separated list of collections"
                 value={searchParams.collections ?? ""}
-                class="w-16rem dark:bg-dark-100 focus:outline-1.5 rounded-lg bg-white px-2 py-1 shadow-sm focus:outline-blue-500"
+                class="w-16rem dark:bg-dark-100 focus:outline-1.5 rounded-lg bg-white px-2 py-1 shadow-sm focus:outline-blue-500 dark:shadow-dark-900"
               />
             </label>
           </Show>
···
                 spellcheck={false}
                 placeholder="Comma-separated list of DIDs"
                 value={searchParams.dids ?? ""}
-                class="w-16rem dark:bg-dark-100 focus:outline-1.5 rounded-lg bg-white px-2 py-1 shadow-sm focus:outline-blue-500"
+                class="w-16rem dark:bg-dark-100 focus:outline-1.5 rounded-lg bg-white px-2 py-1 shadow-sm focus:outline-blue-500 dark:shadow-dark-900"
               />
             </label>
           </Show>
···
           <button
             type="button"
             onclick={() => connectSocket(new FormData(formRef))}
-            class="dark:hover:bg-dark-100 dark:bg-dark-300 focus:outline-1.5 w-fit rounded-lg bg-white px-2 py-1.5 text-xs font-bold shadow-sm hover:bg-zinc-200 focus:outline-blue-500"
+            class="dark:hover:bg-dark-100 dark:bg-dark-300 focus:outline-1.5 w-fit rounded-lg bg-white px-2 py-1.5 text-xs font-bold shadow-sm hover:bg-zinc-200 focus:outline-blue-500 dark:shadow-dark-900"
           >
             {connected() ? "Disconnect" : "Connect"}
           </button>