diff --git a/www/components/DocsSidebar.tsx b/www/components/DocsSidebar.tsx
index fc5afa7b004..f2fc8472b88 100644
--- a/www/components/DocsSidebar.tsx
+++ b/www/components/DocsSidebar.tsx
@@ -12,7 +12,7 @@ export function SidebarCategory(props: {
     <li class="my-2 block">
       <a
         href={href}
-        class="text-gray-900 hover:text-gray-600 aria-[current]:text-green-700 aria-[current]:hover:underline font-bold"
+        class="text-foreground-secondary hover:text-gray-600 aria-[current]:text-fresh-green aria-[current]:hover:underline font-bold"
       >
         {title}
       </a>
@@ -36,7 +36,7 @@ export function SidebarEntry(props: {
     <li class="py-[1px]">
       <a
         href={href}
-        class="aria-[current]:text-green-700 aria-[current]:border-green-600 aria-[current]:bg-green-50 border-l-4 border-transparent px-4 py-0.5 transition-colors hover:text-green-500 font-normal block"
+        class="aria-[current]:text-fresh-green aria-[current]:border-green-600 aria-[current]:bg-fresh-green/5 border-l-4 border-transparent px-4 py-0.5 transition-colors hover:text-fresh-green/80 font-normal block"
       >
         {title}
       </a>
diff --git a/www/components/Footer.tsx b/www/components/Footer.tsx
index ab3aa323e69..d73c2910ca9 100644
--- a/www/components/Footer.tsx
+++ b/www/components/Footer.tsx
@@ -18,16 +18,19 @@ const LINKS = [
 export default function Footer(props: JSX.HTMLAttributes<HTMLElement>) {
   return (
     <footer
-      class={`border-t-2 border-gray-200 md:h-16 flex mt-16 justify-center md:mx-16 ${props.class}`}
+      class={`border-t-2 border-foreground-secondary/20 md:h-16 flex mt-16 justify-center md:mx-16 ${props.class}`}
     >
       <div class="flex flex-col sm:flex-row gap-4 justify-between items-center max-w-screen-xl mx-auto w-full sm:px-6 md:px-8 p-4">
-        <div class="text-gray-600 text-center">
+        <div class="text-foreground-secondary text-center">
           <span>© {new Date().getFullYear()} the Fresh authors</span>
         </div>
 
         <div class="flex items-center gap-8">
           {LINKS.map((link) => (
-            <a href={link.href} class="text-gray-600 hover:underline">
+            <a
+              href={link.href}
+              class="text-foreground-secondary hover:underline"
+            >
               {link.title}
             </a>
           ))}
diff --git a/www/components/Header.tsx b/www/components/Header.tsx
index 1d0a88a7c66..a3f875dbf2d 100644
--- a/www/components/Header.tsx
+++ b/www/components/Header.tsx
@@ -3,15 +3,17 @@ import NavigationBar from "./NavigationBar.tsx";
 export default function Header(props: { title: string; active: string }) {
   const isHome = props.active == "/";
   const isDocs = props.active == "/docs";
+  const isShowcase = props.active == "/showcase";
 
   return (
     <header
       class={[
         "mx-auto flex gap-3 items-center",
-        isHome ? "justify-end" : "justify-between",
+        isHome ? "justify-end h-20 max-w-screen-xl" : "justify-between",
         isDocs
-          ? "h-20 max-w-screen-2xl w-full sticky top-0 bg-white/75 z-50 backdrop-blur-sm"
-          : "h-20 max-w-screen-xl",
+          ? "h-20 max-w-screen-2xl w-full sticky top-0 bg-background-primary  z-50 backdrop-blur-sm"
+          : "",
+        isShowcase ? "max-w-screen-xl w-full" : "",
       ].join(" ")}
       f-client-nav={false}
     >
@@ -39,12 +41,12 @@ export function Logo() {
         viewBox="0 0 250 75"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
-        class="h-5 ml-2.5 shrink-0 hidden sm:inline-block"
+        class="h-5 ml-2.5 shrink-0 hidden sm:inline-block fill-[#0A140C] dark:fill-[#f5ebf3]"
         aria-label="Fresh logo"
       >
         <path
           d="M14.0805 0.761269V70.0893H0V0.761269H14.0805ZM35.6322 30.2257V41.7803H10.3448V30.2257H35.6322ZM38.5057 0.761269V12.3159H10.3448V0.761269H38.5057ZM46.5517 0.761269H68.9655C73.5632 0.761269 77.5862 1.62785 80.7471 3.36105C83.908 4.80538 86.4943 7.11632 88.2184 10.2939C90.1641 13.8269 91.1548 17.8107 91.092 21.8485C91.092 25.6038 90.5172 28.7813 89.3678 31.3811C88.5057 34.2698 87.069 36.2919 85.0575 38.0251C83.046 39.7583 81.0345 40.9137 78.4483 42.3581L74.1379 44.669H56.0345V33.1143H68.3908C70.0971 33.2247 71.7975 32.8225 73.2759 31.9589C74.4253 31.0923 75.2874 29.9368 76.1494 28.4925C76.8253 26.6458 77.1186 24.6798 77.0115 22.7151C77.0115 20.6931 76.7241 18.9599 76.1494 17.2267C75.5747 15.7823 74.7126 14.338 73.2759 13.7603C72.4138 12.8937 70.6897 12.3159 68.9655 12.3159H60.3448V70.0893H46.5517V0.761269V0.761269ZM78.1609 70.0893L65.5172 39.1805H79.8851L93.1035 69.5115V70.0893H78.1609ZM140.517 58.5346V70.0893H110.345V58.5346H140.517ZM114.655 0.761269V70.0893H100.575V0.761269H114.943H114.655ZM136.494 29.0702V40.0471H110.345V29.0702H136.207H136.494ZM140.517 0.761269V12.3159H110.345V0.761269H140.517ZM178.161 51.8907C178.161 50.7352 178.161 49.5797 177.586 48.7131C177.586 47.5577 177.012 46.6911 176.149 45.8245L173.276 42.9358L167.816 40.6249L160.345 37.1585L154.023 32.8255C152.021 31.2537 150.359 29.2878 149.138 27.0481C148.066 24.5949 147.574 21.9252 147.701 19.2487C147.701 16.3601 147.989 13.4714 149.138 11.4493C150.166 9.00506 151.739 6.83084 153.736 5.09427C155.747 3.64994 158.046 2.20559 160.632 1.33899C167.362 -0.855543 174.677 -0.337717 181.034 2.78333C184.483 4.51653 186.782 7.11632 188.793 10.2939C190.517 13.1825 191.667 17.2267 191.667 21.2708H177.299C177.424 19.5169 177.229 17.7548 176.724 16.0712C176.149 14.6269 175.287 13.1825 173.851 12.6048C172.701 11.7382 170.977 11.1605 169.253 11.1605C167.529 11.1605 166.092 11.7382 164.943 12.3159C163.793 12.8937 162.931 14.0491 162.069 15.2046L161.494 19.2487C161.494 20.4042 161.782 21.5597 162.356 22.4263L164.655 24.7372C167.235 26.2818 169.924 27.6335 172.701 28.7813L181.034 32.8255C183.199 34.2594 185.136 36.0121 186.782 38.0251C188.793 39.7583 189.655 41.7803 190.805 43.8024C192.605 48.9619 192.503 54.5998 190.517 59.6901C189.368 62.001 187.931 64.0231 186.207 65.7563C184.115 67.5878 181.669 68.9647 179.023 69.8004C173.276 71.2447 176.149 75 170.402 75C164.655 75 166.667 70.667 161.207 69.8004C158.333 68.9338 155.46 67.4895 153.448 65.7563C151.19 63.7856 149.419 61.313 148.276 58.5346C147.126 55.6459 146.552 52.1795 146.552 48.4243H160.632C160.632 50.4463 160.632 52.1795 161.207 53.6239C161.494 55.0682 162.069 56.5125 162.931 57.3791C163.793 57.9569 164.943 58.8235 166.092 59.1123C167.529 59.6901 168.966 59.6901 170.402 59.6901C172.414 59.6901 173.851 59.6901 175 58.8235C176.149 57.9569 176.724 57.0903 177.299 55.9348C177.874 54.7793 178.161 53.335 178.161 51.8907V51.8907ZM239.943 28.7813V40.336H211.207V28.7813H239.943ZM215.23 0.761269V70.0893H201.437V0.761269H215.23ZM250 0.761269V70.0893H236.207V0.761269H250Z"
-          fill="#0A140C"
+          fill="currentColor"
         />
       </svg>
     </a>
diff --git a/www/components/NavigationBar.tsx b/www/components/NavigationBar.tsx
index cce23719d9d..2e774b89bef 100644
--- a/www/components/NavigationBar.tsx
+++ b/www/components/NavigationBar.tsx
@@ -1,3 +1,4 @@
+import ThemeToggle from "../islands/ThemeToggle.tsx";
 import * as Icons from "./Icons.tsx";
 
 export default function NavigationBar(
@@ -18,6 +19,7 @@ export default function NavigationBar(
     },
   ];
   const isHome = props.active == "/";
+  const isDocs = props.active == "/docs";
   return (
     <nav class={"flex " + (props.class ?? "")} f-client-nav={false}>
       <ul class="flex items-center gap-x-2 sm:gap-4 mx-4 my-2 sm:my-6 flex-wrap lg:mx-8 2xl:mr-0">
@@ -26,7 +28,11 @@ export default function NavigationBar(
             <a
               href={item.href}
               class={`p-1 sm:p-2 ${
-                isHome ? "text-green-900" : "text-gray-600"
+                isHome
+                  ? "text-green-900"
+                  : isDocs
+                  ? "text-foreground-secondary"
+                  : "text-gray-600"
               } hover:underline aria-[current]:font-bold`}
             >
               {item.name}
@@ -52,6 +58,11 @@ export default function NavigationBar(
             <Icons.Discord />
           </a>
         </li>
+        {isDocs && (
+          <li class="flex items-center">
+            <ThemeToggle />
+          </li>
+        )}
       </ul>
     </nav>
   );
diff --git a/www/islands/CopyArea.tsx b/www/islands/CopyArea.tsx
index fcf46cc35b4..c9f57860704 100644
--- a/www/islands/CopyArea.tsx
+++ b/www/islands/CopyArea.tsx
@@ -48,8 +48,8 @@ export default function CopyArea(props: { code: string }) {
         <button
           aria-label="Copy to Clipboard"
           disabled={!IS_BROWSER}
-          class={`rounded p-1.5 border border-gray-300 hover:bg-gray-700 ${
-            copied.value ? "text-green-500" : ""
+          class={`rounded p-1.5 border border-foreground-secondary/30 hover:bg-foreground-secondary/70 ${
+            copied.value ? "text-fresh-green/80" : ""
           } relative`}
           onClick={handleClick}
         >
diff --git a/www/islands/TableOfContents.tsx b/www/islands/TableOfContents.tsx
index 4767eba629f..2548576cbb4 100644
--- a/www/islands/TableOfContents.tsx
+++ b/www/islands/TableOfContents.tsx
@@ -105,7 +105,7 @@ export function TableOfContents({ headings }: TableOfContentsProps) {
             <button
               id="toc-outline-btn"
               onClick={() => setIsOpen((v) => !v)}
-              class="bg-gray-100 py-2 px-4 rounded border border-gray-300 flex items-center hover:border-green-600 transition-colors text-sm"
+              class="bg-background-primary py-2 px-4 rounded border border-foreground-secondary/30 flex items-center hover:border-fresh-green/80 transition-colors text-sm"
             >
               On this page
               <svg
@@ -117,7 +117,7 @@ export function TableOfContents({ headings }: TableOfContentsProps) {
               </svg>
             </button>
             {isOpen && (
-              <div class="mt-2 pl-4 border-l border-gray-250 text-[13px] leading-7">
+              <div class="mt-2 pl-4 border-l border-foreground-primary/20 text-[13px] leading-7">
                 <nav aria-labelledby="toc-outline-btn">
                   <ul>
                     {headings.map((heading) => {
@@ -142,7 +142,7 @@ export function TableOfContents({ headings }: TableOfContentsProps) {
                 ref={refMarker}
                 class="marker w-[2px] bg-green-400 h-5 absolute top-0 opacity-0 transition-all"
               />
-              <div class="pl-4 border-l border-gray-250 text-[13px] leading-7">
+              <div class="pl-4 border-l border-foreground-secondary/20 text-[13px] leading-7">
                 <div role="heading" aria-level={2} class="font-semibold">
                   On this page
                 </div>
diff --git a/www/islands/ThemeToggle.tsx b/www/islands/ThemeToggle.tsx
new file mode 100644
index 00000000000..fb5c10f7e92
--- /dev/null
+++ b/www/islands/ThemeToggle.tsx
@@ -0,0 +1,62 @@
+import { useEffect, useState } from "preact/hooks";
+import { IS_BROWSER } from "fresh/runtime";
+
+export default function ThemeToggle() {
+  const getPreferredTheme = () => {
+    if (!IS_BROWSER) return "light";
+    const storedTheme = localStorage.getItem("theme");
+    if (storedTheme) return storedTheme;
+    return window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "dark"
+      : "light";
+  };
+
+  const [theme, setTheme] = useState(getPreferredTheme);
+
+  useEffect(() => {
+    document.documentElement.classList.remove("light", "dark");
+    document.documentElement.classList.add(theme);
+    document.documentElement.setAttribute("data-theme", theme);
+    localStorage.setItem("theme", theme);
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme((prev) => (prev === "light" ? "dark" : "light"));
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={toggleTheme}
+      class="dark-mode-toggle button p-1 -m-1"
+      aria-label="Toggle Theme"
+    >
+      {theme === "light"
+        ? (
+          <svg
+            class="fill-foreground-primary hover:fill-fresh 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>
+        )
+        : (
+          <svg
+            class="fill-foreground-primary hover:fill-fresh 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>
+        )}
+    </button>
+  );
+}
diff --git a/www/islands/VersionSelect.tsx b/www/islands/VersionSelect.tsx
index 215bcd5ac4c..ccf4df36991 100644
--- a/www/islands/VersionSelect.tsx
+++ b/www/islands/VersionSelect.tsx
@@ -20,7 +20,7 @@ export default function VersionSelect(
         </label>
         {selectedIsLatest && (
           <div class="flex absolute pointer-events-none select-none w-full h-full items-center justify-end pr-8">
-            <div class="rounded-full px-2 py-1 text-xs tag-label bg-[#056CF025] text-blue-700">
+            <div class="rounded-full px-2 py-1 text-xs tag-label bg-[#056CF025] dark:bg-[#2182ff45] text-blue-700 dark:text-blue-400">
               Latest
             </div>
           </div>
@@ -34,9 +34,9 @@ export default function VersionSelect(
         )}
         <select
           id="version"
-          class={`rounded-md block border border-gray-300 appearance-none bg-white form-select-bg font-semibold ${
+          class={`rounded-md block border border-foreground-primary/20 appearance-none bg-background-primary form-select-bg font-semibold ${
             selectedIsLatest ? "pr-22" : "pr-10"
-          } py-2 pl-3 w-full h-full leading-none sm:(text-sm leading-5) focus:(outline-none border-blue-300) hover:bg-gray-100`}
+          } py-2 pl-3 w-full h-full leading-none sm:(text-sm leading-5) focus:(outline-none border-blue-300) hover:bg-background-secondary`}
           value={selectedVersion}
           onChange={(e) => {
             if (e.currentTarget.value !== selectedVersion) {
diff --git a/www/routes/_app.tsx b/www/routes/_app.tsx
index 5ad9c3e2908..c3a428c602c 100644
--- a/www/routes/_app.tsx
+++ b/www/routes/_app.tsx
@@ -3,7 +3,7 @@ import { define } from "../utils/state.ts";
 
 export default define.page(function App({ Component, state, url }) {
   return (
-    <html lang="en">
+    <html lang="en" class="dark" data-theme="dark">
       <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -42,6 +42,8 @@ export default define.page(function App({ Component, state, url }) {
             </>
           )
           : null}
+        <script src="/theme.client.js"></script>
+        <script type="module" src="/theme-toggle.client.js"></script>
       </head>
       <body>
         <Component />
diff --git a/www/routes/docs/[...slug].tsx b/www/routes/docs/[...slug].tsx
index b8874ffa9b3..20503b98276 100644
--- a/www/routes/docs/[...slug].tsx
+++ b/www/routes/docs/[...slug].tsx
@@ -152,10 +152,10 @@ export default define.page<typeof handler>(function DocsPage(props) {
       <Header title="docs" active="/docs" />
       <div f-client-nav={true}>
         <MobileSidebar page={page} />
-        <div class="flex mx-auto max-w-screen-2xl px-0 md:px-4 md:py-0 justify-start bg-gray-100">
+        <div class="flex mx-auto max-w-screen-2xl px-0 md:px-4 md:py-0 justify-start bg-background-secondary">
           <label
             for="docs_sidebar"
-            class="px-4 py-3 lg:hidden flex items-center hover:bg-gray-100 rounded gap-2 cursor-pointer"
+            class="px-4 py-3 lg:hidden flex items-center  rounded gap-2 cursor-pointer"
           >
             <svg
               class="h-6 w-6"
@@ -178,7 +178,7 @@ export default define.page<typeof handler>(function DocsPage(props) {
           <div class="fixed top-24 w-[17rem] flex overflow-hidden">
             <div class="flex-1 h-[calc(100vh_-_6rem)] overflow-y-auto pb-8">
               <SearchButton class="mr-4 sm:mr-0" />
-              <div class="mb-4">
+              <div class="mb-4 px-1">
                 <VersionSelect
                   selectedVersion={page.version}
                   versions={page.versionLinks}
@@ -199,7 +199,7 @@ export default define.page<typeof handler>(function DocsPage(props) {
                 <TableOfContents headings={headings} />
 
                 <div class="lg:order-1 min-w-0 max-w-3xl w-full">
-                  <h1 class="text-4xl text-gray-900 tracking-tight font-bold md:mt-0 px-4 md:px-0 mb-4">
+                  <h1 class="text-4xl text-foreground-primary tracking-tight font-bold md:mt-0 px-4 md:px-0 mb-4">
                     {page.title}
                   </h1>
                   <div
@@ -256,7 +256,7 @@ function MobileSidebar({ page }: { page: Page }) {
           class="absolute inset-0 bg-gray-600 opacity-75"
           for="docs_sidebar"
         />
-        <div class="relative flex-1 flex flex-col w-[18rem] h-full bg-white border-r-2 border-gray-100">
+        <div class="relative flex-1 flex flex-col w-[18rem] h-full bg-background-primary border-r-2 border-foreground-secondary">
           <nav class="pt-0 pb-16 overflow-x-auto">
             <div class="flex-1 h-screen overflow-y-auto pt-4 px-4">
               <SearchButton class="mr-4 sm:mr-0" />
@@ -293,9 +293,9 @@ function ForwardBackButtons(props: {
         ? (
           <a
             href={prev.href}
-            class="px-4 py-2 text-left rounded border border-gray-200 grid border-solid w-full hover:border-green-600 transition-colors"
+            class="px-4 py-2 text-left rounded border border-foreground-secondary/20 grid border-solid w-full hover:border-green-600 transition-colors"
           >
-            <span class="text-sm text-gray-600">
+            <span class="text-sm text-gray-600 dark:text-gray-500">
               Previous page
             </span>
             <span class="text-green-600 font-medium">
@@ -308,9 +308,9 @@ function ForwardBackButtons(props: {
         ? (
           <a
             href={next.href}
-            class="px-4 py-2 text-right rounded border border-gray-200 border-solid grid w-full hover:border-green-600 transition-colors"
+            class="px-4 py-2 text-left rounded border border-foreground-secondary/20 grid border-solid w-full hover:border-green-600 transition-colors"
           >
-            <span class="text-sm text-gray-600">
+            <span class="text-sm text-gray-600 dark:text-gray-500">
               Next page
             </span>
             <span class="text-green-600 font-medium">
diff --git a/www/routes/docs/_layout.tsx b/www/routes/docs/_layout.tsx
new file mode 100644
index 00000000000..63b981ee32b
--- /dev/null
+++ b/www/routes/docs/_layout.tsx
@@ -0,0 +1,11 @@
+import { PageProps } from "../../../src/context.ts";
+
+export default function Layout({ Component }: PageProps) {
+  return (
+    <div class="layout">
+      <div class="bg-background-primary text-foreground-primary">
+        <Component />
+      </div>
+    </div>
+  );
+}
diff --git a/www/routes/showcase-bak.tsx b/www/routes/showcase-bak.tsx
new file mode 100644
index 00000000000..cb920084ec4
--- /dev/null
+++ b/www/routes/showcase-bak.tsx
@@ -0,0 +1,95 @@
+import { asset } from "fresh/runtime";
+import { page } from "fresh";
+import Projects, { type Project } from "../components/Projects.tsx";
+import Header from "../components/Header.tsx";
+import Footer from "../components/Footer.tsx";
+import projects from "../data/showcase.json" with { type: "json" };
+import { define } from "../utils/state.ts";
+
+const TITLE = "Showcase | Fresh";
+const DESCRIPTION = "Selection of projects that have been built with Fresh.";
+
+export const handler = define.handlers({
+  GET(ctx) {
+    ctx.state.title = TITLE;
+    ctx.state.description = DESCRIPTION;
+    ctx.state.ogImage = new URL(asset("/og-image.webp"), ctx.url).href;
+    return page();
+  },
+});
+
+export default define.page<typeof handler>(function ShowcasePage() {
+  return (
+    <>
+      <Header title="showcase" active="/showcase" />
+
+      <div class="flex flex-col min-h-screen bg-white text-black">
+        <div class="flex-1">
+          <Showcase items={projects} />
+
+          <section class="max-w-screen-lg mx-auto my-16 px-4 sm:px-6 md:px-8 space-y-4">
+            <h2 class="text-3xl text-gray-600 font-bold">
+              Badge
+            </h2>
+
+            <p class="text-gray-600">
+              You can add these stylish badges to your project’s README to show
+              that it was built with Fresh.
+            </p>
+
+            <img
+              width="197"
+              height="37"
+              src="https://fresh.deno.dev/fresh-badge.svg"
+              alt="Made with Fresh"
+            />
+
+            <img
+              width="197"
+              height="37"
+              src="https://fresh.deno.dev/fresh-badge-dark.svg"
+              alt="Made with Fresh"
+            />
+
+            <p>
+              <a
+                href="https://github.com/denoland/fresh#badges"
+                class="text-blue-600 hover:underline focus:underline"
+              >
+                Usage instructions
+              </a>
+            </p>
+          </section>
+
+          <img
+            src="/illustration/deno-plush.svg"
+            alt="a deno plush is holding a lemon"
+            class="mx-auto w-48 mt-16"
+          />
+        </div>
+
+        <Footer />
+      </div>
+    </>
+  );
+});
+
+function Showcase({ items }: { items: Project[] }) {
+  return (
+    <section class="max-w-screen-lg mx-auto my-16 px-4 sm:px-6 md:px-8 space-y-4">
+      <h2 class="text-3xl text-foreground-primary font-bold ">
+        Showcase
+      </h2>
+      <p class="text-foreground-secondary">
+        Below is a selection of projects that have been built with Fresh.{" "}
+        <a
+          href="https://github.com/denoland/fresh/blob/main/www/data/showcase.json"
+          class="text-blue-600 hover:underline"
+        >
+          Add yours!
+        </a>
+      </p>
+      <Projects items={items} class="gap-16" />
+    </section>
+  );
+}
diff --git a/www/static/docsearch.css b/www/static/docsearch.css
index 3a01045b18b..0c3de23b88e 100644
--- a/www/static/docsearch.css
+++ b/www/static/docsearch.css
@@ -46,7 +46,7 @@ html[data-theme="dark"] {
   --docsearch-container-background: rgba(9, 10, 17, 0.8);
   --docsearch-modal-background: #15172a;
   --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40,0 3px 8px 0 #000309;
-  --docsearch-searchbox-background: #090a11;
+  --docsearch-searchbox-background: #2b2d3c;
   --docsearch-searchbox-focus-background: #000;
   --docsearch-hit-color: #bec3c9;
   --docsearch-hit-shadow: none;
diff --git a/www/static/markdown.css b/www/static/markdown.css
index db80b246766..99349feddde 100644
--- a/www/static/markdown.css
+++ b/www/static/markdown.css
@@ -3,10 +3,12 @@
   --color-prettylights-syntax-comment: #6e7781;
   --color-prettylights-syntax-constant: #0550ae;
   --color-prettylights-syntax-entity: #8250df;
-  --color-prettylights-syntax-storage-modifier-import: #24292f;
+  --color-prettylights-syntax-storage-modifier-import: var(
+    --foreground-secondary
+  );
   --color-prettylights-syntax-entity-tag: #22863a;
   --color-prettylights-syntax-keyword: #cf222e;
-  --color-prettylights-syntax-string: #0a3069;
+  --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;
@@ -14,16 +16,37 @@
   --color-prettylights-syntax-markup-inserted-text: #116329;
   --color-prettylights-syntax-markup-inserted-bg: #dafbe1;
   --color-prettylights-syntax-constant-other-reference-link: #0a3069;
-  --color-fg-default: #24292f;
-  --color-fg-muted: #57606a;
-  --color-canvas-default: #fff;
-  --color-canvas-subtle: #f6f8fa;
-  --color-border-default: #d0d7de;
-  --color-border-muted: #d8dee4;
+  --color-fg-default: hsla(var(--foreground-secondary));
+  --color-fg-muted: hsla(var(--foreground-tertiary));
+  --color-canvas-default: hsla(var(--background-primary));
+  --color-canvas-subtle: hsla(var(--background-secondary));
+  --color-border-default: hsla(var(--foreground-secondary), 0.3);
+  --color-border-muted: hsla(var(--foreground-secondary), 0.1);
   --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"] {
+  --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 {
@@ -84,7 +107,7 @@
   padding: 0;
 }
 .markdown-body blockquote {
-  color: var(--color-fg-muted);
+  color: var(--color-fg-default);
   border-left: 0.25em solid var(--color-border-default);
   padding: 0 1em;
 }
@@ -620,8 +643,9 @@
   margin-bottom: 0.25rem;
 }
 .markdown-body blockquote.warn {
-  border-color: #ff9100;
-  background: #f0900525;
+  border-color: var(--warn-border);
+  background: var(--warn-bg);
+  color: var(--warn-text);
 }
 
 .markdown-body .admonition .fenced-code {
@@ -649,12 +673,18 @@
   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 {
-  background-color: #f0900525;
-  border-color: #ff9100;
+  color: var(--warn-text);
+  background-color: var(--warn-bg);
+  border-color: var(--warn-border);
 }
 
 @media screen and (min-width: 768px) {
@@ -703,6 +733,7 @@ ol.nested li:before {
   -moz-font-feature-settings: "kern" 1, "tnum" 1;
   content: counters(item, ".") ". ";
   counter-increment: item;
+  counter-increment: item;
 }
 
 .markdown-body ul {
@@ -747,7 +778,7 @@ ol.nested li:before {
   border-top-left-radius: 0.5rem;
   border-top-right-radius: 0.5rem;
   padding: 0.5rem;
-  background: #eaeef1;
+  background: hsla(var(--background-tertiary));
   display: flex;
   align-items: center;
   justify-content: space-between;
diff --git a/www/static/styles.css b/www/static/styles.css
index 7d38ed1e09b..c4680789f2d 100644
--- a/www/static/styles.css
+++ b/www/static/styles.css
@@ -2,6 +2,44 @@
 @tailwind components;
 @tailwind utilities;
 
+/* Light and dark theme variables */
+.light {
+  --fresh: 50deg, 100%, 56%;
+  --fresh-green: 142deg, 71%, 29%;
+
+  --background-primary: 215deg, 100%, 100%;
+  --background-secondary: 210deg, 29%, 97%;
+  --background-tertiary: 207deg, 33%, 95%;
+  --foreground-primary: 0deg, 0%, 9%;
+  --foreground-secondary: 0deg, 0%, 23%;
+  --foreground-tertiary: 0deg, 0%, 32%;
+  --foreground-quaternary: 0deg, 0%, 42%;
+
+  --info: 194deg, 76%, 41%;
+}
+.dark {
+  --fresh: 50deg, 100%, 56%;
+  --fresh-green: 142deg, 71%, 29%;
+
+  --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%, 20%;
+  --foreground-quaternary: 215deg, 17%, 10%;
+
+  --info: 194deg, 76%, 41%;
+
+  color: var(--foreground-primary);
+  background-color: var(--background-primary);
+}
+
+/* Scrollbar colors that look good on light and dark theme */
+* {
+  scrollbar-color: hsla(0deg, 0%, 50%, 0.5) hsla(0deg, 0%, 50%, 0.1) !important;
+}
+
 @font-face {
   font-family: Fixel;
   font-style: normal;
@@ -58,3 +96,11 @@ h5,
 h6 {
   font-weight: 750;
 }
+
+hr {
+  @apply border-foreground-secondary/10;
+}
+
+.dark-mode-toggle-button img {
+  @apply fill-foreground-primary;
+}
diff --git a/www/tailwind.config.ts b/www/tailwind.config.ts
index 06598579c0e..8553a6cf4eb 100644
--- a/www/tailwind.config.ts
+++ b/www/tailwind.config.ts
@@ -21,8 +21,19 @@ export default {
   theme: {
     extend: {
       colors: {
-        fresh: "#FFDB1E",
-        "fresh-dark": "#401C00",
+        // Dark/light with Tailwind done right using CSS variables:
+        "fresh": "hsla(var(--fresh))",
+        "fresh-green": "hsla(var(--fresh-green))",
+
+        "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))",
+        "foreground-quaternary": "hsla(var(--foreground-quaternary))",
+
+        "info": "hsla(var(--info))",
       },
     },
   },