feat(ui): Add dark/light theme toggling sitewide

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>

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>

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>
   );

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,18 +38,18 @@ 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
             </div>
           </h1>
           <div
             class="flex flex-row gap-3 items-center justify-center mt-4 pointer-events-auto"
-            style="text-shadow: 0 0 2em white, 0 0 1em white, 0 0 0.5em white, 0 0 0.25em white, 0 0 3em white, 0 0 0.5em white;"
+            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

frontend/components/List.tsx

@@ -18,21 +18,21 @@ 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>
         )}
 
       <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>

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>
                 )}

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

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}

frontend/components/NavOverflow.tsx

@@ -63,15 +63,15 @@ 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">
           <TbDots class="size-6" />
         </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

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>

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>
   );
 }

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>

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}

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 />}

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)