Add dark/light mode

_components/Footer.tsx

@@ -108,7 +108,7 @@ const data = [
 
 export default function Footer() {
   return (
-    <footer class="w-full border-t border-gray-200 pt-12">
+    <footer class="w-full border-t border-foreground-secondary/20 pt-12">
       <div class="max-w-screen-xl mx-auto pb-16 px-4 sm:px-8 md:px-16">
         <div class="grid md:grid-cols-2 lg:grid-cols-4 md:-mx-8">
           {data.map((category) => (
@@ -118,7 +118,7 @@ export default function Footer() {
                 {category.items.map((item) => (
                   <li>
                     <a
-                      class="block items-center py-1 text-gray-600 hover:text-primary hover:underline"
+                      class="block items-center py-1 text-foreground-secondary hover:text-primary hover:underline"
                       href={item.to ?? item.href}
                     >
                       {item.label}

_components/Header.tsx

@@ -8,14 +8,14 @@ export default function Header({
   const reference = url.startsWith("/api");
   return (
     <header
-      class={`bg-white shadow z-30 ${
+      class={`bg-background-primary text-foreground-primary shadow z-30 ${
         reference ? "" : "sticky top-0 left-0 right-0"
       }`}
     >
       <nav class="p-4 py-3 md:px-6 min-h-16 flex items-center justify-between">
         <div class="flex items-center">
           {hasSidebar && (
-            <button class="mr-2 lg:hidden" id="sidebar-open">
+            <button class="mr-2 xl:hidden" id="sidebar-open">
               <svg
                 width="24"
                 height="24"
@@ -34,7 +34,7 @@ export default function Header({
             </button>
           )}
           <a class="flex gap-2.5 mr-5" href="/">
-            <div class="block w-24 h-auto">
+            <div class="block w-24 h-auto dark:invert">
               <img src="/img/deno-docs.svg" alt="Deno Docs" />
             </div>
             {/* custom font size for logo */}
@@ -60,7 +60,7 @@ export default function Header({
             name="API reference"
             hideOnMobile
           />
-          <span class="hidden lg:inline-block mx-2">//</span>
+          <span class="hidden xl:inline-block mx-2">//</span>
           <HeaderItem
             url={url}
             activeOn="/deploy"
@@ -86,15 +86,44 @@ export default function Header({
             hideOnMobile
           />
           <div class="min-w-[150px] md:w-32 xl:w-64">
-            <orama-search-button />
+            <orama-search-button class="dark:invert" />
             <orama-searchbox />
           </div>
+          <div class="dark-mode-toggle">
+            <button class="dark-mode-toggle button p-1 rounded bg-background-primary border border-foreground-secondary/20">
+              <span class="dark:hidden">
+                <svg
+                  class="fill-foreground-primary w-6 h-6"
+                  viewBox="0 0 20 20"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z">
+                  </path>
+                </svg>
+              </span>
+              <span class="hidden dark:block">
+                <svg
+                  class="fill-foreground-primary w-6 h-6"
+                  viewBox="0 0 20 20"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1
+                  0 100-2H3a1 1 0 000 2h1z"
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                  >
+                  </path>
+                </svg>
+              </span>
+            </button>
+          </div>
         </div>
       </nav>
 
       {reference &&
         (
-          <nav className="px-4 md:px-6 pt-2 pb-3 text-sm bg-white flex items-center justify-between border-box border-t border-gray-200 z-[1000]">
+          <nav className="px-4 md:px-6 pt-2 pb-3 text-sm bg-background-primary flex items-center justify-between border-box border-t border-background-secondary z-[1000]">
             <ul className="flex">
               <li>
                 <HeaderItem
@@ -149,11 +178,11 @@ function HeaderItem({
     <a
       class={`${
         firstItem ? "ml-0" : ""
-      } mx-1 px-2 text-md hover:text-primary hover:bg-blue-50 hover:rounded text-nowrap flex items-center ${
+      } mx-1 px-2 text-md hover:text-primary hover:bg-background-secondary/50 hover:rounded text-nowrap flex items-center ${
         activeOn && url.startsWith(activeOn)
           ? "text-primary mx-2.5 px-0.5 underline font-semibold underline-offset-[6px] decoration-primary/20"
           : ""
-      } ${hideOnMobile ? "max-lg:!hidden" : ""}`}
+      } ${hideOnMobile ? "max-xl:!hidden" : ""}`}
       href={href}
     >
       {name}

_components/Sidebar.tsx

@@ -57,7 +57,7 @@ function SidebarSection(
             <a href={headingLink}>
               <h2
                 id={categoryTitle}
-                class="border-b border-gray-200 pt-2 pb-1.5 -mx-5 px-8 mt-4 mb-2 text-sm font-semibold hover:bg-blue-50 current:bg-blue-50 current:text-blue-500 text-gray-3 capitalize"
+                class="border-b border-background-secondary pt-2 pb-1.5 -mx-5 px-8 mt-4 mb-2 text-sm font-semibold hover:bg-background-secondary current:bg-background-secondary current:text-blue-500 text-foreground-primary capitalize"
                 aria-current={props.url === headingLink ? "page" : undefined}
               >
                 {props.section.title}
@@ -67,7 +67,7 @@ function SidebarSection(
           : (
             <h2
               id={categoryTitle}
-              class="border-b border-gray-200 pt-2 pb-0.5 -mx-5 px-8 mt-4 mb-3 text-sm font-semibold text-gray-3 capitalize"
+              class="border-b border-background-secondary pt-2 pb-0.5 -mx-5 px-8 mt-4 mb-3 text-sm font-semibold text-foreground-primary capitalize"
             >
               {props.section.title}
             </h2>
@@ -99,7 +99,7 @@ function SidebarSection(
 }
 
 const LINK_CLASS =
-  "block px-3 py-1.5 text-[.8125rem] leading-4 font-normal text-gray-500 rounded-md hover:bg-blue-50 current:bg-blue-50 current:text-blue-500 transition-colors duration-200 ease-in-out select-none";
+  "block px-3 py-1.5 text-[.8125rem] leading-4 font-normal text-foreground-secondary rounded-md hover:bg-background-secondary current:bg-background-secondary current:text-blue-500 transition-colors duration-200 ease-in-out select-none";
 
 function SidebarItem(props: {
   item: string | SidebarDoc_ | SidebarLink_;

_includes/doc.tsx

@@ -70,19 +70,19 @@ export default function Page(props: Lume.Data, helpers: Lume.Helpers) {
   return (
     <>
       <aside
-        class="flex flex-col absolute top-0 lg:top-16 bottom-0 -left-74 lg:left-0 sidebar-open:left-0 w-74 border-r border-gray-200 bg-white z-50 lg:z-0 transition-all"
+        class="flex flex-col absolute top-0 xl:top-16 bottom-0 -left-74 xl:left-0 sidebar-open:left-0 w-74 border-r border-background-secondary bg-background-primary z-50 xl:z-0 transition-all"
         id="sidebar"
         data-open="false"
       >
-        <div class="lg:hidden p-4 shadow-sm flex justify-between h-16">
+        <div class="xl:hidden p-4 shadow-sm flex justify-between h-16">
           <a class="flex items-center gap-3 mr-6" href="/">
             <img
               class="block size-6"
               src="/img/logo.svg"
               alt=""
               aria-hidden="true"
             />
-            <b class="text-xl">
+            <b class="text-xl text-foreground-primary">
               <span class="sr-only">Deno</span> Docs
             </b>
           </a>
@@ -95,7 +95,7 @@ export default function Page(props: Lume.Data, helpers: Lume.Helpers) {
               viewBox="0 0 15 15"
               width="16"
               height="16"
-              class="text-gray-600"
+              class="text-foreground-secondary"
             >
               <g stroke="currentColor" stroke-width="1.2">
                 <path d="M.75.75l13.5 13.5M14.25.75L.75 14.25"></path>
@@ -111,18 +111,18 @@ export default function Page(props: Lume.Data, helpers: Lume.Helpers) {
         />
       </aside>
       <div
-        class="absolute inset-0 backdrop-brightness-50 z-40 hidden sidebar-open:block sidebar-open:lg:hidden"
+        class="absolute inset-0 backdrop-brightness-50 z-40 hidden sidebar-open:block sidebar-open:xl:hidden"
         id="sidebar-cover"
         data-open="false"
       >
       </div>
       <div
-        class="absolute top-16 bottom-0 left-0 right-0 lg:left-74 overflow-y-auto lg:grid lg:grid-cols-7 lg:gap-8 max-w-screen-2xl mx-auto"
+        class="absolute top-16 bottom-0 left-0 right-0 xl:left-74 overflow-y-auto xl:grid xl:grid-cols-7 xl:gap-8 max-w-screen-2xl mx-auto"
         style={{ scrollbarGutter: "stable" }}
       >
         <main
           id="content"
-          class="mx-auto max-w-screen-xl w-full pt-2 pb-8 flex flex-grow lg:col-span-5"
+          class="mx-auto max-w-screen-xl w-full pt-2 pb-8 flex flex-grow xl:col-span-5"
         >
           <div class="flex-grow px-4 sm:px-5 md:px-6 max-w-full">
             <article class="max-w-[66ch] mx-auto">
@@ -134,7 +134,7 @@ export default function Page(props: Lume.Data, helpers: Lume.Helpers) {
                 sectionHref={props.sectionHref!}
               />
               {props.toc && props.toc.length > 0 && (
-                <details class="block lg:hidden my-4 bg-gray-100 rounded-md group">
+                <details class="block xl:hidden my-4 bg-background-secondary rounded-md group">
                   <summary class="px-4 py-2 group-open:border-b border-gray-300">
                     On this page
                   </summary>
@@ -145,7 +145,12 @@ export default function Page(props: Lume.Data, helpers: Lume.Helpers) {
                   </ul>
                 </details>
               )}
-              <div class="markdown-body mt-4">
+              <div
+                data-color-mode="light"
+                data-light-theme="light"
+                data-dark-theme="dark"
+                class="markdown-body mt-4 rounded-lg dark:invert"
+              >
                 <h1
                   dangerouslySetInnerHTML={{
                     __html: helpers.md(props.title!, true),
@@ -185,19 +190,19 @@ export default function Page(props: Lume.Data, helpers: Lume.Helpers) {
             )}
           </div>
         </main>
-        <aside class="hidden lg:block pb-8 pr-8 col-span-2">
+        <aside class="hidden xl:block pb-8 pr-8 col-span-2">
           <div
             class="py-2 sticky overflow-y-auto top-4 h-[calc(100vh-7rem)]"
             id="toc"
           >
-            <ul class="border-l border-gray-200 py-2 pl-2 relative">
+            <ul class="border-l border-background-secondary py-2 pl-2 relative">
               {(props.toc as TableOfContentsItem_[]).map((item) => (
                 <TableOfContentsItem item={item} />
               ))}
             </ul>
           </div>
         </aside>
-        <div class="lg:col-span-full">
+        <div class="xl:col-span-full">
           <props.comp.Footer />
         </div>
       </div>
@@ -238,10 +243,10 @@ function NavigationButton(props: {
 
   return (
     <a
-      className={`flex flex-col py-3 px-6 ${alignmentClass} border border-gray-000 hover:border-blue-700 hover:bg-blue-50/10 transition-colors duration-300 transition-timing-function cubic-bezier(0.4, 0, 0.2, 1) rounded`}
+      className={`flex flex-col py-3 px-6 ${alignmentClass} border border-foreground-secondary/20 hover:border-blue-700 hover:bg-blue-50/10 transition-colors duration-300 transition-timing-function cubic-bezier(0.4, 0, 0.2, 1) rounded`}
       href={"id" in item ? item.id : "href" in item ? item.href : undefined}
     >
-      <span className="text-sm text-gray-2">{directionText}</span>
+      <span className="text-sm text-foreground-secondary">{directionText}</span>
       <div className="flex flex-row max-w-full items-center text-blue-500 gap-2">
         {props.direction === "prev" && <>&laquo;</>}
         <span className="font-semibold flex-shrink truncate">{item.label}</span>
@@ -316,7 +321,7 @@ function Breadcrumbs(props: {
   return (
     <nav class="mb-4">
       <ul
-        class="flex flex-wrap text-gray-700 items-center -ml-3"
+        class="flex flex-wrap text-foreground-secondary items-center -ml-3"
         itemscope
         itemtype="https://schema.org/BreadcrumbList"
       >
@@ -397,7 +402,7 @@ function TableOfContentsItem(props: { item: TableOfContentsItem_ }) {
     <li class="m-2 leading-4">
       <a
         href={`#${props.item.slug}`}
-        class="text-[13px] text-gray-600 hover:text-indigo-600 transition-colors duration-200 ease-in-out select-none"
+        class="text-[13px] text-foreground-secondary hover:text-indigo-600 transition-colors duration-200 ease-in-out select-none"
       >
         {props.item.text.replaceAll(/ \([0-9/]+?\)/g, "")}
       </a>
@@ -417,7 +422,7 @@ function TableOfContentsItemMobile(props: { item: TableOfContentsItem_ }) {
     <li class="my-1.5 mx-3">
       <a
         href={`#${props.item.slug}`}
-        class="text-sm text-gray-600 hover:text-indigo-600 transition-colors duration-200 ease-in-out select-none"
+        class="text-sm text-foreground-secondary hover:text-indigo-600 transition-colors duration-200 ease-in-out select-none"
       >
         {props.item.text.replaceAll(/ \([0-9/]+?\)/g, "")}
       </a>
@@ -534,7 +539,7 @@ function renderCommand(
   const rendered = (
     <div>
       <div class="p-4 bg-stone-100 rounded border border-gray-300 mt-6 mb-6 relative">
-        <h3 class="!text-xs !m-0 -top-2.5 bg-white border border-gray-600/25 px-2 py-0.5 rounded absolute !font-normal">
+        <h3 class="!text-xs !m-0 -top-2.5 bg-background-primary border border-gray-600/25 px-2 py-0.5 rounded absolute !font-normal">
           Command-line Usage
         </h3>
         <div>

_includes/layout.tsx

@@ -2,7 +2,10 @@ export default function Layout(props: Lume.Data) {
   const reference = props.url.startsWith("/api");
 
   return (
-    <html lang="en" class={reference ? "" : "h-dvh overflow-hidden"}>
+    <html
+      lang="en"
+      class={`light ${reference ? "" : "h-dvh overflow-hidden"}`}
+    >
       <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -26,6 +29,8 @@ export default function Layout(props: Lume.Data) {
         <link rel="stylesheet" href="/gfm.css" />
         <link rel="stylesheet" href="/styles.css" />
         <link rel="stylesheet" href="/overrides.css" />
+        <script src="/darkmode.client.js"></script>
+        <script type="module" src="/darkmode-toggle.client.js"></script>
         <script src="/orama-searchbox-1.0.0-rc47.js" defer></script>
         <script type="module" src="/sidebar.client.js"></script>
         <script type="module" src="/copy.client.js"></script>
@@ -38,10 +43,14 @@ export default function Layout(props: Lume.Data) {
         </script>
         <link rel="preconnect" href="https://www.googletagmanager.com"></link>
       </head>
-      <body class={reference ? "" : "h-dvh overflow-hidden"}>
+      <body
+        class={`bg-background-primary text-foreground-primary ${
+          reference ? "" : "h-dvh overflow-hidden"
+        }`}
+      >
         <a
           href="#content"
-          class="opacity-0 absolute top-2 left-2 p-2 border -translate-y-12 transition-all focus:translate-y-0 focus:opacity-100 z-50 bg-white font-bold"
+          class="opacity-0 absolute top-2 left-2 p-2 border -translate-y-12 transition-all focus:translate-y-0 focus:opacity-100 z-50 bg-background-primary font-bold"
         >
           Skip to main content <span aria-hidden="true">-&gt;</span>
         </a>

_includes/raw.tsx

@@ -16,7 +16,7 @@ export default function Raw(props: Lume.Data, helpers: Lume.Helpers) {
       {props.sidebar && (
         <>
           <aside
-            class="absolute top-0 bottom-0 -left-74 sidebar-open:left-0 w-74 border-r border-gray-200 bg-white z-50 lg:hidden transition-all"
+            class="absolute top-0 bottom-0 -left-74 sidebar-open:left-0 w-74 border-r border-gray-200 bg-background-primary z-50 xl:hidden transition-all"
             id="sidebar"
             data-open="false"
           >
@@ -41,7 +41,7 @@ export default function Raw(props: Lume.Data, helpers: Lume.Helpers) {
                   viewBox="0 0 15 15"
                   width="21"
                   height="21"
-                  class="text-gray-600"
+                  class="text-foreground-secondary"
                 >
                   <g stroke="currentColor" stroke-width="1.2">
                     <path d="M.75.75l13.5 13.5M14.25.75L.75 14.25"></path>
@@ -56,7 +56,7 @@ export default function Raw(props: Lume.Data, helpers: Lume.Helpers) {
             />
           </aside>
           <div
-            class="absolute inset-0 backdrop-brightness-50 z-40 hidden sidebar-open:block sidebar-open:lg:hidden"
+            class="absolute inset-0 backdrop-brightness-50 z-40 hidden sidebar-open:block sidebar-open:xl:hidden"
             id="sidebar-cover"
             data-open="false"
           >