diff --git a/frontend/components/ErrorDisplay.tsx b/frontend/components/ErrorDisplay.tsx
index 5b171137..07e4ef1a 100644
--- a/frontend/components/ErrorDisplay.tsx
+++ b/frontend/components/ErrorDisplay.tsx
@@ -3,12 +3,12 @@ import { APIResponseError } from "../utils/api.ts";
 
 export function ErrorDisplay({ error }: { error: APIResponseError }) {
   return (
-    <div class="border-t-8 border-red-600 p-4 bg-jsr-gray-50">
+    <div class="border-t-8 border-red-600 p-4 bg-jsr-gray-500/10 ">
       <h1 class="text-2xl font-semibold">{error.status} - {error.code}</h1>
       <p class="mt-4">{error.message as string}</p>
       <p class="mt-4 text-sm">Need help? Contact support@deno.com</p>
       <div class="flex gap-4 mt-1">
-        <div class="bg-jsr-gray-200 py-1 px-2 font-bold text-sm inline-block">
+        <div class="bg-jsr-gray-500/20 py-1 px-2 font-bold text-sm inline-block">
           x-deno-ray: <span class="font-mono">{error.traceId as "string"}</span>
         </div>
       </div>
diff --git a/frontend/components/GitHubRepoInput.tsx b/frontend/components/GitHubRepoInput.tsx
index 9add7562..0f365e9f 100644
--- a/frontend/components/GitHubRepoInput.tsx
+++ b/frontend/components/GitHubRepoInput.tsx
@@ -46,7 +46,7 @@ export function GitHubRepoInput(
   }
 
   return (
-    <div class="flex items-center w-full md:w-88 rounded-md text-jsr-gray-900 shadow-sm pl-3 py-[2px] pr-[2px] sm:text-sm sm:leading-6 bg-white input-container">
+    <div class="flex items-center w-full md:w-88 rounded-md text-foreground-primary shadow-sm pl-3 py-[2px] pr-[2px] sm:text-sm sm:leading-6 bg-background-primary input-container">
       <span class="block">
         <TbBrandGithub class="!size-5" />
       </span>
diff --git a/frontend/components/Header.tsx b/frontend/components/Header.tsx
index 405c431b..24aefd2b 100644
--- a/frontend/components/Header.tsx
+++ b/frontend/components/Header.tsx
@@ -6,6 +6,7 @@ import { UserMenu } from "../islands/UserMenu.tsx";
 import TbBrandGithub from "@preact-icons/tb/TbBrandGithub";
 import { SearchKind } from "../util.ts";
 import { HeaderLogo } from "../islands/HeaderLogo.tsx";
+import ThemeToggle from "../islands/ThemeToggle.tsx";
 
 export function Header({
   user,
@@ -111,6 +112,9 @@ export function Header({
                   Sign in
                 </a>
               )}
+            <div class="[&_.button]:text-foreground-primary [&_.button]:hover:text-jsr-yellow-400 [&_.button]:transition-colors [&_.button]:duration-500 w-10 h-10">
+              <ThemeToggle />
+            </div>
           </div>
         </div>
         <div class="mt-4 sm:hidden">
@@ -130,7 +134,7 @@ export function Header({
 
 function Divider() {
   return (
-    <span class="text-jsr-gray-200 select-none" aria-hidden="true">
+    <span class="text-jsr-gray-500/25 select-none" aria-hidden="true">
       |
     </span>
   );
diff --git a/frontend/components/HomepageHero.tsx b/frontend/components/HomepageHero.tsx
index 7a7d0e2e..a5cc097c 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-background-primary before:bottom-0 before:z-10 before:pointer-events-none select-none"
       id="particles-js"
     >
       <script src={asset("/scripts/particles.js")} defer></script>
@@ -38,10 +38,10 @@ export function HomepageHero(
             <AnimatedLogo />
             <div
               class="pointer-events-auto 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;"
+              style="text-shadow: 0 0 2em hsla(var(--background-primary)), 0 0 1em hsla(var(--background-primary)), 0 0 0.5em hsla(var(--background-primary)), 0 0 0.25em hsla(var(--background-primary)), 0 0 3em hsla(var(--background-primary)), 0 0 0.5em hsla(var(--background-primary));"
             >
               The{" "}
-              <b class="font-semibold text-jsr-gray-900">
+              <b class="font-semibold">
                 open-source package registry
               </b>{" "}
               for modern JavaScript and TypeScript
@@ -49,7 +49,7 @@ export function HomepageHero(
           </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;"
+            style="text-shadow: 0 0 2em hsla(var(--background-primary)), 0 0 1em hsla(var(--background-primary)), 0 0 0.5em hsla(var(--background-primary)), 0 0 0.25em hsla(var(--background-primary)), 0 0 3em hsla(var(--background-primary)), 0 0 0.5em hsla(var(--background-primary));"
           >
             <a class="underline text-sm relative z-10" href="/docs">
               Docs
diff --git a/frontend/components/List.tsx b/frontend/components/List.tsx
index 00e51ac0..c4b988c8 100644
--- a/frontend/components/List.tsx
+++ b/frontend/components/List.tsx
@@ -18,10 +18,10 @@ export function ListDisplay(
   },
 ) {
   return (
-    <div class="mt-8 ring-1 ring-jsr-cyan-100 rounded overflow-hidden">
+    <div class="mt-8 ring-1 ring-jsr-cyan/20 rounded overflow-hidden">
       {title &&
         (
-          <div class="px-5 py-4 flex items-center justify-between border-b border-jsr-cyan-50 bg-jsr-gray-50 leading-none">
+          <div class="px-5 py-4 flex items-center justify-between border-b border-jsr-cyan/20 bg-background-secondary leading-none">
             <span class="font-semibold">{title}</span>
             <div />
           </div>
@@ -29,10 +29,10 @@ export function ListDisplay(
 
       <ul class="divide-y">
         {children.map((item) => (
-          <li class="border-jsr-cyan-50">
+          <li class="border-jsr-cyan/20">
             <a
               href={item.href}
-              class={`flex items-center px-5 py-3 gap-2 hover:bg-jsr-yellow-100 focus:bg-jsr-yellow-100 focus:ring-2 ring-jsr-cyan-700 ring-inset outline-none ${
+              class={`flex items-center px-5 py-3 gap-2 hover:bg-jsr-yellow-200 focus:bg-jsr-yellow-100 focus:ring-2 ring-jsr-cyan-700 ring-inset outline-none ${
                 item.parentClass ?? ""
               }`}
             >
@@ -74,11 +74,11 @@ 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-background-secondary text-foreground-primary px-4 py-3 sm:px-6"
       aria-label="Pagination"
     >
       <div class="hidden sm:block">
-        <p class="text-sm text-jsr-gray-700">
+        <p class="text-sm">
           {start + itemsCount === 0 ? "No results found" : (
             <>
               Showing <span class="font-semibold">{start + 1}</span> to{" "}
@@ -94,7 +94,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-jsr-gray-900 ring-1 ring-inset ring-jsr-gray-300 hover:bg-jsr-gray-50 focus-visible:outline-offset-0 select-none"
+              class="relative inline-flex items-center rounded-md bg-foreground-primary/5 px-3 py-2 text-sm font-semibold text-foreground-primary ring-1 ring-inset ring-foreground-primary/20 hover:bg-foreground-primary/20 focus-visible:outline-offset-0 select-none"
             >
               Previous
             </a>
@@ -104,7 +104,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-jsr-gray-900 ring-1 ring-inset ring-jsr-gray-300 hover:bg-jsr-gray-50 focus-visible:outline-offset-0 select-none"
+              class="relative ml-3 inline-flex items-center rounded-md bg-foreground-primary/5 px-3 py-2 text-sm font-semibold text-foreground-primary ring-1 ring-inset ring-foreground-primary/20 hover:bg-foreground-primary/20 focus-visible:outline-offset-0 select-none"
             >
               Next
             </a>
diff --git a/frontend/components/ListPanel.tsx b/frontend/components/ListPanel.tsx
index 9f3ed4d8..b6b2210d 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={children.length > 1 ? "odd:bg-jsr-cyan-50" : ""}>
+            <li class={children.length > 1 ? "odd:bg-jsr-cyan-500/10" : ""}>
               <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-jsr-cyan-700 font-bold" : ""
@@ -41,7 +41,7 @@ export function ListPanel(
                   {entry.value}
                 </span>
                 {entry.label && (
-                  <div class="chip bg-jsr-cyan-200 max-w-20 truncate">
+                  <div class="chip bg-jsr-cyan-200 text-foreground-primary max-w-20 truncate">
                     {entry.label}
                   </div>
                 )}
diff --git a/frontend/components/Modal.tsx b/frontend/components/Modal.tsx
index 2b531d66..987ca09a 100644
--- a/frontend/components/Modal.tsx
+++ b/frontend/components/Modal.tsx
@@ -30,7 +30,7 @@ export default function Modal(
         }}
       >
         <div
-          class="p-8 relative border border-jsr-cyan-300 rounded bg-white max-w-screen-sm"
+          class="p-8 relative border border-jsr-cyan-300 rounded bg-background-primary max-w-screen-sm"
           onClick={(e) => e.stopPropagation()}
         >
           <button
diff --git a/frontend/components/Nav.tsx b/frontend/components/Nav.tsx
index 925630a1..eb9dbb5a 100644
--- a/frontend/components/Nav.tsx
+++ b/frontend/components/Nav.tsx
@@ -51,9 +51,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 hover:bg-jsr-cyan-100 flex items-center select-none focus:outline-none focus:border-1 focus:border-jsr-cyan-300 focus:ring-1 focus:ring-jsr-cyan-300 focus:ring-opacity-50 ${
+      class={`md:px-3 px-4 py-2 text-sm md:text-base min-h-10 leading-none rounded-md hover:bg-jsr-cyan-500/30 flex items-center select-none focus:outline-none focus:border-1 focus:border-jsr-cyan-300 focus:ring-1 focus:ring-jsr-cyan-300 focus:ring-opacity-50 ${
         props.active
-          ? "bg-jsr-cyan-50 border-1 border-jsr-cyan-300/30 font-semibold"
+          ? "bg-jsr-cyan-500/20 border-1 border-jsr-cyan-300/30 font-semibold"
           : ""
       }`}
       data-active={props.active ? "true" : undefined}
diff --git a/frontend/components/NavOverflow.tsx b/frontend/components/NavOverflow.tsx
index 4b8b3e8c..193e8247 100644
--- a/frontend/components/NavOverflow.tsx
+++ b/frontend/components/NavOverflow.tsx
@@ -63,7 +63,7 @@ export function NavOverflow() {
     <>
       <button
         type="button"
-        class="group absolute right-4 md:right-10 rounded border-1 my-1 border-jsr-cyan-100 hover:bg-jsr-cyan-50 hover:cursor-pointer hidden"
+        class="group absolute right-4 md:right-10 rounded border-1 my-1 border-jsr-cyan-500/20 hover:bg-jsr-cyan-500/10 hover:cursor-pointer hidden"
         aria-expanded="false"
       >
         <span class="flex p-1">
@@ -71,7 +71,7 @@ export function NavOverflow() {
         </span>
         <div
           id="nav-menu"
-          class="absolute top-[120%] -right-2 z-[70] px-1 py-2 rounded border-1.5 border-current bg-white w-56 shadow overflow-hidden opacity-100 translate-y-0 transition [&>a]:rounded hidden"
+          class="absolute top-[120%] -right-2 z-[70] px-1 py-2 rounded border-1.5 border-current bg-background-primary w-56 shadow overflow-hidden opacity-100 translate-y-0 transition [&>a]:rounded hidden"
         />
       </button>
       <script
diff --git a/frontend/components/PackageHit.tsx b/frontend/components/PackageHit.tsx
index 5c635eb3..373076f1 100644
--- a/frontend/components/PackageHit.tsx
+++ b/frontend/components/PackageHit.tsx
@@ -47,7 +47,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-background-primary text-xs flex items-center justify-center font-semibold min-w-6">
                   {pkg.score}
                 </div>
               </div>
diff --git a/frontend/components/QuotaCard.tsx b/frontend/components/QuotaCard.tsx
index e0264ed9..92d703db 100644
--- a/frontend/components/QuotaCard.tsx
+++ b/frontend/components/QuotaCard.tsx
@@ -10,10 +10,10 @@ export function QuotaCard(
   },
 ) {
   return (
-    <div class="border-1.5 border-jsr-gray-200 rounded-md px-4 py-5 flex flex-col justify-between">
+    <div class="border-1.5 border-jsr-gray-500/20 rounded-md px-4 py-5 flex flex-col justify-between">
       <div>
-        <p class="font-semibold text-jsr-gray-900">{props.title}</p>
-        <p class="text-jsr-gray-600 text-sm">{props.description}</p>
+        <p class="font-semibold text-foreground-secondary">{props.title}</p>
+        <p class="text-foreground-secondary text-sm">{props.description}</p>
       </div>
       <QuotaUsage limit={props.limit} usage={props.usage} />
     </div>
@@ -33,14 +33,17 @@ function QuotaUsage(props: { limit: number; usage: number }) {
 
   return (
     <div class="mt-4 flex items-center gap-2">
-      <div class="overflow-hidden h-3 w-full rounded bg-jsr-yellow-50 ring-1 ring-jsr-yellow-500">
+      <div class="overflow-hidden h-3 w-full rounded bg-jsr-yellow-500/20
+       ring-1 ring-jsr-yellow-500">
         <div
           style={{ width: `${percent * 100}%` }}
           class={`h-full ${color}`}
         >
         </div>
       </div>
-      <div class="text-xs text-jsr-gray-600">{props.usage}/{props.limit}</div>
+      <div class="text-xs text-foreground-secondary">
+        {props.usage}/{props.limit}
+      </div>
     </div>
   );
 }
diff --git a/frontend/components/RuntimeCompatIndicator.tsx b/frontend/components/RuntimeCompatIndicator.tsx
index 06fec054..81c9a9f7 100644
--- a/frontend/components/RuntimeCompatIndicator.tsx
+++ b/frontend/components/RuntimeCompatIndicator.tsx
@@ -100,7 +100,7 @@ export function RuntimeCompatIndicator(
                     <div
                       aria-hidden="true"
                       title={ICON_TITLE_TEXT}
-                      class="absolute inset-0 h-full w-full text-jsr-cyan-600 text-center leading-4 md:leading-5 drop-shadow-md font-bold text-md md:text-xl select-none"
+                      class="absolute inset-0 h-full w-full dark:text-jsr-cyan-400 text-jsr-cyan-600 text-center leading-4 md:leading-5 drop-shadow-md font-bold text-md md:text-xl select-none"
                     >
                       ?
                     </div>
diff --git a/frontend/components/Table.tsx b/frontend/components/Table.tsx
index 6b46e0fe..bdb8bed6 100644
--- a/frontend/components/Table.tsx
+++ b/frontend/components/Table.tsx
@@ -24,13 +24,13 @@ export function Table(
   return (
     <>
       <div
-        class={`-mx-4 md:mx-0 ring-1 ring-jsr-cyan-100 sm:rounded overflow-hidden ${
+        class={`-mx-4 md:mx-0 ring-1 ring-jsr-cyan-300/10 sm:rounded overflow-hidden ${
           class_ ?? ""
         }`}
       >
         <div class="overflow-x-auto">
-          <table class="w-full divide-y divide-jsr-cyan-50">
-            <thead class="bg-jsr-cyan-50">
+          <table class="w-full divide-y divide-jsr-cyan-500/5">
+            <thead class="bg-jsr-cyan-500/5">
               <TableRow class="children:font-semibold">
                 {columns.map((column) => (
                   <TableHead
@@ -42,7 +42,7 @@ export function Table(
                 ))}
               </TableRow>
             </thead>
-            <tbody class="divide-y divide-jsr-cyan-300/30 bg-white">
+            <tbody class="divide-y divide-jsr-cyan-300/30 bg-background-primary">
               {children}
             </tbody>
           </table>
@@ -87,7 +87,7 @@ function Pagination(
           <TbChevronLeft class="size-5" />
         </a>
       )}
-      <div class="text-sm text-jsr-gray-600">
+      <div class="text-sm text-foreground-secondary">
         Showing items {(pagination.page * pagination.limit) - pagination.limit +
           (Math.min(itemsCount, 1))}
         -
@@ -142,7 +142,7 @@ export function TableHead({
 }: TableHeadProps) {
   return (
     <th
-      class={`py-4 px-3 first:pl-4 first:sm:pl-6 last:pr-4 last:sm:pr-6 whitespace-nowrap text-sm text-jsr-gray-900 ${
+      class={`py-4 px-3 first:pl-4 first:sm:pl-6 last:pr-4 last:sm:pr-6 whitespace-nowrap text-sm text-foreground-primary ${
         _class ?? ""
       } ${align === "right" ? "text-right" : "text-left"}`}
     >
@@ -168,7 +168,7 @@ export function TableData(
 ) {
   return (
     <td
-      class={`py-4 px-3 first:pl-4 first:sm:pl-6 last:pr-4 last:sm:pr-6 whitespace-nowrap text-sm text-jsr-gray-900 ${
+      class={`py-4 px-3 first:pl-4 first:sm:pl-6 last:pr-4 last:sm:pr-6 whitespace-nowrap text-sm text-foreground-primary ${
         _class ?? ""
       } ${align === "right" ? "text-right" : "text-left"}`}
       title={title}
diff --git a/frontend/islands/CopyButton.tsx b/frontend/islands/CopyButton.tsx
index 2a3262e7..14663c22 100644
--- a/frontend/islands/CopyButton.tsx
+++ b/frontend/islands/CopyButton.tsx
@@ -29,7 +29,7 @@ export function CopyButton(props: CopyButtonProps) {
       type="button"
       onClick={copy}
       title={props.title}
-      class={(copied.value ? "text-green-700" : "text-jsr-gray-700") +
+      class={(copied.value ? "stroke-green-500" : "text-jsr-gray-700") +
         " hover:bg-jsr-gray-100/30 p-1.5 -mx-1.5 -my-1 rounded-full"}
     >
       {copied.value ? <TbCheck /> : <TbCopy />}
diff --git a/frontend/islands/GlobalSearch.tsx b/frontend/islands/GlobalSearch.tsx
index 08a5bded..85be8275 100644
--- a/frontend/islands/GlobalSearch.tsx
+++ b/frontend/islands/GlobalSearch.tsx
@@ -273,9 +273,9 @@ export function GlobalSearch(
           <input
             type="search"
             name="search"
-            class={`w-full h-full search-input bg-white/90 ${
+            class={`w-full h-full search-input bg-background-primary text-foreground-primary ${
               kind === "packages" ? "!text-transparent" : ""
-            } !caret-black input rounded-r-none ${sizeClasses} relative`}
+            } !caret-foreground-primary input rounded-r-none ${sizeClasses} relative`}
             placeholder={placeholder}
             value={search.value}
             onInput={onInput}
@@ -399,12 +399,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-background-secondary w-full sibling:bg-red-500 border-1.5 border-jsr-cyan-950 rounded-lg z-40 overflow-hidden top-0.5">
       {suggestions.value === null
-        ? <div class="bg-white text-jsr-gray-500 px-4">...</div>
+        ? <div class="bg-background-primary text-jsr-gray-500 px-4">...</div>
         : suggestions.value?.length === 0
         ? (
-          <div class="bg-white text-jsr-gray-500 px-4 py-2">
+          <div class="bg-background-secondary text-jsr-gray-500 px-4 py-2">
             No matching results to display
           </div>
         )
@@ -430,7 +430,7 @@ function SuggestionList(
             })}
           </ul>
         )}
-      <div class="bg-jsr-gray-50 flex items-center justify-between py-1 px-2 text-sm">
+      <div class="bg-background-secondary text-foreground-primary flex items-center justify-between py-1 px-2 text-sm">
         <div>
           {kind === "packages" && (
             <a
@@ -486,7 +486,7 @@ function DocsHit(hit: OramaDocsHit, input: Signal<string>): ListDisplayItem {
           </div>
         )}
         <div
-          class="text-sm text-jsr-gray-600"
+          class="text-sm text-foreground-secondary"
           // deno-lint-ignore react-no-danger
           dangerouslySetInnerHTML={{
             __html: highlighter.highlight(hit.content, input.value)
diff --git a/frontend/islands/ThemeToggle.tsx b/frontend/islands/ThemeToggle.tsx
new file mode 100644
index 00000000..1f4f1d1f
--- /dev/null
+++ b/frontend/islands/ThemeToggle.tsx
@@ -0,0 +1,56 @@
+#!/usr/bin/env -S deno run -A --watch
+// Copyright 2024 the JSR authors. All rights reserved. MIT license.
+
+import { useState } from "preact/hooks";
+import { IS_BROWSER } from "fresh/runtime";
+import { TbMoon, TbSun } from "@preact-icons/tb";
+/**
+ * The head script string to put in the <Head> element.
+ * Important for avoiding FOUC (Flash Of Unstyled Content).`
+ */
+export const themeToggleHeadScript: string = `
+const isDarkMode = localStorage.theme === "dark"
+|| (!("theme" in localStorage)
+  && window.matchMedia("(prefers-color-scheme: dark)").matches);
+document.documentElement.dataset.theme = isDarkMode ? "dark" : "light";
+window.onload = function() {
+  const themeToggles = document.querySelectorAll(".dark-mode-toggle.hidden");
+  themeToggles.forEach((el) => el.classList.remove("hidden"));
+};
+`.replace(/(\n|\t)/g, "").replace(/"/g, "'");
+
+/**
+ * ThemeToggle
+ * @island
+ *
+ * @description
+ * It toggles the dark mode based on user preference and updates the localStorage.
+ */
+export default function ThemeToggle() {
+  const [theme, setTheme] = useState(() => {
+    if (!IS_BROWSER) return "light";
+    return document.documentElement.dataset.theme ?? "light";
+  });
+
+  const toggleTheme = () => {
+    setTheme((prev) => {
+      const theme = prev === "light" ? "dark" : "light";
+      document.documentElement.setAttribute("data-theme", theme);
+      localStorage.setItem("theme", theme);
+      return theme;
+    });
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={toggleTheme}
+      class="dark-mode-toggle button hidden" /* Hidden until JavaScript unhides me */
+      aria-label="Toggle Theme"
+    >
+      {theme === "light"
+        ? <TbMoon class="w-6 h-6" />
+        : <TbSun class="w-6 h-6" />}
+    </button>
+  );
+}
diff --git a/frontend/islands/UserMenu.tsx b/frontend/islands/UserMenu.tsx
index 107044f9..6df4dd5b 100644
--- a/frontend/islands/UserMenu.tsx
+++ b/frontend/islands/UserMenu.tsx
@@ -12,7 +12,7 @@ import {
 const SHARED_ITEM_CLASSES =
   "flex items-center justify-start gap-2 px-4 py-2.5 focus-visible:ring-2 ring-inset outline-none";
 const DEFAULT_ITEM_CLASSES =
-  "hover:bg-jsr-cyan-50 focus-visible:bg-jsr-cyan-200 ring-jsr-cyan-700";
+  "hover:bg-jsr-cyan-500/10 focus-visible:bg-jsr-cyan-200 ring-jsr-cyan-700";
 
 const SUDO_CONFIRMATION =
   "Are you sure you want to enable sudo mode? Sudo mode will be enabled for 5 minutes.";
@@ -41,7 +41,7 @@ export function UserMenu({ user, sudo, logoutUrl }: {
     <div class="relative select-none" ref={ref}>
       <button
         id={`${prefix}-user-menu`}
-        class="flex items-center rounded-full focus-visible:ring-2 ring-inset outline-none *:focus-visible:ring-jsr-cyan-400 *:focus-visible:ring-offset-1"
+        class="flex items-center rounded-full focus-visible:ring-2 ring-inset outline-none *:focus-visible:ring-jsr-cyan-400 *:focus-visible:ring-offset-1 ring-offset-background-primary"
         type="button"
         onClick={() => setOpen((v) => !v)}
         aria-expanded={open ? "true" : "false"}
@@ -50,7 +50,7 @@ export function UserMenu({ user, sudo, logoutUrl }: {
           <div class="absolute rounded-full bg-orange-600 border-2 box-content border-white -top-0.5 -right-0.5 h-2 w-2" />
         )}
         <img
-          class="w-8 aspect-square rounded-full ring-2 ring-offset-1 ring-jsr-cyan-700"
+          class="w-8 aspect-square rounded-full ring-2 ring-offset-1 ring-jsr-cyan-700 ring-offset-background-primary"
           src={user.avatarUrl}
           alt={user.name}
         />
@@ -58,7 +58,7 @@ export function UserMenu({ user, sudo, logoutUrl }: {
       <div
         aria-labelledby={`${prefix}-user-menu`}
         role="region"
-        class={`absolute top-[120%] -right-4 z-[80] rounded border-1.5 border-current bg-white w-56 shadow overflow-hidden ${
+        class={`absolute top-[120%] -right-4 z-[80] rounded border-1.5 border-current bg-background-primary w-56 shadow overflow-hidden ${
           open
             ? "opacity-100 translate-y-0"
             : "opacity-0 translate-y-5 pointer-events-none"
@@ -67,7 +67,7 @@ export function UserMenu({ user, sudo, logoutUrl }: {
       >
         <div class="flex flex-col items-center gap-3 pt-4 pb-3">
           <img
-            class="h-16 w-16 rounded-full ring-2 ring-offset-1 ring-jsr-cyan-950"
+            class="h-16 w-16 rounded-full ring-2 ring-offset-1 ring-jsr-cyan-950 ring-offset-background-primary"
             src={user.avatarUrl}
             alt=""
           />
@@ -106,7 +106,7 @@ export function UserMenu({ user, sudo, logoutUrl }: {
           <a
             href="/new"
             tabIndex={open ? undefined : -1}
-            class={`${SHARED_ITEM_CLASSES} font-bold bg-jsr-yellow border-jsr-yellow hover:bg-jsr-yellow-300 hover:border-jsr-cyan-500 focus-visible:bg-jsr-yellow-300 focus-visible:border-jsr-yellow-300 ring-black`}
+            class={`${SHARED_ITEM_CLASSES} font-bold bg-jsr-yellow text-jsr-gray-950 border-jsr-yellow hover:bg-jsr-yellow-300 hover:border-jsr-cyan-500 focus-visible:bg-jsr-yellow-300 focus-visible:border-jsr-yellow-300 ring-black`}
           >
             <TbPlus class="size-5" />
             Publish a package
diff --git a/frontend/islands/new.tsx b/frontend/islands/new.tsx
index cc80f1f3..4a047f4a 100644
--- a/frontend/islands/new.tsx
+++ b/frontend/islands/new.tsx
@@ -17,8 +17,8 @@ interface IconColorProps {
 
 export function IconCircle({ done, children }: IconColorProps) {
   const color = useComputed(() => {
-    if (done.value) return "bg-green-600 text-white";
-    return "bg-jsr-gray-100 text-black";
+    if (done.value) return "bg-green-600 text-foreground-secondary";
+    return "bg-background-secondary text-foreground-secondary";
   });
   return (
     <div class={color + " hidden md:block rounded-full p-1.75"}>
@@ -54,8 +54,8 @@ export function ScopeSelect(
 
   if (scopes.value.length === 0) {
     return (
-      <div class="space-y-4 bg-jsr-cyan-50 border-1.5 border-jsr-cyan-200 p-4 md:p-6 rounded-xl">
-        <span class="text-jsr-gray-700">
+      <div class="space-y-4 bg-jsr-cyan-500/10 border-1.5 border-jsr-cyan-500/30 p-4 md:p-6 rounded-xl">
+        <span class="text-foreground-trinary">
           You are not a member of any scopes. Create a new scope to publish your
           package.
         </span>
@@ -117,13 +117,18 @@ export function ScopeSelect(
   return (
     <>
       <select
-        class="w-full mt-4 block py-2 px-4 input-container input select"
+        class="w-full mt-4 block py-2 px-4 input-container input select !fill-foreground-primary !text-foreground-primary bg-background-primary"
         onChange={(e) => scope.value = e.currentTarget.value}
         value={scope}
         disabled={locked}
         data-locked={locked || undefined}
       >
-        <option value="" disabled selected class="hidden text-jsr-gray-100">
+        <option
+          value=""
+          disabled
+          selected
+          class="hidden"
+        >
           ---
         </option>
         {scopes.value.map((scope, idx) => (
@@ -365,14 +370,14 @@ export function CreatePackage({ scope, name, pkg, fromCli }: {
   ) return null;
 
   return (
-    <div class="max-w-2xl mt-12 bg-jsr-cyan-50 border-1.5 border-jsr-cyan-200 rounded-lg p-4 md:p-6 overflow-x-hidden flex flex-wrap sm:flex-nowrap! justify-between items-center gap-8">
+    <div class="max-w-2xl mt-12 bg-jsr-cyan-500/20 border-1.5 border-jsr-cyan-500/30 rounded-lg p-4 md:p-6 overflow-x-hidden flex flex-wrap sm:flex-nowrap! justify-between items-center gap-8">
       {pkg.value === null
         ? (
           <>
             <div>
               <p>
                 The package{" "}
-                <code class="text-jsr-cyan-800">
+                <code class="text-jsr-cyan-800 dark:text-jsr-cyan-600">
                   @{scope}/{name}
                 </code>{" "}
                 does not exist yet. Create it now to publish your package.
diff --git a/frontend/routes/@[scope]/~/members.tsx b/frontend/routes/@[scope]/~/members.tsx
index 32f860b8..3b8dd6b1 100644
--- a/frontend/routes/@[scope]/~/members.tsx
+++ b/frontend/routes/@[scope]/~/members.tsx
@@ -185,7 +185,7 @@ function MemberInvite({ scope }: { scope: string }) {
   return (
     <div class="max-w-3xl border-t border-jsr-cyan-950/10 pt-8 mt-8">
       <h2 class="text-lg font-semibold">Invite member</h2>
-      <p class="mt-2 text-jsr-gray-600">
+      <p class="mt-2 text-foreground-secondary">
         Inviting users to this scope grants them access to publish all packages
         in this scope and create new packages. They will not be able to manage
         members unless they are granted admin status.
@@ -204,14 +204,14 @@ function MemberLeave(
       class="max-w-3xl border-t border-jsr-cyan-950/10 pt-8 mt-12"
     >
       <h2 class="text-lg font-semibold">Leave scope</h2>
-      <p class="mt-2 text-jsr-gray-600">
+      <p class="mt-2 text-foreground-secondary">
         Leaving this scope will revoke your access to all packages in this
         scope. You will no longer be able to publish packages to this
         scope{props.isAdmin && " or manage members"}.
       </p>
       <input type="hidden" name="userId" value={props.userId} />
       {props.isLastAdmin && (
-        <div class="mt-6 border-1 rounded-md border-red-300 bg-red-50 p-6 text-red-600">
+        <div class="mt-6 border-1 rounded-md border-red-500/40 bg-red-500/10 p-6 text-red-600">
           <span class="font-bold text-xl">Warning</span>
           <p>
             You are the last admin in this scope. You must promote another
diff --git a/frontend/routes/@[scope]/~/settings.tsx b/frontend/routes/@[scope]/~/settings.tsx
index f65fa08e..b7d720b5 100644
--- a/frontend/routes/@[scope]/~/settings.tsx
+++ b/frontend/routes/@[scope]/~/settings.tsx
@@ -39,7 +39,7 @@ Reason: `;
     <div class="mt-8">
       <h2 class="text-lg sm:text-xl font-semibold">Quotas</h2>
       <div class="flex flex-col gap-8">
-        <p class="text-jsr-gray-600 max-w-2xl">
+        <p class="text-foreground-secondary max-w-2xl">
           Scopes have certain quotas to help prevent abuse. We are happy to
           increase your quotas as needed — just send us an increase request.
         </p>
@@ -84,13 +84,13 @@ function GitHubActionsSecurity({ scope }: { scope: FullScope }) {
   return (
     <div class="mb-12 mt-12">
       <h2 class="text-lg sm:text-xl font-semibold">GitHub Actions security</h2>
-      <p class="mt-2 text-jsr-gray-600 max-w-2xl">
+      <p class="mt-2 text-foreground-secondary max-w-2xl">
         GitHub Actions can be used to publish packages to JSR without having to
         set up authentication tokens. Publishing is permitted only if the
         workflow runs in the GitHub repository that is linked to the package on
         JSR.
       </p>
-      <p class="mt-4 text-jsr-gray-600 max-w-2xl">
+      <p class="mt-4 text-foreground-secondary max-w-2xl">
         Additionally, you can restrict publishing to be permitted only if the
         user that triggered the GitHub Actions workflow is a member of this
         scope on JSR.{" "}
@@ -139,7 +139,7 @@ function RequirePublishingFromCI({ scope }: { scope: FullScope }) {
       <h2 class="text-lg sm:text-xl font-semibold">
         Require Publishing from CI
       </h2>
-      <p class="mt-2 text-jsr-gray-600 max-w-2xl">
+      <p class="mt-2 text-foreground-secondary max-w-2xl">
         Requiring publishing from CI ensures that all new versions for packages
         in this scope are published from a GitHub Actions workflow. This
         disables the ability to publish with the{" "}
@@ -147,7 +147,7 @@ function RequirePublishingFromCI({ scope }: { scope: FullScope }) {
         command from a local development environment.
       </p>
 
-      <p class="mt-4 text-jsr-gray-600 max-w-2xl">
+      <p class="mt-4 text-foreground-secondary max-w-2xl">
         This setting is currently{" "}
         <span class="font-semibold">
           {scope.requirePublishingFromCI ? "enabled" : "disabled"}
@@ -204,7 +204,7 @@ function CardButton(props: CardButtonProps) {
       value={props.value}
     >
       <div class="flex justify-between">
-        <p class="text-jsr-gray-900 font-semibold leading-none">
+        <p class="text-foreground-primary font-semibold leading-none">
           {props.title}
         </p>
         <div
@@ -217,7 +217,9 @@ function CardButton(props: CardButtonProps) {
           {props.selected && <TbCheck class="stroke-2 size-9" />}
         </div>
       </div>
-      <p class="mt-2 w-5/6 text-jsr-gray-600 text-sm">{props.description}</p>
+      <p class="mt-2 w-5/6 text-foreground-secondary text-sm">
+        {props.description}
+      </p>
     </button>
   );
 }
@@ -227,7 +229,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-jsr-gray-600 max-w-3xl">
+      <p class="mt-2 text-foreground-secondary max-w-3xl">
         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/_app.tsx b/frontend/routes/_app.tsx
index a62ec106..08ba8f22 100644
--- a/frontend/routes/_app.tsx
+++ b/frontend/routes/_app.tsx
@@ -2,6 +2,7 @@
 import { PageProps } from "fresh";
 import { asset } from "fresh/runtime";
 import { State } from "../util.ts";
+import { themeToggleHeadScript } from "../islands/ThemeToggle.tsx";
 
 const FRONTEND_ROOT = Deno.env.get("FRONTEND_ROOT") ?? "http://jsr.test";
 
@@ -18,6 +19,7 @@ export default async function App({
       <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="color-scheme" content="light dark" />
         {state.meta?.title && (
           <>
             <title>{state.meta.title}</title>
@@ -53,6 +55,7 @@ export default async function App({
         />
         <link rel="stylesheet" href={asset("/styles.css")} />
         <link rel="stylesheet" href={asset("/gfm.css")} />
+        <link rel="stylesheet" href={asset("/markdown.css")} />
         <link
           rel="icon"
           type="image/svg+xml"
@@ -64,8 +67,10 @@ export default async function App({
           href="/opensearch.xml"
           title="JSR"
         />
+        <script src={`data:text/javascript, ${themeToggleHeadScript}`}>
+        </script>
       </head>
-      <body>
+      <body class="bg-background-primary text-foreground-primary">
         <Component />
       </body>
     </html>
diff --git a/frontend/routes/_error.tsx b/frontend/routes/_error.tsx
index 74752573..ae28b716 100644
--- a/frontend/routes/_error.tsx
+++ b/frontend/routes/_error.tsx
@@ -19,10 +19,10 @@ export default function Error({ error }: { error: unknown }) {
         <div class="w-full overflow-x-hidden relative flex justify-between flex-col flex-wrap">
           <div class="flex-top">
             <header class="text-center px-8 py-[15vh]">
-              <h1 class="font-extrabold text-5xl leading-10 tracking-tight text-gray-900">
+              <h1 class="font-extrabold text-5xl leading-10 tracking-tight text-foreground-secondary">
                 {error.status}
               </h1>
-              <h2 class="mt-4 sm:mt-5 font-light text-2xl text-center leading-tight text-gray-900">
+              <h2 class="mt-4 sm:mt-5 font-light text-2xl text-center leading-tight text-foreground-primary">
                 {error.message}
               </h2>
               {error.status === 404 && (
diff --git a/frontend/routes/_layout.tsx b/frontend/routes/_layout.tsx
index 913ce289..8f7a5795 100644
--- a/frontend/routes/_layout.tsx
+++ b/frontend/routes/_layout.tsx
@@ -27,7 +27,7 @@ export default function Layout(
           url={url}
         />
         <div
-          class="section-x-inset-xl pt-4 md:pt-6 focus-visible:ring-0 focus-visible:outline-none"
+          class="section-x-inset-xl pt-4 md:pt-6 focus-visible:ring-0 focus-visible:outline-none "
           id="main-content"
           tabIndex={-1}
         >
diff --git a/frontend/routes/account/(_components)/AccountLayout.tsx b/frontend/routes/account/(_components)/AccountLayout.tsx
index 3248c2fe..4c191f91 100644
--- a/frontend/routes/account/(_components)/AccountLayout.tsx
+++ b/frontend/routes/account/(_components)/AccountLayout.tsx
@@ -16,7 +16,7 @@ export function AccountLayout({ user, active, children }: AccountLayoutProps) {
     <div class="grid grid-cols-1 md:grid-cols-5 gap-4">
       <div class="gap-4 flex flex-row md:flex-col items-center pr-4 md:pb-8 md:pt-4">
         <img
-          class="rounded-full size-16 md:size-32 lg:size-40 ring-2 ring-offset-1 ring-jsr-cyan-700"
+          class="rounded-full size-16 md:size-32 lg:size-40 ring-2 ring-offset-1 ring-jsr-cyan-700 ring-offset-background-primary"
           src={user.avatarUrl}
           alt="user icon"
         />
@@ -24,10 +24,10 @@ export function AccountLayout({ user, active, children }: AccountLayoutProps) {
           <h1 class="text-2xl leading-none font-semibold">
             {user.name}
           </h1>
-          <p class="text-xs text-jsr-gray-600">
+          <p class="text-xs text-foreground-secondary">
             Created account {twas(new Date(user.createdAt).getTime())}
           </p>
-          <p class="text-base mt-2">
+          <p class="text-base mt-2 text-foreground-secondary">
             <GitHubUserLink user={user} />
           </p>
         </div>
diff --git a/frontend/routes/account/(_components)/AccountNav.tsx b/frontend/routes/account/(_components)/AccountNav.tsx
index c61386ac..a19ba5cc 100644
--- a/frontend/routes/account/(_components)/AccountNav.tsx
+++ b/frontend/routes/account/(_components)/AccountNav.tsx
@@ -28,7 +28,7 @@ export function AccountNav(props: AccountNavProps) {
             class={`chip ml-2 tabular-nums ${
               props.user.inviteCount > 0
                 ? "bg-orange-600 text-white"
-                : "bg-jsr-gray-200"
+                : "bg-background-secondary text-foreground-primary "
             }`}
           >
             {props.user.inviteCount}
diff --git a/frontend/routes/account/settings.tsx b/frontend/routes/account/settings.tsx
index 3fdf8c72..fe11c37a 100644
--- a/frontend/routes/account/settings.tsx
+++ b/frontend/routes/account/settings.tsx
@@ -21,7 +21,7 @@ Reason: `;
           <div class="flex flex-col gap-8">
             <div class="flex flex-col justify-between gap-4">
               <div class="max-w-xl">
-                <p class="text-jsr-gray-600">
+                <p class="text-foreground-secondary">
                   Users have certain quotas to help prevent abuse. We are happy
                   to increase your quotas as needed — just send us an increase
                   request.
@@ -52,7 +52,7 @@ Reason: `;
         </div>
         <div>
           <h2 class="text-xl mb-2 font-bold">Delete account</h2>
-          <p class="mt-2 text-jsr-gray-600 max-w-xl">
+          <p class="mt-2 text-foreground-secondary max-w-xl">
             You may delete your account at any time. If you delete your account,
             any scopes that you are the sole owner of will be orphaned. You will
             not be able to recover your account after deletion.
diff --git a/frontend/routes/account/tokens/(_islands)/CreateToken.tsx b/frontend/routes/account/tokens/(_islands)/CreateToken.tsx
index ec69caac..363a0538 100644
--- a/frontend/routes/account/tokens/(_islands)/CreateToken.tsx
+++ b/frontend/routes/account/tokens/(_islands)/CreateToken.tsx
@@ -88,12 +88,12 @@ function ChooseUsage({ usage }: { usage: Signal<"publish" | "api" | null> }) {
 
   return (
     <form
-      class="bg-jsr-cyan-50 border border-jsr-cyan-500 p-4 mt-4 max-w-2xl rounded-lg"
+      class="bg-jsr-cyan-500/20 border border-jsr-cyan-500 p-4 mt-4 max-w-2xl rounded-lg"
       ref={ref}
       onSubmit={onSubmit}
       onInput={onInput}
     >
-      <p class="text-jsr-gray-600 font-semibold">
+      <p class="text-foreground-secondary font-semibold">
         What do you plan to do with your personal access token?
       </p>
       <label class="mt-2 flex items-baseline">
@@ -120,12 +120,12 @@ function ChoosePublishingEnvironment(
 
   return (
     <form
-      class="bg-jsr-cyan-50 border border-jsr-cyan-500 p-4 mt-4 max-w-2xl rounded-lg"
+      class="bg-jsr-cyan-500/20 border border-jsr-cyan-500 p-4 mt-4 max-w-2xl rounded-lg"
       ref={ref}
       onSubmit={onSubmit}
       onInput={onInput}
     >
-      <p class="text-jsr-gray-600 font-semibold">
+      <p class="text-foreground-secondary font-semibold">
         What environment do you want to publish from?
       </p>
       <label class="mt-2 flex items-baseline">
@@ -152,12 +152,12 @@ function LocalMachineHelp(
 ) {
   return (
     <div class="bg-orange-50 border border-orange-500 p-4 mt-4 max-w-2xl rounded-lg">
-      <p class="text-jsr-gray-600">
+      <p class="text-foreground-secondary">
         When publishing from a local machine, JSR can interactively authenticate
         you using the web browser. This is much more secure than using a
         personal access token, and is the recommended way to publish packages.
       </p>
-      <p class="text-jsr-gray-600 mt-3">
+      <p class="text-foreground-secondary mt-3">
         Do you still want to create a personal access token?
       </p>
       <div class="flex gap-4 mt-4">
@@ -183,12 +183,12 @@ function LocalMachineHelp(
 function GitHubActionsHelp() {
   return (
     <div class="bg-orange-50 border border-orange-500 p-4 mt-4 max-w-2xl rounded-lg">
-      <p class="text-jsr-gray-600">
+      <p class="text-foreground-secondary">
         When publishing from GitHub Actions, JSR authenticates you using OIDC,
         an authentication mechanism that is built into GitHub Actions. It is
         much more secure than using a personal access token.
       </p>
-      <p class="text-jsr-gray-600 mt-3">
+      <p class="text-foreground-secondary mt-3">
         You do not need a personal access token for this flow. You can find
         instructions for publishing from GitHub Actions with OIDC in the
         "Publish" tab of your package page.
@@ -208,14 +208,14 @@ function LocalDangerWarning(
 ) {
   return (
     <div class="bg-red-50 border border-red-500 p-4 mt-4 max-w-2xl rounded-lg">
-      <p class="text-jsr-gray-600">
+      <p class="text-foreground-secondary">
         Personal access tokens enable a malicious user to impersonate you and
         perform any action you can on JSR,{" "}
         <b>
           including publishing new versions of your packages
         </b>.
       </p>
-      <p class="text-jsr-gray-600 mt-3">
+      <p class="text-foreground-secondary mt-3">
         Do not store tokens in your code, in unencrypted local files, or in a
         .bashrc or a similar file. A malicious program could steal your token
         and use it to perform actions on your behalf.
@@ -235,14 +235,14 @@ function LocalDangerWarning(
 function FinalDangerWarning({ willBeSafe }: { willBeSafe: Signal<boolean> }) {
   return (
     <div class="bg-red-50 border border-red-500 p-4 mt-4 max-w-2xl rounded-lg">
-      <p class="text-jsr-gray-600">
+      <p class="text-foreground-secondary">
         Personal access tokens are powerful and can be used to perform any
         action you can on JSR,{" "}
         <b>
           including publishing new versions of your packages
         </b>.
       </p>
-      <p class="text-jsr-gray-600 mt-3">
+      <p class="text-foreground-secondary mt-3">
         The JSR team will never ask you for you to create or share a personal
         access token. If you are being asked to do so, email{" "}
         <a href="mailto:help@jsr.io" class="link">help@jsr.io</a>{" "}
@@ -350,13 +350,15 @@ function CreateTokenForm() {
 function DescriptionInput({ description }: { description: Signal<string> }) {
   return (
     <label class="block">
-      <span class="text-jsr-gray-600 font-semibold block">Description</span>
+      <span class="text-foreground-secondary font-semibold block">
+        Description
+      </span>
       <span class="text-jsr-gray-500 text-sm block">
         A description helps you remember what this token is for.
       </span>
       <input
         type="text"
-        class="mt-1 p-1.5 input-container input w-88 bg-white"
+        class="mt-1 p-1.5 input-container input w-88 bg-background-primary"
         placeholder="Publish @luca/flag from GitLab CI"
         required
         value={description}
@@ -370,12 +372,14 @@ function DescriptionInput({ description }: { description: Signal<string> }) {
 function ExpiryInput({ expiry }: { expiry: Signal<number> }) {
   return (
     <label class="block mt-8">
-      <span class="text-jsr-gray-600 font-semibold block">Expires in</span>
+      <span class="text-foreground-secondary font-semibold block">
+        Expires in
+      </span>
       <span class="text-jsr-gray-500 text-sm block">
         Tokens that expire are more secure than tokens that never expire.
       </span>
       <select
-        class="mt-1 p-1.5 input-container select w-60 bg-white"
+        class="mt-1 p-1.5 input-container select w-60 bg-background-primary"
         required
         value={expiry}
         onInput={(e) =>
@@ -424,12 +428,12 @@ function PermissionsInput(
 
   return (
     <div class="block mt-8" onInput={onInput}>
-      <p class="text-jsr-gray-600 font-semibold">Permissions</p>
+      <p class="text-foreground-secondary font-semibold">Permissions</p>
       <p class="text-jsr-gray-500 text-sm max-w-2xl">
         Choose the permissions this token should have. More restrictive
         permissions are more secure.
       </p>
-      <div class="text-jsr-gray-600 flex flex-col my-2">
+      <div class="text-foreground-secondary flex flex-col my-2">
         <div class="border bg-green-50 border-green-200 -mx-3 px-3 -mt-1 pb-1 pt-2 rounded-t-lg flex flex-col sm:flex-row justify-between">
           <div>
             <label class="flex items-baseline">
@@ -441,7 +445,7 @@ function PermissionsInput(
               />
               <span>Publish new versions of this package:</span>
             </label>
-            <div class="flex items-center w-[100%-1.25rem] ml-5 mt-1 mb-2 md:w-88 rounded-md text-jsr-gray-900 shadow-sm pl-3 py-[2px] pr-[2px] sm:leading-6 bg-white input-container">
+            <div class="flex items-center w-[100%-1.25rem] ml-5 mt-1 mb-2 md:w-88 rounded-md text-foreground-primary shadow-sm pl-3 py-[2px] pr-[2px] sm:leading-6 bg-background-primary input-container">
               <span class="block">
                 @
               </span>
@@ -488,12 +492,12 @@ function PermissionsInput(
           </span>
         </div>
 
-        <div class="border border-t-0 bg-jsr-gray-50 border-jsr-gray-200 -mx-3 px-3 py-1">
+        <div class="border border-t-0 bg-jsr-gray-50 border-jsr-gray-500/30 -mx-3 px-3 py-1">
           <label class="flex items-baseline">
             <input type="radio" class="mr-2" name="permission" value="scope" />
             <span>Publish new versions of any packages in this scope:</span>
           </label>
-          <div class="flex items-center w-[100%-1.25rem] ml-5 mt-1 mb-2 md:w-64 rounded-md text-jsr-gray-900 shadow-sm pl-3 py-[2px] pr-[2px] sm:leading-6 bg-white input-container">
+          <div class="flex items-center w-[100%-1.25rem] ml-5 mt-1 mb-2 md:w-64 rounded-md text-foreground-primary shadow-sm pl-3 py-[2px] pr-[2px] sm:leading-6 bg-background-primary input-container">
             <span class="block">
               @
             </span>
@@ -510,7 +514,7 @@ function PermissionsInput(
           </div>
         </div>
 
-        <div class="border border-t-0 bg-jsr-gray-50 border-jsr-gray-200 -mx-3 px-3 -mb-1 py-1 rounded-b-lg flex flex-col sm:flex-row justify-between">
+        <div class="border border-t-0 bg-jsr-gray-50 border-jsr-gray-500/30 -mx-3 px-3 -mb-1 py-1 rounded-b-lg flex flex-col sm:flex-row justify-between">
           <label class="flex items-baseline">
             <input type="radio" class="mr-2" name="permission" value="full" />
             <span>Full access</span>
@@ -528,7 +532,7 @@ function TokenDisplay({ token }: { token: string }) {
   return (
     <div class="mt-8 max-w-2xl">
       <div class="bg-blue-50 border border-blue-500 p-4 rounded-lg">
-        <p class="text-jsr-gray-600">
+        <p class="text-foreground-secondary">
           Your personal access token has been created. Copy it now, as you will
           not be able to see it again.
         </p>
diff --git a/frontend/routes/account/tokens/create.tsx b/frontend/routes/account/tokens/create.tsx
index 7793780a..3dd888ea 100644
--- a/frontend/routes/account/tokens/create.tsx
+++ b/frontend/routes/account/tokens/create.tsx
@@ -17,11 +17,11 @@ export default define.page<typeof handler>(function AccountCreateTokenPage() {
         <h2 class="text-xl font-bold">
           Create a personal access token
         </h2>
-        <p class="text-jsr-gray-600 max-w-2xl mt-2">
+        <p class="text-foreground-secondary max-w-2xl mt-2">
           Personal access tokens can be used to authenticate with JSR from the
           command line or from other applications.
         </p>
-        <p class="text-jsr-gray-600 max-w-2xl mt-3">
+        <p class="text-foreground-secondary max-w-2xl mt-3">
           Actions performed by personal access tokens are attributed to your
           account.
         </p>
diff --git a/frontend/routes/account/tokens/index.tsx b/frontend/routes/account/tokens/index.tsx
index 0da983a7..41d1906b 100644
--- a/frontend/routes/account/tokens/index.tsx
+++ b/frontend/routes/account/tokens/index.tsx
@@ -19,7 +19,7 @@ export default define.page<typeof handler>(function AccountTokensPage({
     <AccountLayout user={data.user} active="Tokens">
       <div>
         <h2 class="text-xl mb-2 font-bold">Personal access tokens</h2>
-        <p class="text-jsr-gray-600 max-w-2xl">
+        <p class="text-foreground-secondary max-w-2xl">
           Personal access tokens can be used to authenticate with JSR from the
           command line or from other applications.
         </p>
@@ -43,7 +43,7 @@ export default define.page<typeof handler>(function AccountTokensPage({
           )
           : (
             <div class="mt-6">
-              <p class="italic text-jsr-gray-600">
+              <p class="italic text-foreground-secondary">
                 You have no personal access tokens.
               </p>
               <p class="mt-2">
@@ -60,7 +60,7 @@ export default define.page<typeof handler>(function AccountTokensPage({
       </div>
       <div class="mt-8">
         <h2 class="text-xl mt-4 mb-2 font-bold">Sessions</h2>
-        <p class="text-jsr-gray-600 max-w-2xl">
+        <p class="text-foreground-secondary max-w-2xl">
           Sessions keep you logged in to JSR on the web, and are used during
           interactive authentication during publishing.
         </p>
@@ -69,7 +69,7 @@ export default define.page<typeof handler>(function AccountTokensPage({
           {sessions.map((token, idx) => <SessionRow key={idx} token={token} />)}
         </ul>
 
-        <p class="text-jsr-gray-600 text-sm mt-4">
+        <p class="text-foreground-secondary text-sm mt-4">
           Only sessions that are active, or have expired within the last 24
           hours are shown here.
         </p>
@@ -88,7 +88,7 @@ function PersonalTokenRow({ token }: { token: Token }) {
   return (
     <li class="py-2">
       <div class="flex justify-between">
-        <p class="text-jsr-gray-600">
+        <p class="text-foreground-secondary">
           {token.description || <i>Unnamed</i>}
         </p>
         <p class="text-sm text-right">
@@ -122,7 +122,7 @@ function PersonalTokenRow({ token }: { token: Token }) {
           Created {twas(new Date(token.createdAt).getTime())}
         </p>
       </div>
-      <p class="text-sm text-jsr-gray-600">
+      <p class="text-sm text-foreground-secondary">
         {token.permissions === null
           ? "Has full access"
           : token.permissions.map((perm) => {
@@ -146,7 +146,7 @@ function SessionRow({ token }: { token: Token }) {
 
   return (
     <li class="py-2">
-      <p class="text-jsr-gray-600">
+      <p class="text-foreground-secondary">
         {token.type === "web" ? "Web" : token.type === "device" ? "CLI" : ""}
         {" "}
         session
diff --git a/frontend/routes/auth.tsx b/frontend/routes/auth.tsx
index 1565e382..6a02bf55 100644
--- a/frontend/routes/auth.tsx
+++ b/frontend/routes/auth.tsx
@@ -17,7 +17,7 @@ export default define.page<typeof handler>(function AuthPage({ data }) {
     return (
       <div>
         <h1 class="text-lg font-semibold">Authorization</h1>
-        <p class="mt-2 text-jsr-gray-600 max-w-3xl">
+        <p class="mt-2 text-foreground-secondary max-w-3xl">
           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 56a41289..c7e59767 100644
--- a/frontend/routes/docs/[...id].tsx
+++ b/frontend/routes/docs/[...id].tsx
@@ -22,7 +22,7 @@ export default define.page<typeof handler>(function Page({ data }) {
   return (
     <div class="mb-20">
       <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-jsr-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-jsr-cyan-500 md:border-t-0 md:border-jsr-cyan-500/20 pt-4 md:pt-0">
           <div>
             <p class="text-xl font-semibold" id="sidebar">Docs</p>
           </div>
@@ -37,9 +37,9 @@ export default define.page<typeof handler>(function Page({ data }) {
                       href={`/docs/${id}`}
                       class={`${
                         id === data.id
-                          ? "px-4 text-jsr-cyan-700 border-l-4 border-jsr-cyan-400 bg-jsr-cyan-100"
-                          : "pl-5 pr-4"
-                      } py-1.5 block leading-5 hover:text-jsr-gray-600 hover:underline`}
+                          ? "px-4 text-jsr-cyan-500/90 border-l-4 border-jsr-cyan-400 bg-jsr-cyan-500/20"
+                          : "pl-5 pr-4 text-foreground-secondary "
+                      } py-1.5 block leading-5 hover:text-foreground-secondary/90 hover:underline`}
                     >
                       {title}
                     </a>
@@ -54,7 +54,7 @@ export default define.page<typeof handler>(function Page({ data }) {
           <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-jsr-gray-900">
+          <h1 class="text-4xl lg:text-5xl lg:leading-[1.1] text-balance font-medium mb-8 text-foreground-primary">
             {data.title}
           </h1>
           <Markdown source={data.content} />
diff --git a/frontend/routes/new.tsx b/frontend/routes/new.tsx
index 16257201..78a2450b 100644
--- a/frontend/routes/new.tsx
+++ b/frontend/routes/new.tsx
@@ -25,7 +25,7 @@ export default define.page<typeof handler>(function New(props) {
           <h1 class="mb-8 font-bold text-3xl leading-none">
             Publish a package
           </h1>
-          <p class="text-jsr-gray-900 max-w-screen-md">
+          <p class="text-foreground-secondary max-w-screen-md">
             Publish your package to the JSR to share it with the world!
           </p>
           <p>
@@ -44,7 +44,7 @@ export default define.page<typeof handler>(function New(props) {
             </IconCircle>
             <div class="w-full">
               <h2 class="font-bold text-2xl leading-none">Scope</h2>
-              <p class="mt-2 mb-4 text-jsr-gray-500 text-base">
+              <p class="mt-2 mb-4 text-foreground-secondary text-base">
                 Choose which scope your package will be published to. Scopes are
                 namespaces for packages.
               </p>
@@ -60,8 +60,8 @@ export default define.page<typeof handler>(function New(props) {
                   />
                 )
                 : (
-                  <div class="space-y-4 bg-jsr-gray-50 border-jsr-gray-100 p-4 rounded-xl">
-                    <p class="text-jsr-gray-700">
+                  <div class="space-y-4 bg-background-tertiary p-4 rounded-xl">
+                    <p class="text-foreground-secondary">
                       You must be logged in to publish a package.
                     </p>
                     <a
@@ -80,7 +80,7 @@ export default define.page<typeof handler>(function New(props) {
             </IconCircle>
             <div class="w-full">
               <h2 class="font-bold text-2xl leading-none">Package name</h2>
-              <p class="mt-1 mb-4 text-jsr-gray-500 text-base">
+              <p class="mt-1 mb-4 text-foreground-secondary text-base">
                 The name of your package must be unique within the scope you
                 selected.
               </p>
diff --git a/frontend/routes/package/(_components)/PackageHeader.tsx b/frontend/routes/package/(_components)/PackageHeader.tsx
index cd179228..0f2a17e1 100644
--- a/frontend/routes/package/(_components)/PackageHeader.tsx
+++ b/frontend/routes/package/(_components)/PackageHeader.tsx
@@ -36,7 +36,7 @@ export function PackageHeader({
   return (
     <div class="space-y-6 mt-0 md:mt-4">
       {pkg.isArchived && (
-        <div class="rounded border border-red-300 bg-red-100 flex items-center justify-center p-4">
+        <div class="rounded border border-red-500/30 bg-red-500/10 flex items-center justify-center p-4">
           This package has been archived, and as such it is read-only.
         </div>
       )}
@@ -128,7 +128,7 @@ export function PackageHeader({
             <div class="flex items-center gap-2">
               {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 text-gray-800 select-none">
                   latest
                 </div>
               )}
@@ -141,7 +141,7 @@ export function PackageHeader({
 
               {pkg.githubRepository && (
                 <a
-                  class="chip sm:big-chip bg-jsr-gray-100 !inline-flex items-center gap-1 select-none"
+                  class="chip sm:big-chip bg-jsr-gray-100 text-jsr-gray-800 !inline-flex items-center gap-1 select-none"
                   href={`https://github.com/${pkg.githubRepository.owner}/${pkg.githubRepository.name}`}
                   target="_blank"
                   rel="noopener noreferrer"
@@ -161,7 +161,7 @@ export function PackageHeader({
           </div>
 
           {pkg.description && (
-            <p class="text-jsr-gray-600 max-w-3xl md:!mb-8">
+            <p class="text-foreground-secondary max-w-3xl md:!mb-8">
               {pkg.description}
             </p>
           )}
diff --git a/frontend/routes/package/(_components)/PackageNav.tsx b/frontend/routes/package/(_components)/PackageNav.tsx
index 8276c782..c9eba8c1 100644
--- a/frontend/routes/package/(_components)/PackageNav.tsx
+++ b/frontend/routes/package/(_components)/PackageNav.tsx
@@ -63,7 +63,7 @@ export function PackageNav({
       <NavItem href={`${base}/versions`} active={currentTab === "Versions"}>
         <span class="flex items-center">
           Versions
-          <span class="chip tabular-nums border-1 border-white bg-jsr-cyan-100 ml-2 flex items-center justify-center">
+          <span class="chip tabular-nums border-1 border-background-primary bg-jsr-cyan-500/20 ml-2 flex items-center justify-center">
             {versionCount}
           </span>
         </span>
diff --git a/frontend/routes/package/(_islands)/BreadcrumbsSticky.tsx b/frontend/routes/package/(_islands)/BreadcrumbsSticky.tsx
index 97ce12d2..dca0af71 100644
--- a/frontend/routes/package/(_islands)/BreadcrumbsSticky.tsx
+++ b/frontend/routes/package/(_islands)/BreadcrumbsSticky.tsx
@@ -39,9 +39,9 @@ export function BreadcrumbsSticky(
   return (
     <div
       ref={ref}
-      class={`-section-x-inset-xl top-0 sticky bg-white z-20 -my-3 py-3 ${
+      class={`-section-x-inset-xl bg-background-primary top-0 sticky z-20 -my-3 py-3 ${
         sticky.value
-          ? "border-b border-jsr-cyan-100 shadow-[0px_2px_4px_0px_rgba(209,235,253,0.40)]"
+          ? "border-b border-jsr-cyan-500/10 shadow-jsr-cyan-500/25 shadow-sm"
           : ""
       }`}
     >
diff --git a/frontend/routes/package/(_islands)/DependencyGraph.tsx b/frontend/routes/package/(_islands)/DependencyGraph.tsx
index 52537c14..e87f49c1 100644
--- a/frontend/routes/package/(_islands)/DependencyGraph.tsx
+++ b/frontend/routes/package/(_islands)/DependencyGraph.tsx
@@ -369,7 +369,7 @@ function GraphControlButton(props: GraphControlButtonProps) {
     <button
       type="button"
       aria-label={props.title}
-      class={`${props.class} bg-white text-jsr-gray-700 p-1.5 ring-1 ring-jsr-gray-700 rounded-full sm:rounded hover:bg-jsr-gray-100/30"`}
+      class={`${props.class} bg-background-primary text-foreground-secondary p-1.5 ring-1 ring-jsr-gray-700 rounded-full sm:rounded hover:bg-jsr-gray-100/30"`}
       onClick={props.onClick}
       title={props.title}
     >
diff --git a/frontend/routes/package/(_islands)/LocalSymbolSearch.tsx b/frontend/routes/package/(_islands)/LocalSymbolSearch.tsx
index e58bedd4..d9f30ceb 100644
--- a/frontend/routes/package/(_islands)/LocalSymbolSearch.tsx
+++ b/frontend/routes/package/(_islands)/LocalSymbolSearch.tsx
@@ -299,7 +299,7 @@ export function LocalSymbolSearch(
         type="search"
         placeholder={placeholder}
         id="symbol-search-input"
-        class="block text-sm w-full py-2 px-2 input-container input bg-white border-1 border-jsr-cyan-300/50"
+        class="block text-sm w-full py-2 px-2 input-container input bg-background-tertiary text-foreground-secondary border-1 border-jsr-cyan-300/50"
         disabled={!db.value}
         onInput={onInput}
       />
diff --git a/frontend/routes/package/publish.tsx b/frontend/routes/package/publish.tsx
index a806b5fb..c9cc74ed 100644
--- a/frontend/routes/package/publish.tsx
+++ b/frontend/routes/package/publish.tsx
@@ -125,7 +125,9 @@ export default define.page<typeof handler>(function PackagePage({
         </div>
         <div class="h-full w-full grid grid-cols-1 grid-rows-1 [&>*]:col-start-1 [&>*]:row-start-1 items-center justify-center">
           <hr class="border-t-1.5 border-jsr-cyan-900 lg:border-l-1.5 lg:border-t-0 lg:h-full lg:mx-auto" />
-          <div class="p-2 bg-white text-center w-max mx-auto font-bold">OR</div>
+          <div class="p-2 bg-background-primary text-center w-max mx-auto font-bold">
+            OR
+          </div>
         </div>
         <div>
           <h4 class="font-bold text-lg lg:text-xl">
@@ -168,11 +170,11 @@ function GitHubActions({ pkg, canEdit, user }: {
           </p>
           <p>
             You will need to run{" "}
-            <code class="bg-jsr-gray-200 px-1.5 py-0.5 rounded-sm">
+            <code class="bg-background-tertiary text-foreground px-1.5 py-0.5 rounded-sm">
               deno publish
             </code>{" "}
             or{" "}
-            <code class="bg-jsr-gray-200 px-1.5 py-0.5 rounded-sm">
+            <code class="bg-background-tertiary text-foreground px-1.5 py-0.5 rounded-sm">
               npx jsr publish
             </code>{" "}
             in your action.
diff --git a/frontend/routes/package/score.tsx b/frontend/routes/package/score.tsx
index 901cc0c7..b14db48a 100644
--- a/frontend/routes/package/score.tsx
+++ b/frontend/routes/package/score.tsx
@@ -60,7 +60,7 @@ function ScoreInfo(props: {
 
   return (
     <div class="mt-8 grid items-center justify-items-center grid-cols-1 md:grid-cols-3 gap-12">
-      <div class="w-full h-full flex flex-col items-center justify-center border-1.5 border-jsr-cyan-100 rounded-lg p-8">
+      <div class="w-full h-full flex flex-col items-center justify-center border-1.5 border-jsr-cyan-500/20 rounded-lg p-8">
         <div class="flex gap-2 items-center mb-4">
           <h2 class="text-2xl font-semibold">
             <Logo size="medium" class="inline mr-2" />
@@ -74,20 +74,20 @@ function ScoreInfo(props: {
           class={`flex w-full max-w-32 items-center justify-center aspect-square rounded-full p-1.5 ${
             getScoreBgColorClass(scorePercentage)
           }`}
-          style={`background-image: conic-gradient(transparent, transparent ${scorePercentage}%, #e7e8e8 ${scorePercentage}%)`}
+          style={`background-image: conic-gradient(transparent, transparent ${scorePercentage}%, hsla(var(--background-secondary)) ${scorePercentage}%)`}
         >
-          <span class="rounded-full w-full h-full bg-white flex justify-center items-center text-center text-3xl font-bold">
+          <span class="rounded-full w-full h-full bg-white text-black flex justify-center items-center text-center text-3xl font-bold">
             {scorePercentage}%
           </span>
         </div>
-        <div class="text-jsr-gray-500 text-sm text-center mt-6">
+        <div class="text-foreground-tertiary text-sm text-center mt-6">
           The JSR score is a measure of the overall quality of a package, based
           on a number of factors such as documentation and runtime
           compatibility.
         </div>
       </div>
 
-      <ul class="flex flex-col divide-jsr-cyan-100 divide-y-1 md:col-span-2 w-full">
+      <ul class="flex flex-col divide-jsr-cyan-500/20 divide-y-1 md:col-span-2 w-full">
         <ScoreItem
           value={score.hasReadme}
           scoreValue={2}
diff --git a/frontend/routes/package/settings.tsx b/frontend/routes/package/settings.tsx
index 13b1b657..bad83de5 100644
--- a/frontend/routes/package/settings.tsx
+++ b/frontend/routes/package/settings.tsx
@@ -38,7 +38,7 @@ export default define.page<typeof handler>(function Settings({ data, params }) {
         <div class="border-t pt-8 mt-12">
           <h2 class="text-xl font-sans font-bold">Staff area</h2>
 
-          <p class="mt-2 text-jsr-gray-600 max-w-3xl">
+          <p class="mt-2 text-foreground-secondary max-w-3xl">
             Feature a package on the homepage.
           </p>
 
@@ -56,11 +56,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-jsr-gray-600 max-w-3xl">
+      <p class="mt-2 text-foreground-secondary max-w-3xl">
         The GitHub repository is shown publicly on the package page.
       </p>
 
-      <p class="mt-2 mb-4 text-jsr-gray-600 max-w-3xl">
+      <p class="mt-2 mb-4 text-foreground-secondary max-w-3xl">
         Specifying a GitHub repository also enables securely publishing from
         GitHub Actions using OIDC — no need to specify tokens or secrets.{" "}
         <a
@@ -85,7 +85,7 @@ function DescriptionEditor(props: { description: string }) {
     <form class="mt-8" method="POST">
       <h2 class="text-xl font-sans font-bold" id="description">Description</h2>
 
-      <p class="mt-2 text-jsr-gray-600 max-w-3xl">
+      <p class="mt-2 text-foreground-secondary max-w-3xl">
         The package description is shown on the package page and in search
         results.
       </p>
@@ -104,7 +104,7 @@ function RuntimeCompatEditor(props: { runtimeCompat: RuntimeCompat }) {
         Runtime Compat
       </h2>
 
-      <p class="mt-2 text-jsr-gray-600 max-w-3xl">
+      <p class="mt-2 text-foreground-secondary max-w-3xl">
         Set which packages this package is compatible with. This information is
         shown on the package page and in search results.
       </p>
@@ -138,7 +138,7 @@ function RuntimeCompatEditorItem({ name, id, value }: {
   value: boolean | undefined;
 }) {
   return (
-    <label class="block text-jsr-gray-600 font-bold" htmlFor={id}>
+    <label class="block text-foreground-secondary font-bold" htmlFor={id}>
       {name}
       <select
         class="block w-64 py-1.5 px-2 input-container select text-sm font-normal mt-1"
@@ -165,7 +165,7 @@ function ArchivePackage(props: { isArchived: boolean }) {
       <form class="border-t pt-8 mt-12" method="POST">
         <h2 class="text-xl font-sans font-bold">Archive package</h2>
 
-        <p className="mt-2 text-jsr-gray-600 max-w-3xl">
+        <p className="mt-2 text-foreground-secondary max-w-3xl">
           Archiving a package removes it from search indexing and the scope
           page, making it undiscoverable to users.
           <br />
@@ -188,7 +188,7 @@ function ArchivePackage(props: { isArchived: boolean }) {
       <form class="border-t pt-8 mt-12" method="POST">
         <h2 class="text-xl font-sans font-bold">Unarchive package</h2>
 
-        <p class="mt-2 text-jsr-gray-600 max-w-3xl">
+        <p class="mt-2 text-foreground-secondary max-w-3xl">
           Unarchiving a package restores its availability in search results and
           makes it visible on the scope page again.
           <br />
@@ -213,7 +213,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-jsr-gray-600 max-w-3xl">
+      <p class="mt-2 text-foreground-secondary max-w-3xl">
         A package can only be deleted if it has no published versions.
         <br />
         This action cannot be undone.
diff --git a/frontend/routes/package/source.tsx b/frontend/routes/package/source.tsx
index ff315284..6386e9b5 100644
--- a/frontend/routes/package/source.tsx
+++ b/frontend/routes/package/source.tsx
@@ -65,7 +65,7 @@ export default define.page<typeof handler>(function PackagePage(
             return (
               <>
                 {i !== 0 && (
-                  <span class="px-2 text-md text-jsr-gray-600 select-none">
+                  <span class="px-2 text-md text-foreground-secondary select-none">
                     {"\u003E"}
                   </span>
                 )}
@@ -133,7 +133,7 @@ function DirEntry({ entry }: { entry: SourceDirEntry }) {
           {entry.name}
         </div>
       </div>
-      <div class="text-sm text-jsr-gray-600">
+      <div class="text-sm text-foreground-secondary">
         {bytesToSize(entry.size)}
       </div>
     </div>
diff --git a/frontend/routes/package/versions.tsx b/frontend/routes/package/versions.tsx
index d58475c2..256df128 100644
--- a/frontend/routes/package/versions.tsx
+++ b/frontend/routes/package/versions.tsx
@@ -172,14 +172,14 @@ function Version({
     <div
       class={`relative py-2 px-2 md:py-3 md:px-6 border rounded-lg ${
         (!isPublished && isFailed) || version?.yanked
-          ? `bg-red-50 border-red-200 ${
-            version?.yanked ? "hover:bg-red-100 hover:border-red-300" : ""
+          ? `bg-red-500/10 border-red-500/50 ${
+            version?.yanked ? "hover:bg-red-500/20 hover:border-red-500/60" : ""
           }`
           : (!isPublished
             ? "bg-blue-50 border-blue-200"
             : (isLatestInReleaseTrack
-              ? "bg-green-50 hover:bg-green-100 border-green-300 hover:border-green-400"
-              : "hover:bg-jsr-gray-100 border-jsr-gray-100 hover:border-jsr-gray-300"))
+              ? "bg-green-500/10 hover:bg-green-500/20 border-green-500/50 hover:border-green-500/60"
+              : "hover:bg-jsr-gray-500/10 border-jsr-gray-500/20 hover:border-jsr-gray-500/30"))
       }`}
     >
       <div class="flex items-center justify-between">
@@ -192,7 +192,7 @@ function Version({
                   ? "bg-blue-300 border-blue-400 text-blue-700"
                   : (isLatestInReleaseTrack
                     ? "bg-green-300 border-green-400 text-green-700"
-                    : "bg-jsr-gray-200 border-jsr-gray-300 text-jsr-gray-600"))
+                    : "bg-jsr-gray-200 border-jsr-gray-300 text-foreground-secondary"))
             }`}
             title={version?.yanked
               ? "Yanked"
diff --git a/frontend/routes/publishing/(_islands)/OverallStatus.tsx b/frontend/routes/publishing/(_islands)/OverallStatus.tsx
index 179aeada..3ff73af8 100644
--- a/frontend/routes/publishing/(_islands)/OverallStatus.tsx
+++ b/frontend/routes/publishing/(_islands)/OverallStatus.tsx
@@ -24,7 +24,7 @@ export function OverallStatus(
           ? "bg-red-50 border-red-200 text-red-700"
           : success.value
           ? "bg-green-50 border-green-200 text-green-700"
-          : "bg-jsr-cyan-50 border-jsr-cyan-200 text-jsr-cyan-700"
+          : "bg-jsr-cyan-500/20 border-jsr-cyan-500/20 text-jsr-cyan-700"
       }`}
     >
       {anyFailed.value
diff --git a/frontend/routes/publishing/(_islands)/publishing.tsx b/frontend/routes/publishing/(_islands)/publishing.tsx
index ed98334f..f1a8151d 100644
--- a/frontend/routes/publishing/(_islands)/publishing.tsx
+++ b/frontend/routes/publishing/(_islands)/publishing.tsx
@@ -52,12 +52,12 @@ export function PackagePublishStatus(props: {
   const { loading, task } = props.status.value;
 
   if (loading) {
-    return <p class="italic text-jsr-gray-600 max-w-2xl">...</p>;
+    return <p class="italic text-foreground-secondary max-w-2xl">...</p>;
   }
 
   if (!task) {
     return (
-      <p class="italic text-jsr-gray-600 max-w-2xl">
+      <p class="italic text-foreground-secondary max-w-2xl">
         Publishing has not started yet...
       </p>
     );
@@ -156,7 +156,7 @@ export function OverallStatus(
           ? "bg-red-50 border-red-200 text-red-700"
           : success.value
           ? "bg-green-50 border-green-200 text-green-700"
-          : "bg-jsr-cyan-50 border-jsr-cyan-200 text-jsr-cyan-700"
+          : "bg-jsr-cyan-500/20 border-jsr-cyan-500/30 text-jsr-cyan-700"
       }`}
     >
       {anyFailed.value
diff --git a/frontend/routes/publishing/index.tsx b/frontend/routes/publishing/index.tsx
index 9d41d5a5..a7b6b235 100644
--- a/frontend/routes/publishing/index.tsx
+++ b/frontend/routes/publishing/index.tsx
@@ -58,7 +58,9 @@ function PackageListItem(props: {
     <li class="py-1 px-4 mt-1 border-jsr-gray-200 border">
       <p class="font-semibold text-xl">
         {props.name}
-        <span class="text-jsr-gray-600 text-base">@{props.version}</span>
+        <span class="text-foreground-secondary text-base">
+          @{props.version}
+        </span>
 
         <PackageLink status={props.status} />
       </p>
diff --git a/frontend/static/gfm.css b/frontend/static/gfm.css
index f3b25c23..88c3f691 100644
--- a/frontend/static/gfm.css
+++ b/frontend/static/gfm.css
@@ -3,6 +3,7 @@
 .markdown-body {
   line-height: 1.6;
   overflow: visible;
+  @apply bg-background-primary text-foreground-primary/70;
 }
 
 .markdown-body a {
@@ -54,7 +55,7 @@
 }
 
 .markdown-body pre {
-  border: 1.5px solid #cbd5e1;
+  @apply border-[1.5px] border-foreground-secondary/20;
 }
 
 @media screen and (min-width: 1024px) {
@@ -66,7 +67,11 @@
 
 .markdown-body blockquote {
   padding: 1.5rem;
-  background: #f1f5f9; /* cyan-200 */
+  @apply bg-jsr-cyan-500/10;
+}
+
+.markdown-body code {
+  @apply bg-foreground-secondary/10;
 }
 
 .markdown-body p,
diff --git a/frontend/static/markdown.css b/frontend/static/markdown.css
new file mode 100644
index 00000000..980fc1de
--- /dev/null
+++ b/frontend/static/markdown.css
@@ -0,0 +1,799 @@
+/* Override css vars for markdown and code blocks (light and dark). */
+:root {
+  --color-fg-default: hsla(var(--foreground-primary));
+  --color-fg-muted: hsla(var(--foreground-tertiary));
+  --color-canvas-default: hsla(var(--background));
+  --color-canvas-subtle: hsla(var(--background-tertiary));
+  --color-border-default: hsla(var(--foreground-secondary), 0.3);
+  --color-border-muted: hsla(var(--foreground-tertiary), 0.1);
+  --color-prettylights-syntax-comment: #6e7781;
+  --color-prettylights-syntax-constant: #0550ae;
+  --color-prettylights-syntax-entity: #8250df;
+  --color-prettylights-syntax-storage-modifier-import: var(
+    --foreground-secondary
+  );
+  --color-prettylights-syntax-entity-tag: #22863a;
+  --color-prettylights-syntax-keyword: #cf222e;
+  --color-prettylights-syntax-string: var(--color-prettylights-syntax-constant);
+  --color-prettylights-syntax-variable: #953800;
+  --color-prettylights-syntax-string-regexp: #116329;
+  --color-prettylights-syntax-markup-deleted-text: #82071e;
+  --color-prettylights-syntax-markup-deleted-bg: #ffebe9;
+  --color-prettylights-syntax-markup-inserted-text: #116329;
+  --color-prettylights-syntax-markup-inserted-bg: #dafbe1;
+  --color-prettylights-syntax-constant-other-reference-link: #0a3069;
+  --color-neutral-muted: rgba(175, 184, 193, 0.2);
+  --color-accent-fg: #0969da;
+  --color-accent-emphasis: #0969da;
+  --color-danger-fg: #cf222e;
+
+  --warn-border: #ff9100;
+  --warn-bg: #f0900525;
+  --warn-text: var(--color-fg-default);
+}
+html[data-theme="dark"]:root {
+  --color-accent-fg: #3d96ff;
+  --color-prettylights-syntax-keyword: #ee5b65;
+  --color-prettylights-syntax-entity: #b291f0;
+  --color-prettylights-syntax-constant: #448ce5;
+  --color-prettylights-syntax-entity-tag: #7cb78a;
+  --color-prettylights-syntax-variable: #d18253;
+  --color-prettylights-syntax-markup-deleted-text: #ffebe9;
+  --color-prettylights-syntax-markup-deleted-bg: #82071e;
+  --color-prettylights-syntax-markup-inserted-text: #dafbe1;
+  --color-prettylights-syntax-markup-inserted-bg: #116329;
+
+  --warn-border: #ff9100;
+  --warn-bg: #f0900525;
+  --warn-text: var(--color-fg-default);
+}
+
+.markdown-body {
+  word-wrap: break-word;
+  font-family: inherit;
+  font-size: 1.125rem;
+  line-height: 1.75;
+}
+.markdown-body:before {
+  content: "";
+  display: table;
+}
+.markdown-body:after {
+  clear: both;
+  content: "";
+  display: table;
+}
+.markdown-body > :first-child {
+  margin-top: 0 !important;
+}
+.markdown-body > :last-child {
+  margin-bottom: 0 !important;
+}
+.markdown-body a:not([href]) {
+  color: inherit;
+  text-decoration: none;
+}
+.markdown-body .absent {
+  color: var(--color-danger-fg);
+}
+.markdown-body .anchor {
+  float: left;
+  margin-left: -20px;
+  padding-right: 4px;
+  line-height: 1;
+}
+.markdown-body .anchor:focus {
+  outline: none;
+}
+.markdown-body p {
+  margin: 1rem;
+}
+.markdown-body p,
+.markdown-body blockquote,
+.markdown-body ul,
+.markdown-body ol,
+.markdown-body dl,
+.markdown-body table,
+.markdown-body pre,
+.markdown-body details {
+  margin-bottom: 1rem;
+}
+.markdown-body hr {
+  height: 0.25em;
+  background-color: var(--color-border-default);
+  border: 0;
+  margin: 24px 0;
+  padding: 0;
+}
+.markdown-body blockquote {
+  color: var(--color-fg-default);
+  border-left: 0.25em solid var(--color-border-default);
+  padding: 0 1em;
+}
+.markdown-body blockquote > :first-child {
+  margin-top: 0;
+}
+.markdown-body blockquote > :last-child {
+  margin-bottom: 0;
+}
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6 {
+  font-weight: var(--base-text-weight-semibold, 600);
+  margin-top: 24px;
+  margin-bottom: 16px;
+  line-height: 1.25;
+}
+.markdown-body h1 .octicon-link,
+.markdown-body h2 .octicon-link,
+.markdown-body h3 .octicon-link,
+.markdown-body h4 .octicon-link,
+.markdown-body h5 .octicon-link,
+.markdown-body h6 .octicon-link {
+  color: var(--color-fg-default);
+  vertical-align: middle;
+  visibility: hidden;
+}
+.markdown-body h1:hover .anchor,
+.markdown-body h2:hover .anchor,
+.markdown-body h3:hover .anchor,
+.markdown-body h4:hover .anchor,
+.markdown-body h5:hover .anchor,
+.markdown-body h6:hover .anchor {
+  text-decoration: none;
+}
+.markdown-body h1:hover .anchor .octicon-link,
+.markdown-body h2:hover .anchor .octicon-link,
+.markdown-body h3:hover .anchor .octicon-link,
+.markdown-body h4:hover .anchor .octicon-link,
+.markdown-body h5:hover .anchor .octicon-link,
+.markdown-body h6:hover .anchor .octicon-link {
+  visibility: visible;
+}
+.markdown-body h1 tt,
+.markdown-body h1 code,
+.markdown-body h2 tt,
+.markdown-body h2 code,
+.markdown-body h3 tt,
+.markdown-body h3 code,
+.markdown-body h4 tt,
+.markdown-body h4 code,
+.markdown-body h5 tt,
+.markdown-body h5 code,
+.markdown-body h6 tt,
+.markdown-body h6 code {
+  font-size: inherit;
+  padding: 0 0.2em;
+}
+.markdown-body h2 {
+  border-top: 1px solid var(--color-border-muted);
+  padding-top: 1.25rem;
+  margin-top: 2rem;
+  font-size: 1.5em;
+}
+.markdown-body h3 {
+  font-size: 1.25em;
+}
+.markdown-body h4 {
+  font-size: 1em;
+}
+.markdown-body h5 {
+  font-size: 0.875em;
+}
+.markdown-body h6 {
+  color: var(--color-fg-muted);
+  font-size: 0.85em;
+}
+.markdown-body summary h1,
+.markdown-body summary h2,
+.markdown-body summary h3,
+.markdown-body summary h4,
+.markdown-body summary h5,
+.markdown-body summary h6 {
+  display: inline-block;
+}
+.markdown-body summary h1 .anchor,
+.markdown-body summary h2 .anchor,
+.markdown-body summary h3 .anchor,
+.markdown-body summary h4 .anchor,
+.markdown-body summary h5 .anchor,
+.markdown-body summary h6 .anchor {
+  margin-left: -40px;
+}
+.markdown-body summary h1,
+.markdown-body summary h2 {
+  border-bottom: 0;
+  padding-bottom: 0;
+}
+.markdown-body ul,
+.markdown-body ol {
+  padding-left: 2em;
+}
+.markdown-body ul.no-list,
+.markdown-body ol.no-list {
+  padding: 0;
+  list-style-type: none;
+}
+.markdown-body ol[type="a"] {
+  list-style-type: lower-alpha;
+}
+.markdown-body ol[type="A"] {
+  list-style-type: upper-alpha;
+}
+.markdown-body ol[type="i"] {
+  list-style-type: lower-roman;
+}
+.markdown-body ol[type="I"] {
+  list-style-type: upper-roman;
+}
+.markdown-body ol[type="1"] {
+  list-style-type: decimal;
+}
+.markdown-body div > ol:not([type]) {
+  list-style-type: decimal;
+}
+.markdown-body ul ul,
+.markdown-body ul ol,
+.markdown-body ol ol,
+.markdown-body ol ul {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.markdown-body li > p {
+  margin-top: 16px;
+}
+.markdown-body li + li {
+  margin-top: 0.25em;
+}
+.markdown-body dl {
+  padding: 0;
+}
+.markdown-body dl dt {
+  font-size: 1em;
+  font-style: italic;
+  font-weight: var(--base-text-weight-semibold, 600);
+  margin-top: 16px;
+  padding: 0;
+}
+.markdown-body dl dd {
+  margin-bottom: 16px;
+  padding: 0 16px;
+}
+.markdown-body table {
+  width: 100%;
+  width: -webkit-max-content;
+  width: -webkit-max-content;
+  width: max-content;
+  max-width: 100%;
+  display: block;
+  overflow: auto;
+}
+.markdown-body table th {
+  font-weight: var(--base-text-weight-semibold, 600);
+}
+.markdown-body table th,
+.markdown-body table td {
+  border: 1px solid var(--color-border-default);
+  padding: 6px 13px;
+}
+.markdown-body table td > :last-child {
+  margin-bottom: 0;
+}
+.markdown-body table tr {
+  background-color: var(--color-canvas-default);
+  border-top: 1px solid var(--color-border-muted);
+}
+.markdown-body table tr:nth-child(2n) {
+  background-color: var(--color-canvas-subtle);
+}
+.markdown-body table img {
+  background-color: transparent;
+}
+.markdown-body img {
+  max-width: 100%;
+  box-sizing: content-box;
+  background-color: var(--color-canvas-default);
+}
+.markdown-body img[align="right"] {
+  padding-left: 20px;
+}
+.markdown-body img[align="left"] {
+  padding-right: 20px;
+}
+.markdown-body .emoji {
+  max-width: none;
+  vertical-align: text-top;
+  background-color: transparent;
+}
+.markdown-body span.frame {
+  display: block;
+  overflow: hidden;
+}
+.markdown-body span.frame > span {
+  float: left;
+  width: auto;
+  border: 1px solid var(--color-border-default);
+  margin: 13px 0 0;
+  padding: 7px;
+  display: block;
+  overflow: hidden;
+}
+.markdown-body span.frame span img {
+  float: left;
+  display: block;
+}
+.markdown-body span.frame span span {
+  clear: both;
+  color: var(--color-fg-default);
+  padding: 5px 0 0;
+  display: block;
+}
+.markdown-body span.align-center {
+  clear: both;
+  display: block;
+  overflow: hidden;
+}
+.markdown-body span.align-center > span {
+  text-align: center;
+  margin: 13px auto 0;
+  display: block;
+  overflow: hidden;
+}
+.markdown-body span.align-center span img {
+  text-align: center;
+  margin: 0 auto;
+}
+.markdown-body span.align-right {
+  clear: both;
+  display: block;
+  overflow: hidden;
+}
+.markdown-body span.align-right > span {
+  text-align: right;
+  margin: 13px 0 0;
+  display: block;
+  overflow: hidden;
+}
+.markdown-body span.align-right span img {
+  text-align: right;
+  margin: 0;
+}
+.markdown-body span.float-left {
+  float: left;
+  margin-right: 13px;
+  display: block;
+  overflow: hidden;
+}
+.markdown-body span.float-left span {
+  margin: 13px 0 0;
+}
+.markdown-body span.float-right {
+  float: right;
+  margin-left: 13px;
+  display: block;
+  overflow: hidden;
+}
+.markdown-body span.float-right > span {
+  text-align: right;
+  margin: 13px auto 0;
+  display: block;
+  overflow: hidden;
+}
+.markdown-body code,
+.markdown-body tt {
+  white-space: break-spaces;
+  background-color: theme("colors.foreground-primary/10%");
+  border-radius: 6px;
+  margin: 0;
+  padding: 0.1875rem 0.375rem;
+  font-size: 0.875rem;
+}
+.markdown-body code br,
+.markdown-body tt br {
+  display: none;
+}
+.markdown-body del code {
+  -webkit-text-decoration: inherit;
+  -webkit-text-decoration: inherit;
+  text-decoration: inherit;
+}
+.markdown-body samp {
+  font-size: 85%;
+}
+.markdown-body pre {
+  word-wrap: normal;
+}
+.markdown-body pre code {
+  font-size: 100%;
+}
+.markdown-body pre > code {
+  word-break: normal;
+  white-space: pre;
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+.markdown-body .highlight {
+  margin-bottom: 16px;
+}
+.markdown-body .highlight pre {
+  word-break: normal;
+  margin-bottom: 0;
+}
+.markdown-body .highlight pre,
+.markdown-body pre {
+  border-radius: 6px;
+  padding: 1.25rem 1.5rem;
+  font-size: 85%;
+  line-height: 1.45;
+  overflow: auto;
+}
+.markdown-body pre code,
+.markdown-body pre tt {
+  max-width: auto;
+  line-height: inherit;
+  word-wrap: normal;
+  background-color: transparent;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  display: inline;
+  overflow: visible;
+}
+.markdown-body .csv-data td,
+.markdown-body .csv-data th {
+  text-align: left;
+  white-space: nowrap;
+  padding: 5px;
+  font-size: 0.75rem;
+  line-height: 1;
+  overflow: hidden;
+}
+.markdown-body .csv-data .blob-num {
+  text-align: right;
+  background: var(--color-canvas-default);
+  border: 0;
+  padding: 10px 8px 9px;
+}
+.markdown-body .csv-data tr {
+  border-top: 0;
+}
+.markdown-body .csv-data th {
+  font-weight: var(--base-text-weight-semibold, 600);
+  background: var(--color-canvas-subtle);
+  border-top: 0;
+}
+.markdown-body [data-footnote-ref]:before {
+  content: "[";
+}
+.markdown-body [data-footnote-ref]:after {
+  content: "]";
+}
+.markdown-body .footnotes {
+  color: var(--color-fg-muted);
+  border-top: 1px solid var(--color-border-default);
+  font-size: 0.75rem;
+}
+.markdown-body .footnotes ol {
+  padding-left: 16px;
+}
+.markdown-body .footnotes ol ul {
+  margin-top: 16px;
+  padding-left: 16px;
+  display: inline-block;
+}
+.markdown-body .footnotes li {
+  position: relative;
+}
+.markdown-body .footnotes li:target:before {
+  pointer-events: none;
+  content: "";
+  border: 2px solid var(--color-accent-emphasis);
+  border-radius: 6px;
+  position: absolute;
+  top: -8px;
+  bottom: -8px;
+  left: -24px;
+  right: -8px;
+}
+.markdown-body .footnotes li:target {
+  color: var(--color-fg-default);
+}
+.markdown-body .footnotes .data-footnote-backref g-emoji {
+  font-family: monospace;
+}
+.markdown-body {
+  background-color: var(--color-canvas-default);
+  color: var(--color-fg-default);
+}
+.markdown-body a {
+  color: var(--color-accent-fg);
+  text-decoration: none;
+}
+.markdown-body a:hover {
+  text-decoration: underline;
+}
+.markdown-body img[align="center"] {
+  margin: 0 auto;
+}
+.markdown-body iframe {
+  background-color: #fff;
+  border: 0;
+  margin-bottom: 16px;
+}
+.markdown-body svg.octicon {
+  fill: currentColor;
+}
+.markdown-body .anchor > .octicon {
+  display: inline;
+}
+.markdown-body figcaption {
+  text-align: center;
+  padding-top: 2px;
+}
+.markdown-body .highlight .token.keyword,
+.gfm-highlight .token.keyword {
+  color: var(--color-prettylights-syntax-keyword);
+}
+.highlight .atrule .rule {
+  color: var(--color-prettylights-syntax-keyword);
+}
+.markdown-body .highlight .token.tag .token.class-name,
+.markdown-body .highlight .token.tag .token.script .token.punctuation,
+.gfm-highlight .token.tag .token.class-name,
+.gfm-highlight .token.tag .token.script .token.punctuation {
+  color: var(--color-prettylights-syntax-storage-modifier-import);
+}
+.markdown-body .highlight .token.operator,
+.markdown-body .highlight .token.number,
+.markdown-body .highlight .token.boolean,
+.markdown-body .highlight .token.tag .token.punctuation,
+.markdown-body .highlight .token.tag .token.script .token.script-punctuation,
+.markdown-body .highlight .token.tag .token.attr-name,
+.gfm-highlight .token.operator,
+.gfm-highlight .token.number,
+.gfm-highlight .token.boolean,
+.gfm-highlight .token.tag .token.punctuation,
+.gfm-highlight .token.tag .token.script .token.script-punctuation,
+.gfm-highlight .token.tag .token.attr-name {
+  color: var(--color-prettylights-syntax-constant);
+}
+.markdown-body .highlight .token.function,
+.gfm-highlight .token.function {
+  color: var(--color-prettylights-syntax-entity);
+}
+.markdown-body .highlight .token.string,
+.gfm-highlight .token.string {
+  color: var(--color-prettylights-syntax-string);
+}
+.markdown-body .highlight .token.comment,
+.gfm-highlight .token.comment {
+  color: var(--color-prettylights-syntax-comment);
+}
+.markdown-body .highlight .token.class-name,
+.gfm-highlight .token.class-name {
+  color: var(--color-prettylights-syntax-variable);
+}
+.markdown-body .highlight .token.regex,
+.gfm-highlight .token.regex {
+  color: var(--color-prettylights-syntax-string);
+}
+.markdown-body .highlight .token.regex .regex-delimiter,
+.gfm-highlight .token.regex .regex-delimiter {
+  color: var(--color-prettylights-syntax-constant);
+}
+.markdown-body .highlight .token.tag .token.tag,
+.markdown-body .highlight .token.property,
+.gfm-highlight .token.tag .token.tag,
+.gfm-highlight .token.property {
+  color: var(--color-prettylights-syntax-entity-tag);
+}
+.markdown-body .highlight .token.deleted,
+.gfm-highlight .token.deleted {
+  color: var(--color-prettylights-syntax-markup-deleted-text);
+  background-color: var(--color-prettylights-syntax-markup-deleted-bg);
+}
+.markdown-body .highlight .token.inserted,
+.gfm-highlight .token.inserted {
+  color: var(--color-prettylights-syntax-markup-inserted-text);
+  background-color: var(--color-prettylights-syntax-markup-inserted-bg);
+}
+
+.markdown-body h1,
+.markdown-body h2,
+.markdown-body h3,
+.markdown-body h4,
+.markdown-body h5,
+.markdown-body h6,
+.markdown-body ul,
+.markdown-body ol,
+.markdown-body p,
+.markdown-body details,
+.markdown-body blockquote {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+.markdown-body blockquote p {
+  margin-left: 0;
+}
+
+.markdown-body .admonition {
+  padding: 1rem;
+  margin: 1.5rem;
+}
+.markdown-body .admonition-header {
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  font-size: 1rem;
+  padding-bottom: 0.5rem;
+}
+.markdown-body .admonition .icon {
+  display: inline-flex;
+  margin-right: 0.25rem;
+  width: 1.2em;
+  height: 1.2em;
+  margin-bottom: 0.25rem;
+}
+.markdown-body blockquote.warn {
+  border-color: var(--warn-border);
+  background: var(--warn-bg);
+  color: var(--warn-text);
+}
+
+.markdown-body .admonition .fenced-code {
+  margin-left: 0;
+  margin-right: 0;
+  border: 1px solid #d9d2d2;
+  border-radius: 0.5rem 0.5rem 0.25rem 0.25rem;
+}
+
+.markdown-body .admonition .highlight {
+  margin-bottom: 0;
+}
+
+.markdown-body .admonition.tip .admonition-header {
+  color: rgb(0, 148, 0);
+}
+.markdown-body .admonition.tip {
+  background-color: rgb(230, 246, 230);
+  border-color: rgb(0, 148, 0);
+}
+.markdown-body .admonition.info .admonition-header {
+  color: rgb(25 146 184);
+}
+.markdown-body .admonition.info {
+  background-color: rgb(238, 249, 253);
+  border-color: rgb(25 146 184);
+}
+
+.dark .markdown-body .admonition.info {
+  background-color: hsla(var(--info), 0.1);
+  color: hsla(var(--foreground-primary));
+}
+.markdown-body .admonition.warn .admonition-header {
+  color: #dd6f04;
+}
+.markdown-body .admonition.warn {
+  color: var(--warn-text);
+  background-color: var(--warn-bg);
+  border-color: var(--warn-border);
+}
+
+@media screen and (min-width: 768px) {
+  .markdown-body table {
+    margin-left: 1rem;
+    margin-right: 1rem;
+  }
+
+  .markdown-body details .fenced-code {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  .markdown-body .admonition {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  .markdown-body .fenced-code,
+  .markdown-body h1,
+  .markdown-body h2,
+  .markdown-body h4,
+  .markdown-body h5,
+  .markdown-body h6,
+  .markdown-body p {
+    margin-left: 0;
+    margin-right: 0;
+  }
+  .markdown-body h3 {
+    margin: 2rem 0 1rem 0;
+  }
+}
+
+ol.nested {
+  counter-reset: item;
+}
+
+ol.nested li {
+  display: block;
+}
+
+ol.nested li:before {
+  font-feature-settings: "kern" 1, "tnum" 1;
+  -webkit-font-feature-settings: "kern" 1, "tnum" 1;
+  -ms-font-feature-settings: "kern" 1, "tnum" 1;
+  -moz-font-feature-settings: "kern" 1, "tnum" 1;
+  content: counters(item, ".") ". ";
+  counter-increment: item;
+  counter-increment: item;
+}
+
+.markdown-body ul {
+  list-style: disc;
+}
+
+.markdown-body ol {
+  list-style: numeric;
+}
+
+.markdown-body .md-anchor {
+  color: inherit;
+  text-decoration: none !important;
+}
+.markdown-body .md-anchor span {
+  color: var(--color-accent-fg);
+  display: inline-block;
+  margin-left: 0.25rem;
+  opacity: 0;
+  visibility: hidden;
+}
+.markdown-body .md-anchor:hover span {
+  opacity: 1;
+  visibility: visible;
+}
+
+.markdown-body .highlight {
+  border-radius: 0.5rem;
+}
+
+.toggle:checked + .toggled {
+  display: block;
+}
+
+.fenced-code {
+  margin-bottom: 1rem;
+}
+.fenced-code pre {
+  margin-bottom: 0;
+}
+.fenced-code-header {
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
+  padding: 0.5rem;
+  background: hsla(var(--background-tertiary));
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.fenced-code-header + pre {
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 0 !important;
+}
+.fenced-code-title {
+  font-family:
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Monaco,
+    Consolas,
+    "Liberation Mono",
+    "Courier New",
+    monospace;
+  font-size: 0.8125rem;
+  line-height: 1;
+}
diff --git a/frontend/static/styles.css b/frontend/static/styles.css
index 279703b8..0aba3453 100644
--- a/frontend/static/styles.css
+++ b/frontend/static/styles.css
@@ -2,6 +2,45 @@
 @tailwind components;
 @tailwind utilities;
 
+/* Light and dark theme variables */
+:root {
+  --background-primary: 215deg, 100%, 100%;
+  --background-secondary: 210deg, 29%, 97%;
+  --background-tertiary: 207deg, 33%, 95%;
+  --foreground-primary: 213deg, 9%, 25%;
+  --foreground-secondary: 0deg, 0%, 23%;
+  --foreground-tertiary: 0deg, 0%, 27%;
+  --foreground-quaternary: 0deg, 0%, 30%;
+
+  --info: 194deg, 76%, 41%;
+}
+html[data-theme="dark"]:root {
+  --background-primary: 216deg, 27.8%, 7.1%;
+  --background-secondary: 216deg, 27.7%, 12%;
+  --background-tertiary: 216deg, 27.7%, 22%;
+  --foreground-primary: 215deg, 17%, 99%;
+  --foreground-secondary: 215deg, 17%, 71%;
+  --foreground-tertiary: 215deg, 17%, 67%;
+  --foreground-quaternary: 215deg, 17%, 66%;
+
+  --info: 194deg, 76%, 41%;
+}
+
+/* Selected text effects: */
+::selection {
+  background: theme("colors.jsr-yellow.300");
+  color: theme("colors.black");
+  text-shadow: none !important;
+  filter: none !important;
+  -webkit-filter: none !important;
+  shadow: none !important;
+  outline: none !important;
+}
+input::selection {
+  background: theme("colors.jsr-cyan.500");
+  color: theme("colors.white");
+}
+
 @font-face {
   font-family: "DM Sans";
   font-style: normal;
@@ -51,6 +90,10 @@
     scroll-behavior: smooth;
     scrollbar-color: theme("colors.jsr-cyan.200") theme("colors.jsr-cyan.50");
   }
+  html[data-theme="dark"] {
+    scrollbar-color: theme("colors.jsr-cyan.950")
+      theme("colors.background-secondary");
+  }
 
   @media (prefers-reduced-motion: reduce) {
     :root {
@@ -110,12 +153,12 @@
   }
 
   .button-primary {
-    @apply button border-1.5 border-jsr-cyan-900 hover:border-jsr-cyan-600
+    @apply button border-1.5 border-jsr-cyan-500/90 hover:border-jsr-cyan-600
       bg-jsr-yellow text-jsr-cyan-950 font-bold hover:bg-jsr-yellow-300
       transition-all duration-75 ease-in-out focus:bg-jsr-yellow-300
-      outline-jsr-cyan-700 outline-offset-2 disabled:bg-jsr-gray-100
-      disabled:text-jsr-gray-300 shadow-accent-sm disabled:shadow-transparent
-      disabled:border-jsr-gray-300;
+      outline-jsr-cyan-700 outline-offset-2 disabled:bg-background-tertiary
+      disabled:text-foreground-tertiary/50 shadow-accent-sm
+      disabled:shadow-transparent disabled:border-jsr-gray-500/20;
   }
 
   .button-primary:not(:disabled) {
@@ -124,10 +167,10 @@
   }
 
   .button-danger {
-    @apply button border-1.5 border-red-950 bg-red-500 text-white
-      hover:bg-red-700 disabled:bg-jsr-gray-100 outline-red-600
-      disabled:text-red-300 shadow-accent-sm disabled:shadow-transparent
-      disabled:border-red-300 transition-all duration-75 ease-in-out;
+    @apply button border-1.5 border-red-500/20 bg-red-500 text-white
+      hover:bg-red-700 disabled:bg-jsr-gray-500/10 outline-red-600
+      disabled:text-red-500/30 shadow-accent-sm disabled:shadow-transparent
+      disabled:border-red-500/30 transition-all duration-75 ease-in-out;
   }
 
   .button-danger:not(:disabled) {
@@ -137,7 +180,7 @@
 
   .chip {
     @apply inline-block py-1 px-2.5 rounded-full whitespace-nowrap leading-none
-      font-semibold text-sm;
+      font-semibold text-sm text-foreground-primary;
   }
 
   .big-chip {
@@ -145,6 +188,10 @@
       leading-none font-semibold text-base;
   }
 
+  .tabular-nums {
+    @apply text-foreground-secondary;
+  }
+
   .section-x-inset-xl {
     @apply max-w-screen-xl mx-auto px-4 md:px-8 lg:px-10 xl:px-14;
   }
@@ -160,9 +207,10 @@
   }
 
   .link {
-    @apply text-jsr-cyan-700 hover:text-jsr-cyan-900 underline
-      decoration-jsr-cyan-700/50 underline-offset-2 outline-none
-      focus-visible:ring-2 ring-jsr-cyan-700 ring-offset-2 rounded-sm;
+    @apply text-jsr-cyan-700 hover:text-jsr-cyan-900 dark:text-jsr-cyan-600
+      dark:hover:text-jsr-cyan-500 underline decoration-jsr-cyan-700/50
+      underline-offset-2 outline-none focus-visible:ring-2 ring-jsr-cyan-700
+      ring-offset-2 rounded-sm;
   }
 
   .link-header {
@@ -171,28 +219,29 @@
   }
 
   .input-container {
-    @apply bg-white rounded-md leading-snug border-1 border-jsr-cyan-900/30
-      focus-within:border-jsr-cyan-500;
+    @apply bg-background-primary text-foreground-primary rounded-md leading-snug
+      border-1 border-jsr-cyan-900/30 focus-within:border-jsr-cyan-500;
   }
 
   select:not([data-locked="true"]):disabled.input-container,
   input:not([data-locked="true"]):disabled.input-container,
   .input-container input:not([data-locked="true"]):disabled,
   .input-container select:not([data-locked="true"]):disabled {
-    @apply border-jsr-gray-300 text-jsr-gray-300 cursor-not-allowed
-      bg-jsr-gray-50;
+    @apply border-foreground-secondary/20 text-foreground-secondary/20
+      cursor-not-allowed bg-background-secondary;
   }
 
   select[data-locked="true"].input-container,
   input[data-locked="true"].input-container,
   .input-container input[data-locked="true"],
   .input-container select[data-locked="true"] {
-    @apply text-jsr-gray-500 cursor-not-allowed bg-jsr-gray-50;
+    @apply text-foreground-secondary cursor-not-allowed bg-background-secondary;
   }
 
   .input {
-    @apply placeholder:text-jsr-gray-400 disabled:placeholder:text-jsr-gray-300
-      outline-none bg-transparent disabled:cursor-not-allowed;
+    @apply placeholder:text-jsr-gray-400
+      disabled:placeholder:text-foreground-primary/30 outline-none
+      bg-transparent disabled:cursor-not-allowed;
   }
 
   .search-input {
@@ -204,11 +253,22 @@
   }
 
   .select {
-    @apply appearance-none outline-none opacity-100;
-    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 14 14"><path fill="currentColor" fill-rule="evenodd" d="M.47 3.97a.75.75 0 0 1 1.06 0L6 8.44l4.47-4.47a.75.75 0 0 1 1.06 1.06l-5 5a.75.75 0 0 1-1.06 0l-5-5a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"/></svg>')
+    @apply appearance-none outline-none opacity-100 bg-background-primary;
+    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 14 14"><path fill="black" fill-rule="evenodd" d="M.47 3.97a.75.75 0 0 1 1.06 0L6 8.44l4.47-4.47a.75.75 0 0 1 1.06 1.06l-5 5a.75.75 0 0 1-1.06 0l-5-5a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"/></svg>')
       no-repeat;
     background-position: center right 0.5rem;
   }
+  html[data-theme="dark"] .select {
+    @apply appearance-none outline-none opacity-100 bg-background-primary
+      !important;
+    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 14 14"><path fill="white" fill-rule="evenodd" d="M.47 3.97a.75.75 0 0 1 1.06 0L6 8.44l4.47-4.47a.75.75 0 0 1 1.06 1.06l-5 5a.75.75 0 0 1-1.06 0l-5-5a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"/></svg>')
+      no-repeat !important;
+    background-position: center right 0.5rem !important;
+  }
+  html[data-theme="dark"] select option {
+    @apply appearance-none outline-none opacity-100 bg-background-primary
+      !important;
+  }
 }
 
 /* !important seems necessary for taking precedent over current ddoc styling */
@@ -242,7 +302,7 @@ body .ddoc {
     }
 
     :not(pre) > code {
-      @apply bg-jsr-cyan-100/50;
+      @apply bg-background-tertiary;
     }
 
     a:not(.no_color) {
@@ -251,6 +311,8 @@ body .ddoc {
 
     .highlight {
       @apply relative;
+      @apply bg-background-secondary text-foreground-secondary;
+      @apply border-foreground-secondary/20;
 
       .lineNumbers {
         @apply border-r-2 border-jsr-gray-100 text-jsr-gray-300 pr-3 text-right
@@ -270,7 +332,7 @@ body .ddoc {
 
       .context_button {
         @apply absolute top-3 right-4 opacity-60 hover:opacity-100 border-none
-          hover:bg-jsr-cyan-50;
+          hover:bg-jsr-cyan-500/10;
       }
 
       /*!
@@ -286,7 +348,7 @@ body .ddoc {
       .pl-c1
       /* constant, entity.name.constant, variable.other.constant, variable.language, support, meta.property-name, support.constant, support.variable, meta.module-reference, markup.raw, meta.diff.header, meta.output */,
       .pl-s .pl-v /* string variable */ {
-        color: #005cc5;
+        @apply text-jsr-cyan-950 dark:text-jsr-cyan-500;
       }
 
       .pl-e /* entity */,
@@ -297,7 +359,7 @@ body .ddoc {
       .pl-smi
       /* variable.parameter.function, storage.modifier.package, storage.modifier.import, storage.type.java, variable.other */,
       .pl-s .pl-s1 /* string source */ {
-        color: #24292e;
+        @apply text-jsr-cyan-500;
       }
 
       .pl-ent /* entity.name.tag, markup.quote */ {
@@ -316,7 +378,7 @@ body .ddoc {
       .pl-sr .pl-cce /* string.regexp constant.character.escape */,
       .pl-sr .pl-sre /* string.regexp source.ruby.embedded */,
       .pl-sr .pl-sra /* string.regexp string.regexp.arbitrary-repitition */ {
-        color: #032f62;
+        @apply text-jsr-cyan-950 dark:text-jsr-cyan-500;
       }
 
       .pl-v /* variable */,
@@ -403,12 +465,13 @@ body .ddoc {
   }
 
   .markdown_summary {
+    @apply text-foreground-secondary;
     a:not(.no_color) {
       @apply link;
     }
 
     :not(pre) > code {
-      @apply bg-jsr-cyan-100/50 !important;
+      @apply bg-background-tertiary text-foreground-primary !important;
     }
 
     p {
@@ -417,7 +480,7 @@ body .ddoc {
   }
 
   .symbolGroup article a.context_button {
-    @apply border-none hover:bg-jsr-cyan-50;
+    @apply border-none hover:bg-jsr-cyan-500/10;
   }
 
   .docEntryHeader a {
@@ -430,19 +493,43 @@ body .ddoc {
     color: theme("colors.jsr-cyan.700");
   }
 
+  #usageSelector {
+    div > div {
+      @apply bg-background-secondary;
+    }
+    label {
+      @apply border-jsr-cyan-500/20 hover:bg-background-tertiary !important;
+    }
+  }
+
   .usages {
-    nav details {
-      > summary {
-        @apply border-jsr-cyan-300/50 bg-jsr-cyan-50;
+    nav {
+      label {
+        @apply border-jsr-cyan-500/20 !bg-background-secondary;
       }
+      details {
+        > summary {
+          @apply !border-foreground-secondary/50 bg-background-secondary;
+        }
 
-      > div > div {
-        @apply border-jsr-cyan-200;
+        > div > div {
+          @apply !border-foreground-secondary/10 bg-background-secondary;
+        }
       }
     }
 
     pre.highlight {
-      @apply border-jsr-cyan-300/50;
+      @apply !border-jsr-cyan-500/50 !bg-background-secondary;
+      code {
+        @apply !text-foreground-primary;
+      }
+      .context_button {
+        @apply bg-jsr-cyan-500/20 hover:bg-jsr-cyan-500/40
+          text-foreground-primary fill-foreground-primary;
+        .check {
+          @apply !stroke-green-600;
+        }
+      }
     }
   }
 
@@ -530,6 +617,11 @@ body .ddoc:has(.toc) {
 }
 
 /* These might seem redundant but Tailwind won't always load them in the compiled stylesheet unless they're explicitly included here. */
+.score-ring-red > div,
+.score-ring-yellow > div,
+.score-ring-green > div {
+  @apply text-black bg-white;
+}
 .score-ring-red {
   @apply bg-red-500;
 }
@@ -554,17 +646,30 @@ body .ddoc:has(.toc) {
   @apply text-green-600;
 }
 
+/* This is less than desirable. Need to find and clean up whatever is putting the #usageSelector on the page */
+#Deno:checked ~ nav label[for="Deno"],
+#npm:checked ~ nav label[for="npm"],
+#Yarn:checked ~ nav label[for="Yarn"],
+#pnpm:checked ~ nav label[for="pnpm"],
+#Bun:checked ~ nav label[for="Bun"] {
+  @apply !bg-jsr-cyan-500/10 hover:!bg-jsr-cyan-500/10;
+}
+
+.ddoc .toc .documentNavigation > ul ul li a:hover {
+  @apply !text-jsr-cyan-500/90;
+}
+
 @layer base {
   /* I hate having all these !important tags, but it's the only way to override some of the GFM styles */
   :root {
-    --color-accent-fg: theme("colors.slate.100") !important;
-    --color-border-default: theme("colors.slate.300") !important;
-    --bgColor-neutral-muted: theme("colors.jsr-gray.100") !important;
-    --color-neutral-muted: theme("colors.jsr-gray.600") !important;
-    --color-accent-fg: theme("colors.cyan.700") !important;
-    --fgColor-muted: theme("colors.jsr-gray.600") !important;
-    --color-fg-default: theme("colors.jsr-gray.700") !important;
     --base-text-weight-semibold: 500;
-    --bgColor-muted: theme("colors.slate.50");
+    --color-accent-fg: theme("colors.jsr-cyan.500") !important;
+    --color-border-default: theme("colors.foreground-secondary/15%") !important;
+    --bgColor-neutral-muted: theme("colors.background-secondary") !important;
+    --color-neutral-muted: theme("colors.foreground-primary") !important;
+    --color-accent-fg: theme("colors.jsr-cyan.700") !important;
+    --fgColor-muted: theme("colors.foreground-primary") !important;
+    --color-fg-default: theme("colors.foreground-primary") !important;
+    --bgColor-muted: theme("colors.background-secondary/25%") !important;
   }
 }
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index 9277dcfd..4b328459 100755
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -50,6 +50,12 @@ export default {
       colors: {
         transparent: "transparent",
         gray: colors.neutral,
+        "background-primary": "hsla(var(--background-primary))",
+        "background-secondary": "hsla(var(--background-secondary))",
+        "background-tertiary": "hsla(var(--background-tertiary))",
+        "foreground-primary": "hsla(var(--foreground-primary))",
+        "foreground-secondary": "hsla(var(--foreground-secondary))",
+        "foreground-tertiary": "hsla(var(--foreground-tertiary))",
         "jsr-yellow": {
           DEFAULT: "#f7df1e",
           "50": "#fefee8",