www: docs: feat: add dark mode (#2820)

- Added CSS vars for dark/light colors.
- Added dark/light theme toggle as Island

Fixes #2648

---------

Co-authored-by: Marvin Hagemeister <marvin@deno.com>

Author: davis9001

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>

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

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>

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

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

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>

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

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

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

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">