A simple dark theme support

components/Footer.tsx

@@ -15,7 +15,7 @@ export function Footer() {
       <a target="_blank" href="https://deno.land/">
         <div class="flex align-center">
           <DenoLogo />
-          <p class="ml-4 font-bold text-xl">Deno</p>
+          <p class="ml-4 font-bold text-xl dark:text-gray-100">Deno</p>
         </div>
       </a>
       <div class="flex flex-col lg:flex-row gap-x-8 gap-y-6 text-right">

components/Header.tsx

@@ -6,10 +6,10 @@ export function Header(props: { noSubtitle?: boolean }) {
           <a class="flex items-center flex-shrink-0" href="/">
             <img src="/logo.png" alt="logo" class="w-12 h-12" />
             <span class="ml-4 flex items-baseline gap-x-1 flex-col sm:flex-row tracking-tighter">
-              <span class="text(2xl gray-900) font-bold leading-none">
+              <span class="text(2xl gray-900) font-bold leading-none dark:text-gray-100">
                 Deno
               </span>
-              <span class="font-medium italic text(sm sm:base gray-600) leading-none">
+              <span class="font-medium italic text(sm sm:base gray-600) leading-none dark:text-gray-400">
                 by example
               </span>
             </span>

deno.json

@@ -16,8 +16,6 @@
     "preact-render-to-string": "https://esm.sh/*preact-render-to-string@6.2.1",
     "@preact/signals": "https://esm.sh/*@preact/signals@1.2.2",
     "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.5.1",
-    "twind": "https://esm.sh/twind@0.16.19",
-    "twind/": "https://esm.sh/twind@0.16.19/",
     "$gfm": "https://deno.land/x/gfm@0.1.28/mod.ts",
     "$prism": "https://esm.sh/prismjs@1.29.0",
     "$prism/": "https://esm.sh/prismjs@1.29.0/",

fresh.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig } from "$fresh/server.ts";
-import twindPlugin from "$fresh/plugins/twind.ts";
+import twindPlugin from "$fresh/plugins/twindv1.ts";
 import twindConfig from "./twind.config.ts";
 export default defineConfig({
   plugins: [twindPlugin(twindConfig)],

islands/CopyButton.tsx

@@ -8,9 +8,17 @@ function Copy() {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
+      <defs>
+        <style>
+          {`path#copy-button-outline { fill: #232323 }
+          @media (prefers-color-scheme: dark) {
+            path#copy-button-outline { fill: #D2D2DC }
+          }`}
+        </style>
+      </defs>
       <path
+        id="copy-button-outline"
         d="M1.55566 2.7C1.55566 2.03726 2.09292 1.5 2.75566 1.5H8.75566C9.41841 1.5 9.95566 2.03726 9.95566 2.7V5.1H12.3557C13.0184 5.1 13.5557 5.63726 13.5557 6.3V12.3C13.5557 12.9627 13.0184 13.5 12.3557 13.5H6.35566C5.69292 13.5 5.15566 12.9627 5.15566 12.3V9.9H2.75566C2.09292 9.9 1.55566 9.36274 1.55566 8.7V2.7ZM6.35566 9.9V12.3H12.3557V6.3H9.95566V8.7C9.95566 9.36274 9.41841 9.9 8.75566 9.9H6.35566ZM8.75566 8.7V2.7L2.75566 2.7V8.7H8.75566Z"
-        fill="#232323"
       />
     </svg>
   );
@@ -20,7 +28,7 @@ export default function CopyButton(props: { text: string }) {
   return (
     <div class="absolute top-2 right-2 flex items-center z-10">
       <button
-        class="rounded border border-[#D2D2DC] p-1.5 bg-gray-100 hover:bg-[#D2D2DC]"
+        class="rounded border border-[#D2D2DC] p-1.5 bg-gray-100 hover:bg-[#D2D2DC] dark:(bg-gray-800 border-gray-600 hover:bg-gray-600)"
         onClick={() => navigator?.clipboard?.writeText(props.text)}
       >
         <Copy />

routes/[id]/index.tsx

@@ -109,7 +109,7 @@ export default function ExamplePage(props: PageProps<Data>) {
           <div class="flex gap-2 items-center">
             {example.tags.map((tag) => (
               <span
-                class="text-xs bg-gray-200 py-0.5 px-2 rounded-md"
+                class="text-xs bg-gray-200 py-0.5 px-2 rounded-md dark:(bg-gray-800 text-gray-300)"
                 title={TAGS[tag].description}
               >
                 {TAGS[tag].title}
@@ -118,10 +118,12 @@ export default function ExamplePage(props: PageProps<Data>) {
           </div>
         </div>
         <div class="flex justify-between items-center">
-          <h1 class="mt-2 text-3xl font-bold">{example.title}</h1>
+          <h1 class="mt-2 text-3xl font-bold dark:text-gray-100">
+            {example.title}
+          </h1>
           <a
             href={`https://github.com/denoland/denobyexample/blob/main/data${props.url.pathname}.ts`}
-            class="px-4 py-2 rounded bg-gray-100 hover:bg-gray-300 text-slate-900"
+            class="px-4 py-2 rounded bg-gray-100 hover:bg-gray-300 text-slate-900 dark:(bg-gray-700 text-slate-300 hover:bg-gray-600)"
           >
             Edit
           </a>
@@ -154,14 +156,14 @@ export default function ExamplePage(props: PageProps<Data>) {
           <div class="col-span-7 mt-8">
             {example.run && (
               <>
-                <p class="text-gray-700">
+                <p class="text-gray-700 dark:text-gray-200">
                   Run{" "}
                   <a href={url} class="hover:underline focus:underline">
                     this example
                   </a>{" "}
                   locally using the Deno CLI:
                 </p>
-                <pre class="mt-2 bg-gray-100 p-4 overflow-x-auto text-sm select-all rounded-md">
+                <pre class="mt-2 bg-gray-100 p-4 overflow-x-auto text-sm select-all rounded-md dark:(bg-gray-800 text-gray-300)">
                   {example.run.startsWith("deno")
                     ? example.run.replace("<url>", url)
                     : "deno run " + example.run.replace("<url>", url)}
@@ -170,7 +172,7 @@ export default function ExamplePage(props: PageProps<Data>) {
             )}
             {example.playground && (
               <div class="col-span-3 mt-8">
-                <p class="text-gray-700">
+                <p class="text-gray-700 dark:text-gray-300">
                   Try this example in a Deno Deploy playground:
                 </p>
                 <p class="mt-3">
@@ -192,7 +194,7 @@ export default function ExamplePage(props: PageProps<Data>) {
                 <ul class="list-disc list-inside mt-1">
                   {example.additionalResources.map(([link, title]) => (
                     <li
-                      class="text-gray-700 hover:text-gray-900"
+                      class="text-gray-700 hover:text-gray-900 dark:(text-gray-300 hover:text-gray-200)"
                       key={link + title}
                     >
                       <a class="hover:underline focus:underline" href={link}>
@@ -211,7 +213,7 @@ export default function ExamplePage(props: PageProps<Data>) {
             ? (
               <a
                 href={`/${prev.id}`}
-                class="w-6/12 text-gray-600 flex items-center gap-3 lg:gap-2 :hover:text-gray-900"
+                class="w-6/12 text-gray-600 flex items-center gap-3 lg:gap-2 :hover:text-gray-900 dark:(text-gray-400 hover:text-gray-300)"
               >
                 <CircleArrow />
                 {prev.title}
@@ -221,7 +223,7 @@ export default function ExamplePage(props: PageProps<Data>) {
           {next && (
             <a
               href={`/${next.id}`}
-              class="w-6/12 text-gray-600 text-right flex items-center justify-end gap-3 lg:gap-2 :hover:text-gray-900"
+              class="w-6/12 text-gray-600 text-right flex items-center justify-end gap-3 lg:gap-2 :hover:text-gray-900 dark:(text-gray-400 hover:text-gray-300)"
             >
               {next.title}
               <CircleArrow right />
@@ -247,19 +249,19 @@ function SnippetComponent(props: {
 
   return (
     <div class="grid grid-cols-1 sm:grid-cols-10 gap-x-8  transition duration-150 ease-in">
-      <div class="py-4 text-gray-700 select-none col-span-3 text-sm">
+      <div class="py-4 text-gray-700 select-none col-span-3 text-sm dark:text-gray-300">
         {props.snippet.text}
       </div>
       <div
-        class={`col-span-7 relative bg-gray-100 ${
+        class={`col-span-7 relative bg-gray-100 dark:bg-gray-800 ${
           props.firstOfFile ? "rounded-t-md" : ""
         } ${props.lastOfFile ? "rounded-b-md" : ""} ${
           props.snippet.code.length === 0 ? "hidden sm:block" : ""
         }`}
       >
         {props.filename && (
           <span
-            class={`font-mono text-xs absolute -top-3 left-4 bg-gray-200 z-10 p-1 rounded-sm ${
+            class={`font-mono text-xs absolute -top-3 left-4 bg-gray-200 dark:(bg-gray-700 text-gray-200) z-10 p-1 rounded-sm ${
               props.firstOfFile ? "block" : "block sm:hidden"
             }`}
           >
@@ -269,8 +271,17 @@ function SnippetComponent(props: {
         <div class="relative block sm:hidden">
           <CopyButton text={props.snippet.code} />
         </div>
-        <div class="px-4 py-4 text-sm overflow-scroll sm:overflow-hidden relative gfm-highlight">
-          <pre dangerouslySetInnerHTML={{ __html: renderedSnippet }} />
+        <div
+          data-color-mode="auto"
+          data-light-theme="light"
+          data-dark-theme="dark"
+          class="px-4 py-4 text-sm overflow-scroll sm:overflow-hidden relative gfm-highlight markdown-body"
+          style={{ backgroundColor: "transparent" }}
+        >
+          <pre
+            style={{ padding: "0px", backgroundColor: "transparent" }}
+            dangerouslySetInnerHTML={{ __html: renderedSnippet }}
+          />
         </div>
       </div>
     </div>

routes/_app.tsx

@@ -7,7 +7,7 @@ export default function App({ Component }: PageProps) {
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       </head>
-      <body>
+      <body class="dark:bg-gray-900">
         <Component />
       </body>
     </html>

routes/index.tsx

@@ -39,26 +39,26 @@ export default function Home(props: PageProps<ExampleGroup[]>) {
         <h1 class="flex items-center gap-4">
           <img src="/logo.png" alt="logo" class="w-24 h-24" />
           <div>
-            <span class="text(5xl gray-900) tracking-tight font-bold">
+            <span class="text(5xl gray-900) dark:text-gray-100 tracking-tight font-bold">
               Deno
             </span>
-            <span class="text(2xl gray-700) tracking-tight italic font-medium ml-2">
+            <span class="text(2xl gray-700) dark:text-gray-300 tracking-tight italic font-medium ml-2">
               by example
             </span>
           </div>
         </h1>
-        <p class="mt-8 text-gray-900">
+        <p class="mt-8 text-gray-900 dark:text-gray-300">
           Deno is a simple, modern and secure runtime for JavaScript and
           TypeScript that uses V8 and is built in Rust.
         </p>
-        <p class="mt-6 text-gray-900">
+        <p class="mt-6 text-gray-900 dark:text-gray-300">
           <i class="italic">Deno by example</i>{" "}
           is a collection of annotated examples for how to use Deno, and the
           various features it provides. It acts as a reference for how to do
           various things in Deno, but can also be used as a guide to learn about
           many of the features Deno provides.
         </p>
-        <ul class="mt-16 text-gray-900 md:flex md:flex-wrap gap-12 space-y-8 md:space-y-0">
+        <ul class="mt-16 text-gray-900 dark:text-gray-300 md:flex md:flex-wrap gap-12 space-y-8 md:space-y-0">
           {props.data.map(
             (group) => <IndexGroup group={group} />,
           )}

twind.config.ts

@@ -1,5 +1,10 @@
-import { Options } from "$fresh/plugins/twind.ts";
+import { defineConfig, Preset } from "@twind/core";
+import presetTailwind from "@twind/preset-tailwind";
+import presetAutoprefix from "@twind/preset-autoprefix";
 
 export default {
+  ...defineConfig({
+    presets: [presetTailwind() as Preset, presetAutoprefix()],
+  }),
   selfURL: import.meta.url,
-} as Options;
+};