diff --git a/frontend/components/HomepageHero.tsx b/frontend/components/HomepageHero.tsx
index 4548e2810..7d2857843 100644
--- a/frontend/components/HomepageHero.tsx
+++ b/frontend/components/HomepageHero.tsx
@@ -25,7 +25,7 @@ export function HomepageHero(
 ) {
   return (
     <div
-      class="w-screen -ml-[calc(50vw-50%)] -mt-6 bg-repeat py-32 lg:pt-48 relative before:absolute before:left-0 before:right-0 before:h-32 before:bg-gradient-to-t before:from-white before:bottom-0 before:z-10 before:pointer-events-none"
+      class="w-screen -ml-[calc(50vw-50%)] -mt-6 bg-repeat py-32 lg:pt-48 relative before:absolute before:left-0 before:right-0 before:h-32 before:bg-gradient-to-t before:from-white before:bottom-0 before:z-10 before:pointer-events-none  dark:before:from-slate-900"
       id="particles-js"
     >
       <HomepageHeroParticles />
@@ -39,16 +39,14 @@ export function HomepageHero(
             <span className="sr-only">JSR</span>
             <AnimatedLogo />
             <div
-              class="text-2xl text-balance leading-[1.1] sm:text-3xl md:text-3xl lg:text-4xl opsize-normal md:opsize-sm text-center -mt-5 md:-mt-6 max-w-[20em]"
-              style="text-shadow: 0 0 2em white, 0 0 1em white, 0 0 0.5em white, 0 0 0.25em white, 0 0 3em white, 0 0 0.5em white;"
+              class="text-2xl text-balance leading-[1.1] sm:text-3xl md:text-3xl lg:text-4xl opsize-normal md:opsize-sm text-center -mt-5 md:-mt-6 max-w-[20em] superShadow"
             >
               The <b class="font-semibold">open-source package registry</b>{" "}
               for modern JavaScript and TypeScript
             </div>
           </h1>
           <div
-            class="flex flex-row gap-3 items-center justify-center mt-4 pointer-events-auto"
-            style="text-shadow: 0 0 2em white, 0 0 1em white, 0 0 0.5em white, 0 0 0.25em white, 0 0 3em white, 0 0 0.5em white;"
+            class="flex flex-row gap-3 items-center justify-center mt-4 pointer-events-auto superShadow"
           >
             <a class="underline text-sm relative z-10" href="/docs">
               Docs
diff --git a/frontend/components/List.tsx b/frontend/components/List.tsx
index c7d1a9e40..706365238 100644
--- a/frontend/components/List.tsx
+++ b/frontend/components/List.tsx
@@ -21,7 +21,7 @@ export function ListDisplay(
     <div class="mt-8 border-1.5 border-jsr-cyan-950 rounded overflow-hidden">
       {title &&
         (
-          <div class="px-5 py-4 flex items-center justify-between border-b border-jsr-cyan-300 bg-slate-100 leading-none">
+          <div class="px-5 py-4 flex items-center justify-between border-b border-jsr-cyan-300 bg-slate-100 leading-none dark:bg-slate-900">
             <span class="font-semibold">{title}</span>
             <div />
           </div>
@@ -72,7 +72,7 @@ function Pagination(
 
   return (
     <nav
-      class="flex items-center justify-between border-t border-jsr-cyan-900/10 bg-white px-4 py-3 sm:px-6"
+      class="flex items-center justify-between border-t border-jsr-cyan-900/10 bg-white px-4 py-3 sm:px-6 dark:bg-slate-900"
       aria-label="Pagination"
     >
       <Head>
@@ -88,7 +88,7 @@ function Pagination(
       </Head>
 
       <div class="hidden sm:block">
-        <p class="text-sm text-gray-700">
+        <p class="text-sm text-gray-700 dark:text-gray-300">
           {start + itemsCount === 0 ? "No results found" : (
             <>
               Showing <span class="font-semibold">{start + 1}</span> to{" "}
@@ -104,7 +104,7 @@ function Pagination(
           ? (
             <a
               href={prevURL.pathname + prevURL.search}
-              class="relative inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-offset-0 select-none"
+              class="relative inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-offset-0 select-none dark:text-gray-300 dark:hover:bg-gray-800 dark:bg-gray-900"
             >
               Previous
             </a>
@@ -114,7 +114,7 @@ function Pagination(
           ? (
             <a
               href={nextURL.pathname + nextURL.search}
-              class="relative ml-3 inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-offset-0 select-none"
+              class="relative ml-3 inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-offset-0 select-none dark:text-gray-300 dark:hover:bg-gray-800 dark:bg-gray-900"
             >
               Next
             </a>
diff --git a/frontend/components/ListPanel.tsx b/frontend/components/ListPanel.tsx
index ab4fb62ca..85b311d3b 100644
--- a/frontend/components/ListPanel.tsx
+++ b/frontend/components/ListPanel.tsx
@@ -30,7 +30,7 @@ export function ListPanel(
       <ol class="border-1.5 border-jsr-cyan-950 rounded list-none overflow-hidden">
         {children.map((entry) => {
           return (
-            <li class="odd:bg-jsr-cyan-50">
+            <li class="odd:bg-jsr-cyan-50 dark:odd:bg-jsr-cyan-900">
               <a
                 class={`flex px-4 items-center py-3 group focus-visible:ring-2 ring-jsr-cyan-700 ring-inset outline-none hover:bg-jsr-yellow-200 focus-visible:bg-jsr-yellow-200 ${
                   entry.value === selected ? "text-cyan-700 font-bold" : ""
@@ -41,7 +41,7 @@ export function ListPanel(
                   {entry.value}
                 </span>
                 {entry.label && (
-                  <div class="chip bg-jsr-cyan-200 truncate">
+                  <div class="chip bg-jsr-cyan-200 truncate dark:bg-jsr-cyan-800">
                     {entry.label}
                   </div>
                 )}
diff --git a/frontend/components/Markdown.tsx b/frontend/components/Markdown.tsx
index ecb591d08..5a3ce6af0 100644
--- a/frontend/components/Markdown.tsx
+++ b/frontend/components/Markdown.tsx
@@ -24,7 +24,10 @@ export function Markdown(
     mediaBaseUrl: mediaBaseURL,
   });
   return (
-    <div
+    <main
+      data-color-mode="auto"
+      data-light-theme="light"
+      data-dark-theme="dark"
       class="markdown-body"
       dangerouslySetInnerHTML={{ __html: html }}
     />
diff --git a/frontend/components/Nav.tsx b/frontend/components/Nav.tsx
index fed81d5da..717f2f0d6 100644
--- a/frontend/components/Nav.tsx
+++ b/frontend/components/Nav.tsx
@@ -22,9 +22,9 @@ export interface NavItemProps {
 export function NavItem(props: NavItemProps) {
   return (
     <a
-      class={`md:px-3 px-4 py-2 text-sm md:text-base min-h-10 leading-none rounded-md md:rounded-t-md md:rounded-b-none hover:bg-jsr-cyan-100 flex items-center select-none ${
+      class={`md:px-3 px-4 py-2 text-sm md:text-base min-h-10 leading-none rounded-md md:rounded-t-md md:rounded-b-none hover:bg-jsr-cyan-100 flex items-center select-none dark:hover:bg-jsr-cyan-800 dark:text-white ${
         props.active
-          ? "bg-jsr-cyan-50 md:border-r-1 md:border-t-1 md:border-l-1 md:border-b-0 border-1 border-jsr-cyan-300/30 font-semibold"
+          ? "bg-jsr-cyan-50 md:border-r-1 md:border-t-1 md:border-l-1 md:border-b-0 border-1 border-jsr-cyan-300/30 font-semibold dark:bg-jsr-cyan-900 dark:border-jsr-cyan-700 dark:text-white"
           : ""
       }`}
       href={props.href}
diff --git a/frontend/components/PackageHit.tsx b/frontend/components/PackageHit.tsx
index c96c1c818..57a0c923b 100644
--- a/frontend/components/PackageHit.tsx
+++ b/frontend/components/PackageHit.tsx
@@ -34,7 +34,7 @@ export function PackageHit(pkg: OramaPackageHit | Package): ListDisplayItem {
               style={`background-image: conic-gradient(transparent, transparent ${pkg.score}%, #e7e8e8 ${pkg.score}%)`}
               title="Package score"
             >
-              <div class="rounded-full aspect-square bg-white text-xs flex items-center justify-center font-semibold min-w-6">
+              <div class="rounded-full aspect-square bg-white text-xs flex items-center justify-center font-semibold min-w-6 dark:bg-black dark:text-white">
                 {pkg.score}
               </div>
             </div>
diff --git a/frontend/islands/GlobalSearch.tsx b/frontend/islands/GlobalSearch.tsx
index 662f8d048..444d40f6d 100644
--- a/frontend/islands/GlobalSearch.tsx
+++ b/frontend/islands/GlobalSearch.tsx
@@ -224,7 +224,7 @@ export function GlobalSearch(
         <input
           type="text"
           name="search"
-          class={`block w-full search-input bg-white/90 input rounded-r-none ${sizeClasses} relative`}
+          class={`block w-full search-input bg-white/90 input rounded-r-none ${sizeClasses} relative dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500`}
           placeholder={placeholder}
           value={query}
           onInput={onInput}
@@ -240,7 +240,7 @@ export function GlobalSearch(
 
         <button
           type="submit"
-          class="button bg-cyan-950 text-white px-4 rounded-l-none hover:bg-cyan-800 focus-visible:bg-cyan-800 outline-cyan-600 transition-colors duration-150"
+          class="button bg-cyan-950 text-white px-4 rounded-l-none hover:bg-cyan-800 focus-visible:bg-cyan-800 outline-cyan-600 transition-colors duration-150 dark:bg-cyan-900 dark:text-white dark:hover:bg-cyan-800 dark:focus-visible:bg-cyan-800 dark:outline-cyan-600"
           onMouseDown={() => {
             btnSubmit.value = true;
           }}
@@ -255,7 +255,7 @@ export function GlobalSearch(
             stroke-width={2.5}
             aria-label="search"
             stroke="currentColor"
-            class="w-4 h-4"
+            class="size-4"
           >
             <path
               strokeLinecap="round"
@@ -304,12 +304,12 @@ function SuggestionList(
   if (!showSuggestions.value) return null;
 
   return (
-    <div class="absolute bg-white w-full sibling:bg-red-500 border-1.5 border-jsr-cyan-950 rounded-lg z-40 overflow-hidden top-0.5">
+    <div class="absolute bg-white w-full sibling:bg-red-500 border-1.5 border-jsr-cyan-950 rounded-lg z-40 overflow-hidden top-0.5 dark:bg-gray-800 dark:border-gray-700">
       {suggestions.value === null
-        ? <div class="bg-white text-gray-500 px-4">...</div>
+        ? <div class="bg-white text-gray-500 px-4 dark:bg-gray-800 dark:text-gray-500">...</div>
         : suggestions.value?.length === 0
         ? (
-          <div class="bg-white text-gray-500 px-4 py-2">
+          <div class="bg-white text-gray-500 px-4 py-2 dark:bg-gray-800 dark:text-gray-500">
             No matching results to display
           </div>
         )
@@ -324,7 +324,7 @@ function SuggestionList(
               return (
                 <li
                   key={i}
-                  class="p-2 hover:bg-gray-100 cursor-pointer aria-[selected=true]:bg-cyan-100"
+                  class="p-2 hover:bg-gray-100 cursor-pointer aria-[selected=true]:bg-cyan-100 dark:hover:bg-gray-700 dark:aria-[selected=true]:bg-cyan-700"
                   aria-selected={selected}
                 >
                   <a href={hit.href} class="bg-red-600">
@@ -335,8 +335,8 @@ function SuggestionList(
             })}
           </ul>
         )}
-      <div class="bg-gray-100 flex items-center justify-end py-1 px-2 gap-1">
-        <span class="text-sm text-gray-500">
+      <div class="bg-gray-100 flex items-center justify-end py-1 px-2 gap-1 dark:bg-gray-700">
+        <span class="text-sm text-gray-500 dark:text-gray-400">
           powered by <span class="sr-only">Orama</span>
         </span>
         <img class="h-4" src="/logos/orama-dark.svg" alt="" />
@@ -377,7 +377,7 @@ function DocsHit(hit: OramaDocsHit, input: Signal<string>): ListDisplayItem {
           </div>
         )}
         <div
-          class="text-sm text-gray-600"
+          class="text-sm text-gray-600 dark:text-gray-400"
           dangerouslySetInnerHTML={{
             __html: highlighter.highlight(hit.content, input.value)
               .trim(100),
diff --git a/frontend/islands/new.tsx b/frontend/islands/new.tsx
index 4519e9e80..b76a6ff13 100644
--- a/frontend/islands/new.tsx
+++ b/frontend/islands/new.tsx
@@ -18,7 +18,7 @@ interface IconColorProps {
 export function IconCircle({ done, children }: IconColorProps) {
   const color = useComputed(() => {
     if (done.value) return "bg-green-600 text-white";
-    return "bg-jsr-gray-0 text-black";
+    return "bg-jsr-gray-0 text-black dark:bg-gray-800 dark:text-white";
   });
   return (
     <div class={color + " hidden md:block rounded-full p-1.75"}>
diff --git a/frontend/routes/@[scope]/~/settings.tsx b/frontend/routes/@[scope]/~/settings.tsx
index 75865acc4..a82751d27 100644
--- a/frontend/routes/@[scope]/~/settings.tsx
+++ b/frontend/routes/@[scope]/~/settings.tsx
@@ -236,7 +236,7 @@ function DeleteScope({ scope }: { scope: FullScope }) {
   return (
     <form class="mb-8 mt-8" method="POST">
       <h2 class="text-lg font-semibold">Delete scope</h2>
-      <p class="mt-2 text-gray-600 max-w-3xl">
+      <p class="mt-2 text-gray-600 max-w-3xl dark:text-gray-400">
         Deleting the scope will immediately allow other users to claim the scope
         and publish packages to it. This action cannot be undone.
       </p>
diff --git a/frontend/routes/auth.tsx b/frontend/routes/auth.tsx
index 4a187ebfb..2333cc852 100644
--- a/frontend/routes/auth.tsx
+++ b/frontend/routes/auth.tsx
@@ -28,7 +28,7 @@ export default function AuthPage({ data }: PageProps<Data>) {
           </title>
         </Head>
         <h1 class="text-lg font-semibold">Authorization</h1>
-        <p class="mt-2 text-gray-600 max-w-3xl">
+        <p class="mt-2 text-gray-600 max-w-3xl dark:text-gray-400">
           To authorize a request, enter the code shown in the application.
         </p>
         <form action="/auth" method="GET" class="mt-8">
diff --git a/frontend/routes/docs/[...id].tsx b/frontend/routes/docs/[...id].tsx
index 0cb6b7fcc..c48e194fb 100644
--- a/frontend/routes/docs/[...id].tsx
+++ b/frontend/routes/docs/[...id].tsx
@@ -34,7 +34,7 @@ export default function Page({ data }: PageProps<Data, State>) {
       </Head>
 
       <div class="grid grid-cols-1 md:grid-cols-10">
-        <nav class="pb-10 md:border-r-1.5 md:col-span-3 lg:col-span-2 order-2 md:order-1 border-t-1.5 border-cyan-900 md:border-t-0 md:border-slate-300 pt-4 md:pt-0">
+        <nav class="pb-10 md:border-r-1.5 md:col-span-3 lg:col-span-2 order-2 md:order-1 border-t-1.5 border-cyan-900 md:border-t-0 md:border-slate-300 pt-4 md:pt-0 dark:border-cyan-200 dark:border-slate-800">
           <div>
             <p class="text-xl font-semibold" id="sidebar">Docs</p>
           </div>
@@ -49,9 +49,9 @@ export default function Page({ data }: PageProps<Data, State>) {
                       href={`/docs/${id}`}
                       class={`${
                         id === data.id
-                          ? "px-4 text-cyan-700 border-l-4 border-cyan-400 bg-cyan-100"
+                          ? "px-4 text-cyan-700 border-l-4 border-cyan-400 bg-cyan-100 dark:text-cyan-200 dark:border-cyan-200 dark:bg-cyan-900"
                           : "pl-5 pr-4"
-                      } py-1.5 block leading-5 hover:text-gray-600 hover:underline`}
+                      } py-1.5 block leading-5 hover:text-gray-600 hover:underline dark:hover:text-gray-400`}
                     >
                       {title}
                     </a>
@@ -66,7 +66,7 @@ export default function Page({ data }: PageProps<Data, State>) {
           <p class="text-sm mb-6 -mt-2 md:hidden">
             <a href="#sidebar" class="link">View table of contents</a>
           </p>
-          <h1 class="text-4xl lg:text-5xl lg:leading-[1.1] text-balance font-medium mb-8 text-gray-900">
+          <h1 class="text-4xl lg:text-5xl lg:leading-[1.1] text-balance font-medium mb-8 text-gray-900 dark:text-gray-100">
             {data.title}
           </h1>
           <Markdown source={data.content} />
diff --git a/frontend/routes/new.tsx b/frontend/routes/new.tsx
index ad7281524..7127ba486 100644
--- a/frontend/routes/new.tsx
+++ b/frontend/routes/new.tsx
@@ -46,7 +46,7 @@ export default function New(props: PageProps<Data, State>) {
           <h1 class="mb-8 font-bold text-3xl leading-none">
             Publish a package
           </h1>
-          <p class="text-gray-900 max-w-screen-md">
+          <p class="text-gray-900 max-w-screen-md dark:text-gray-100">
             Publish your package to the JSR to share it with the world!
           </p>
           <p>
@@ -61,11 +61,11 @@ export default function New(props: PageProps<Data, State>) {
         <div class="space-y-8">
           <div class="flex items-start gap-4">
             <IconCircle done={scope}>
-              <IconFolder class="h-5 w-5" />
+              <IconFolder class="size-5" />
             </IconCircle>
             <div class="w-full">
               <h2 class="font-bold text-2xl leading-none">Scope</h2>
-              <p class="mt-2 mb-4 text-gray-500 text-base">
+              <p class="mt-2 mb-4 text-gray-500 text-base dark:text-gray-300">
                 Choose which scope your package will be published to. Scopes are
                 namespaces for packages.
               </p>
@@ -80,8 +80,8 @@ export default function New(props: PageProps<Data, State>) {
                   />
                 )
                 : (
-                  <div class="space-y-4 bg-gray-50 border-gray-100 p-4 rounded-xl">
-                    <p class="text-gray-700">
+                  <div class="space-y-4 bg-gray-50 border-gray-100 p-4 rounded-xl dark:bg-gray-800 dark:border-gray-700">
+                    <p class="text-gray-700 dark:text-gray-300">
                       You must be logged in to publish a package.
                     </p>
                     <a
@@ -96,7 +96,7 @@ export default function New(props: PageProps<Data, State>) {
           </div>
           <div class="flex items-start gap-4">
             <IconCircle done={name}>
-              <IconPackage class="h-5 w-5" />
+              <IconPackage class="size-5" />
             </IconCircle>
             <div class="w-full">
               <h2 class="font-bold text-2xl leading-none">Package name</h2>
diff --git a/frontend/routes/package/(_components)/PackageHeader.tsx b/frontend/routes/package/(_components)/PackageHeader.tsx
index 9c92afc8f..1edf23bac 100644
--- a/frontend/routes/package/(_components)/PackageHeader.tsx
+++ b/frontend/routes/package/(_components)/PackageHeader.tsx
@@ -37,7 +37,7 @@ export function PackageHeader(
           <div class="flex items-center gap-1">
             {selectedVersion &&
               pkg.latestVersion === selectedVersion?.version && (
-              <div class="chip sm:big-chip bg-jsr-yellow-400 select-none">
+              <div class="chip sm:big-chip bg-jsr-yellow-400 select-none dark:bg-jsr-yellow-500 text-black dark:text-white">
                 latest
               </div>
             )}
@@ -61,7 +61,7 @@ export function PackageHeader(
                 }`}
                 style={`background-image: conic-gradient(transparent, transparent ${pkg.score}%, #e7e8e8 ${pkg.score}%)`}
               >
-                <span class="rounded-full w-full h-full bg-white flex justify-center items-center text-center font-bold">
+                <span class="rounded-full w-full h-full bg-white flex justify-center items-center text-center font-bold dark:bg-black">
                   {pkg.score}%
                 </span>
               </div>
@@ -76,7 +76,9 @@ export function PackageHeader(
         </div>
       </div>
       {pkg.description && (
-        <p class="text-gray-600 max-w-3xl">{pkg.description}</p>
+        <p class="text-gray-600 max-w-3xl dark:text-gray-400">
+          {pkg.description}
+          </p>
       )}
       {pkg.githubRepository && (
         <a
diff --git a/frontend/routes/package/(_components)/PackageNav.tsx b/frontend/routes/package/(_components)/PackageNav.tsx
index dfbbb59ad..36e647434 100644
--- a/frontend/routes/package/(_components)/PackageNav.tsx
+++ b/frontend/routes/package/(_components)/PackageNav.tsx
@@ -57,7 +57,7 @@ export function PackageNav(
       <NavItem href={`${base}/versions`} active={currentTab === "Versions"}>
         <span class="flex items-center">
           Versions
-          <span class="chip tabular-nums bg-jsr-cyan-200 ml-2 leading-[0] w-[1.5em] aspect-square flex items-center justify-center">
+          <span class="chip tabular-nums bg-jsr-cyan-200 ml-2 leading-[0] w-[1.5em] aspect-square flex items-center justify-center dark:bg-jsr-cyan-800">
             {versionCount}
           </span>
         </span>
diff --git a/frontend/routes/package/settings.tsx b/frontend/routes/package/settings.tsx
index 95236ad82..2a424b0ac 100644
--- a/frontend/routes/package/settings.tsx
+++ b/frontend/routes/package/settings.tsx
@@ -55,7 +55,7 @@ export default function Settings({ data, params }: PageProps<Data, State>) {
         <div class="border-t pt-8 mt-12">
           <h2 class="text-xl font-sans font-bold">Staff area</h2>
 
-          <p class="mt-2 text-gray-600 max-w-3xl">
+          <p class="mt-2 text-gray-600 max-w-3xl dark:text-gray-400">
             Feature a package on the homepage.
           </p>
 
@@ -73,11 +73,11 @@ function GitHubRepository(props: { package: Package }) {
     <div class="border-t pt-8 mt-12">
       <h2 class="text-xl font-sans font-bold">GitHub Repository</h2>
 
-      <p class="mt-2 text-gray-600 max-w-3xl">
+      <p class="mt-2 text-gray-600 max-w-3xl dark:text-gray-400">
         The GitHub repository is shown publicly on the package page.
       </p>
 
-      <p class="mt-2 mb-4 text-gray-600 max-w-3xl">
+      <p class="mt-2 mb-4 text-gray-600 max-w-3xl dark:text-gray-400">
         Specifying a GitHub repository also enables securely publishing from
         GitHub Actions using OIDC — no need to specify tokens or secrets.{" "}
         <a
@@ -102,7 +102,7 @@ function DescriptionEditor(props: { description: string }) {
     <form class="mt-8" method="POST">
       <h2 class="text-xl font-sans font-bold">Description</h2>
 
-      <p class="mt-2 text-gray-600 max-w-3xl">
+      <p class="mt-2 text-gray-600 max-w-3xl dark:text-gray-400">
         The package description is shown on the package page and in search
         results.
       </p>
@@ -119,7 +119,7 @@ function RuntimeCompatEditor(props: { runtimeCompat: RuntimeCompat }) {
     <form class="border-t pt-8 mt-12" method="POST">
       <h2 class="text-xl font-sans font-bold">Runtime Compat</h2>
 
-      <p class="mt-2 text-gray-600 max-w-3xl">
+      <p class="mt-2 text-gray-600 max-w-3xl dark:text-gray-400">
         Set which packages this package is compatible with. This information is
         shown on the package page and in search results.
       </p>
@@ -173,7 +173,7 @@ function DeletePackage(props: { hasVersions: boolean }) {
     <form class="border-t pt-8 mt-12" method="POST">
       <h2 class="text-xl font-sans font-bold">Delete package</h2>
 
-      <p class="mt-2 text-gray-600 max-w-3xl">
+      <p class="mt-2 text-gray-600 max-w-3xl dark:text-gray-400">
         A package can only be deleted if it has no published versions.
         <br />
         This action cannot be undone.
diff --git a/frontend/routes/packages.tsx b/frontend/routes/packages.tsx
index 453d1710f..98f88f4ba 100644
--- a/frontend/routes/packages.tsx
+++ b/frontend/routes/packages.tsx
@@ -39,7 +39,7 @@ export default function PackageListPage({
         </ListDisplay>
 
         <div className="mt-2 flex flex-wrap items-start justify-between px-2">
-          <span className="text-sm text-gray-400 block">
+          <span className="text-sm text-gray-400 block dark:text-gray-500">
             Changes made in the last 15 minutes may not be visible yet.
           </span>
           <div class="flex items-center gap-1">
diff --git a/frontend/routes/status.tsx b/frontend/routes/status.tsx
index eecf924fb..a78f146c3 100644
--- a/frontend/routes/status.tsx
+++ b/frontend/routes/status.tsx
@@ -84,7 +84,7 @@ export default function PackageListPage(
           </div>
 
           {data.publishingTask.error && (
-            <div class="bg-red-100 rounded border-2 border-red-200 py-1.5 px-3 flex justify-between gap-3">
+            <div class="bg-red-100 rounded border-2 border-red-200 py-1.5 px-3 flex justify-between gap-3 dark:bg-red-500 dark:border-red-600 dark:text-white">
               <div class="space-y-1.5">
                 <div class="font-bold text-xl">
                   {data.publishingTask.error.code}
diff --git a/frontend/static/styles.css b/frontend/static/styles.css
index c90344c6f..2a067431f 100644
--- a/frontend/static/styles.css
+++ b/frontend/static/styles.css
@@ -61,8 +61,11 @@
   body {
     font-size: 1.125rem;
     font-weight: 400;
-    color: theme("colors.jsr-gray.700");
-    @apply opsize-normal;
+    @apply opsize-normal
+      bg-white
+      text-jsr-gray-700
+      dark:bg-jsr-gray-900
+      dark:text-jsr-gray-100;
   }
 
   h1,
@@ -97,56 +100,149 @@
 
 @layer components {
   .button {
-    @apply text-jsr-gray-700 inline-flex items-center gap-2 py-2.5 px-4.5 rounded-md leading-tight font-medium
-      whitespace-nowrap hover:cursor-pointer disabled:cursor-not-allowed focus:outline-4 focus:outline-offset-2 select-none;
+    @apply text-jsr-gray-700
+      inline-flex
+      items-center
+      gap-2
+      py-2.5
+      px-4.5
+      rounded-md
+      leading-tight
+      font-medium
+      whitespace-nowrap
+      hover:cursor-pointer
+      disabled:cursor-not-allowed
+      focus:outline-4
+      focus:outline-offset-2
+      select-none;
   }
 
   .button-sm {
-    @apply gap-2 py-2 px-4.5 rounded-md text-sm leading-tight font-medium whitespace-nowrap
-      hover:cursor-pointer disabled:cursor-not-allowed focus:outline-4 focus:outline-offset-2;
+    @apply gap-2
+      py-2
+      px-4.5
+      rounded-md
+      text-sm
+      leading-tight
+      font-medium
+      whitespace-nowrap
+      hover:cursor-pointer
+      disabled:cursor-not-allowed
+      focus:outline-4
+      focus:outline-offset-2;
   }
 
   .button-primary {
-    @apply button border-1.5 border-cyan-900 hover:border-cyan-600 bg-jsr-yellow text-cyan-950
-      font-bold hover:bg-jsr-yellow-300 transition-all duration-75 ease-in-out focus:bg-jsr-yellow-300 outline-cyan-700
-      outline-offset-2 disabled:bg-gray-100 disabled:text-gray-300 shadow-accent-sm disabled:shadow-transparent
-    disabled:border-gray-300 active:shadow-accent-sm-close active:translate-x-[3px] active:translate-y-[4px];
+    @apply button
+      border-1.5
+      border-cyan-900
+      hover:border-cyan-600
+      bg-jsr-yellow
+      text-cyan-950
+      font-bold
+      hover:bg-jsr-yellow-300
+      transition-all
+      duration-75
+      ease-in-out
+      focus:bg-jsr-yellow-300
+      outline-cyan-700
+      outline-offset-2
+      disabled:bg-gray-100
+      disabled:text-gray-300
+      shadow-accent-sm
+      disabled:shadow-transparent
+      disabled:border-gray-300
+      active:shadow-accent-sm-close
+      active:translate-x-[3px]
+      active:translate-y-[4px]
+      dark:bg-jsr-yellow
+      dark:text-cyan-950
+      dark:hover:bg-jsr-yellow-300
+      dark:disabled:bg-jsr-gray-100
+      dark:disabled:text-jsr-gray-300;
   }
 
   .button-danger {
-    @apply button border-1.5 border-red-950 bg-red-500 text-white hover:bg-red-700 disabled:bg-gray-100
-    outline-red-600 disabled:text-red-300 shadow-accent-sm disabled:shadow-transparent disabled:border-red-300
-    transition-all duration-75 active:shadow-accent-sm-close active:translate-x-[3px] active:translate-y-[4px];
+    @apply button
+      border-1.5
+      border-red-950
+      bg-red-500
+      text-white
+      hover:bg-red-700
+      disabled:bg-gray-100
+      outline-red-600
+      disabled:text-red-300
+      shadow-accent-sm
+      disabled:shadow-transparent
+      disabled:border-red-300
+      transition-all
+      duration-75
+      active:shadow-accent-sm-close
+      active:translate-x-[3px]
+      active:translate-y-[4px];
   }
 
   .chip {
-    @apply inline-block py-1 px-2.5 rounded-full whitespace-nowrap
-      leading-none font-semibold text-sm;
+    @apply inline-block
+      py-1
+      px-2.5
+      rounded-full
+      whitespace-nowrap
+      leading-none
+      font-semibold
+      text-sm;
   }
 
   .big-chip {
-    @apply inline-block py-1.5 px-2.5 rounded-full whitespace-nowrap
-      leading-none font-semibold text-base;
+    @apply inline-block
+      py-1.5
+      px-2.5
+      rounded-full
+      whitespace-nowrap
+      leading-none
+      font-semibold
+      text-base;
   }
 
   .section-x-inset-xl {
-    @apply max-w-screen-xl mx-auto px-4 md:px-8 lg:px-10 xl:px-14;
+    @apply max-w-screen-xl
+      mx-auto
+      px-4
+      md:px-8
+      lg:px-10
+      xl:px-14;
   }
 
   .link {
-    @apply text-jsr-cyan-700 hover:text-jsr-cyan-600 underline
-      outline-none focus-visible:ring-2 ring-jsr-cyan-700 ring-offset-2 rounded-sm;
+    @apply text-jsr-cyan-700
+      hover:text-jsr-cyan-600
+      underline
+      outline-none
+      focus-visible:ring-2
+      ring-jsr-cyan-700
+      ring-offset-2
+      rounded-sm
+      dark:text-jsr-cyan-300
+      dark:hover:text-jsr-cyan-200;
   }
 
   .link-header {
-    @apply link opsize-sm font-medium hover:underline-offset-2;
+    @apply link
+      opsize-sm
+      font-medium
+      hover:underline-offset-2;
   }
 
   .input-container {
-    @apply bg-white rounded-md leading-snug
+    @apply bg-white
+      rounded-md
+      leading-snug
       border-1.5 border-jsr-cyan-900/30 focus-within:border-jsr-cyan-500
-      has-[input:disabled,select:disabled]:text-jsr-gray-300 has-[input:disabled,select:disabled]:cursor-not-allowed
-      has-[input:disabled,select:disabled]:bg-jsr-gray-100;
+      has-[input:disabled,select:disabled]:text-jsr-gray-300
+      has-[input:disabled,select:disabled]:cursor-not-allowed
+      has-[input:disabled,select:disabled]:bg-jsr-gray-100
+      dark:bg-jsr-gray-800
+      dark:border-jsr-cyan-700/30;
   }
 
   .input {
@@ -198,7 +294,17 @@ body .ddoc a {
 }
 
 body .ddoc .markdown pre {
-  @apply bg-slate-50 border-t-1.5 border-b-1.5 border-slate-300 -mx-6 rounded-none md:rounded-md md:border-1.5 md:mx-0;
+  @apply bg-slate-50
+    border-t-1.5
+    border-b-1.5
+    border-slate-300
+    -mx-6
+    rounded-none
+    md:rounded-md
+    md:border-1.5
+    md:mx-0
+    dark:bg-slate-900
+    dark:border-slate-700;
   
   & > code:first-child {
     @apply p-6;
@@ -210,7 +316,12 @@ body .ddoc .markdown pre {
 }
 
 body .ddoc .markdown :not(pre) > code {
-  @apply bg-slate-50 border-slate-300 rounded-md;
+  @apply bg-slate-50
+  border-slate-300
+  rounded-md
+  dark:bg-slate-900
+  dark:border-slate-700
+  dark:text-slate-100;
 }
 
 body .ddoc .markdown a:not(.no_color) {
@@ -218,19 +329,38 @@ body .ddoc .markdown a:not(.no_color) {
 }
 
 body .ddoc .usage {
-  @apply bg-jsr-cyan-50 border-y-1.5 border-jsr-cyan-100 border-x-0 -mx-6 md:mx-0 rounded-none md:rounded-lg md:border-1.5;
+  @apply bg-jsr-cyan-50
+    border-y-1.5
+    border-jsr-cyan-100
+    border-x-0
+    -mx-6
+    md:mx-0
+    rounded-none
+    md:rounded-lg
+    md:border-1.5
+    dark:bg-jsr-gray-900;
 }
 
 body .ddoc .usage pre.highlight {
-  @apply bg-white border-jsr-cyan-200 -mx-4 md:mx-0 border-x-0 md:border-1.5;
+  @apply bg-white
+    border-jsr-cyan-200
+    -mx-4
+    md:mx-0
+    border-x-0
+    md:border-1.5
+    dark:bg-jsr-gray-900
 }
 
 body .ddoc .usage nav {
-  @apply bg-jsr-cyan-50 border-jsr-cyan-900/10;
+  @apply bg-jsr-cyan-50
+  border-jsr-cyan-900/10
+  dark:bg-jsr-gray-900;
 }
 
 body .ddoc .usage nav label {
-  @apply md:hover:bg-jsr-cyan-200 border-jsr-cyan-900/20;
+  @apply md:hover:bg-jsr-cyan-200
+  border-jsr-cyan-900/20
+  dark:hover:bg-jsr-gray-800;
 }
 
 body .ddoc > section > nav.py-4 {
@@ -252,12 +382,15 @@ body:has(.ddoc) #footer {
 }
 
 body .ddoc .markdown tr:nth-child(2n) {
-  @apply bg-slate-50;
+  @apply bg-slate-50
+  dark:bg-slate-900;
 }
 
 body .ddoc .markdown th,
 body .ddoc .markdown td  {
-  @apply border-1.5 border-slate-300;
+  @apply border-1.5
+    border-slate-300
+    dark:border-slate-700;
 }
 
 body .ddoc .markdown th {
@@ -266,15 +399,18 @@ body .ddoc .markdown th {
 
 /* These might seem redundant but Tailwind won't always load them in the compiled stylesheet unless they're explicitly included here. */
 .score-ring-red {
-  @apply bg-red-500;
+  @apply bg-red-500
+  dark:bg-red-400;
 }
 
 .score-ring-yellow {
-  @apply bg-yellow-500;
+  @apply bg-yellow-500
+  dark:bg-yellow-400;
 }
 
 .score-ring-green {
-  @apply bg-green-500;
+  @apply bg-green-500
+  dark:bg-green-400;
 }
 
 @layer base {
@@ -291,3 +427,14 @@ body .ddoc .markdown th {
     --bgColor-muted: theme(colors.slate.50);
   }
 }
+
+
+.superShadow {
+  text-shadow: 0 0 2em white, 0 0 1em white, 0 0 0.5em white, 0 0 0.25em white, 0 0 3em white, 0 0 0.5em white;
+}
+
+@media (prefers-color-scheme: dark) {
+  .superShadow {
+    text-shadow: 0 0 2em black, 0 0 1em black, 0 0 0.5em black, 0 0 0.25em black, 0 0 3em black, 0 0 0.5em black;
+  }
+}
\ No newline at end of file
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index 4de23e2e5..c5ddbc6d8 100755
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -156,6 +156,8 @@ export default {
       },
     },
   },
+  // force dark mode for media queries
+  darkMode: "media",
 } satisfies Config;
 
 function rewritePreflight() {
