feat(html): introduce dark theme

src/html/templates/breadcrumbs.hbs

@@ -18,7 +18,7 @@
 		  {{~#if this.is_symbol~}}
 			  <span>.</span>
 			  {{~else~}}
-			  <span class="text-[#0F172A]">{{~> icons/arrow ~}}</span>
+			  <span class="text-black dark:text-white">{{~> icons/arrow ~}}</span>
 		  {{~/if~}}
 	  {{/unless}}
 

src/html/templates/comrak.css

@@ -1,9 +1,9 @@
 .link {
-  @apply text-blue-600 transition duration-75;
+  @apply text-blue-600 transition duration-75 dark:text-blue-400;
 }
 
 .link:hover {
-  @apply text-blue-400;
+  @apply text-blue-400 dark:text-blue-500;
 }
 
 .markdown_summary, .markdown {
@@ -13,14 +13,34 @@
 }
 
 .markdown_summary {
-  @apply inline text-stone-600;
+  @apply inline text-stone-600 dark:text-stone-400;
 
   p {
     @apply inline-block line-clamp-4;
   }
 
   :not(pre) > code {
-    @apply font-mono text-sm py-0.5 px-1.5 rounded bg-stone-200;
+    @apply font-mono text-sm py-0.5 px-1.5 rounded bg-stone-200
+      dark:bg-stone-800;
+  }
+}
+
+.context_button {
+  @apply absolute top-3 right-4 opacity-60 hover:opacity-100 active:opacity-100
+    transition duration-75;
+
+  svg.check {
+    @apply hidden;
+  }
+
+  &.copied {
+    svg.copy {
+      @apply hidden;
+    }
+
+    svg.check {
+      @apply block;
+    }
   }
 }
 
@@ -29,11 +49,13 @@
     md:max-w-screen-md lg:max-w-[75ch];
 
   h1 {
-    @apply text-xl md:text-2xl lg:text-3xl border-b border-stone-300 pb-1;
+    @apply text-xl md:text-2xl lg:text-3xl border-b border-stone-300 pb-1
+      dark:border-stone-700;
   }
 
   h2 {
-    @apply text-lg md:text-xl lg:text-2xl border-b border-stone-300 pb-1;
+    @apply text-lg md:text-xl lg:text-2xl border-b border-stone-300 pb-1
+      dark:border-stone-700;
   }
 
   h3 {
@@ -53,7 +75,7 @@
   }
 
   hr {
-    @apply m-2 border-stone-500;
+    @apply m-2 border-stone-500 dark:border-stone-400;
   }
 
   ol, ul {
@@ -70,7 +92,8 @@
 
   /* Inline code */
   :not(pre) > code {
-    @apply font-mono text-sm py-0.5 px-1.5 rounded-md bg-stone-200;
+    @apply font-mono text-sm py-0.5 px-1.5 rounded-md bg-stone-200
+      dark:bg-stone-800;
   }
 
   h1, h2, h3, h4, h5, h6 {
@@ -81,7 +104,8 @@
 
   pre {
     @apply font-mono text-sm text-black bg-slate-50 border-t-1.5 border-b-1.5
-      border-slate-300 -mx-4 rounded-none md:rounded-md md:border-1.5 md:mx-0;
+      border-slate-300 -mx-4 rounded-none md:rounded-md md:border-1.5 md:mx-0
+      dark:bg-stone-800 dark:border-gray-600;
 
     & > code:first-child {
       @apply overflow-x-auto px-6 py-4 block;
@@ -105,11 +129,11 @@
   }
 
   th, td {
-    @apply border-1.5 border-slate-300;
+    @apply border-1.5 border-slate-300 dark:border-stone-700;
   }
 
   tr:nth-child(2n) {
-    @apply bg-slate-50;
+    @apply bg-slate-50 dark:bg-stone-800;
   }
 
   img {
@@ -129,68 +153,55 @@
   }
 
   .alert-note {
-    @apply border-blue-600 bg-blue-600/5;
+    @apply border-blue-600 bg-blue-600/5 dark:bg-blue-600/5;
 
     div:first-child {
-      @apply text-blue-600 stroke-blue-600;
+      @apply text-blue-600 stroke-blue-600 dark:text-blue-600
+        dark:stroke-blue-600;
     }
   }
 
   .alert-tip {
-    @apply border-green-600 bg-green-600/5;
+    @apply border-green-600 bg-green-600/5 dark:bg-green-600/5;
 
     div:first-child {
-      @apply text-green-600 stroke-green-600;
+      @apply text-green-600 stroke-green-600 dark:text-green-600
+        dark:stroke-green-600;
     }
   }
 
   .alert-important {
-    @apply border-purple-600 bg-purple-600/5;
+    @apply border-purple-600 bg-purple-600/5 dark:bg-purple-600/5;
 
     div:first-child {
-      @apply text-purple-600 stroke-purple-600;
+      @apply text-purple-600 stroke-purple-600 dark:text-purple-600
+        dark:stroke-purple-600;
     }
   }
 
   .alert-warning {
-    @apply border-yellow-600 bg-yellow-600/5;
+    @apply border-yellow-600 bg-yellow-600/5 dark:bg-yellow-600/5;
 
     div:first-child {
-      @apply text-yellow-600 stroke-yellow-600;
+      @apply text-yellow-600 stroke-yellow-600 dark:text-yellow-600
+        dark:stroke-yellow-600;
     }
   }
 
   .alert-caution {
-    @apply border-red-600 bg-red-600/5;
+    @apply border-red-600 bg-red-600/5 dark:bg-red-600/5;
 
     div:first-child {
-      @apply text-red-600 stroke-red-600;
+      @apply text-red-600 stroke-red-600 dark:text-red-600 dark:stroke-red-600;
     }
   }
 }
 
 .markdown .highlight {
-  @apply relative;
+  @apply relative text-black bg-gray-50 dark:bg-gray-800 dark:text-white;
 
   .lineNumbers {
-    @apply border-r-2 border-stone-300 pr-1 text-right flex-none;
-  }
-
-  .context_button {
-    @apply absolute top-3 right-4 opacity-60 hover:opacity-100;
-
-    svg.check {
-      @apply hidden;
-    }
-
-    &.copied {
-      svg.copy {
-        @apply hidden;
-      }
-
-      svg.check {
-        @apply block;
-      }
-    }
+    @apply border-r-2 border-gray-300 pr-1 text-right flex-none
+      dark:border-gray-600;
   }
 }

src/html/templates/doc_entry.hbs

@@ -22,7 +22,7 @@
             <span class="font-bold font-lg">{{{name}}}</span>
           {{~/if~}}
         {{~/if~}}
-        <span class="font-medium text-stone-500">{{{content}}}</span>
+        <span class="font-medium text-stone-500 dark:text-stone-200">{{{content}}}</span>
       </code>
     </div>
 

src/html/templates/doc_node_kind_icon.hbs

@@ -1,6 +1,6 @@
 <div class="docNodeKindIcon">
   {{~#each this~}}
-    <div class="text-{{this.kind}} bg-{{this.kind}}/15" title="{{this.title}}">
+    <div class="text-{{this.kind}} bg-{{this.kind}}/15 dark:text-{{this.kind}}Dark dark:bg-{{this.kind}}Dark/15" title="{{this.title}}">
       {{~this.char~}}
     </div>
   {{~/each~}}

src/html/templates/function.hbs

@@ -12,7 +12,7 @@
       {{~> symbol_content this.content ~}}
     </div>
     {{~#if (not @last)~}}
-      <div class="border-b border-gray-300 max-w-[75ch]"></div>
+      <div class="border-b border-gray-300 max-w-[75ch] dark:border-gray-700"></div>
     {{~/if~}}
   {{~/each~}}
 </div>

src/html/templates/pages/page.css

@@ -1,9 +1,16 @@
 @tailwind components;
 @tailwind utilities;
 
+body {
+  @apply bg-white dark:bg-backgroundDark text-black dark:text-white;
+}
+
 .ddoc {
-  /* keep spacing in sync with #topnav in various places further down */
-  @apply flex min-h-fit items-start gap-6 p-4;
+  /*
+    keep spacing in sync with #topnav in various places further down
+    de-dup body styles to unsure compatibility `@deno/doc`
+  */
+  @apply flex bg-white items-start gap-6 p-4 dark:bg-backgroundDark dark:text-white;
 
   &:has(#categoryPanel) {
     @apply lg:p-2;

src/html/templates/pages/search.js

@@ -117,11 +117,11 @@ function renderResults(results) {
 
   for (const result of results) {
     const kind = result.kind.map((kind) => {
-      return `<div class="text-${kind.kind} bg-${kind.kind}/15" title="${kind.title}">${kind.char}</div>`;
+      return `<div class="text-${kind.kind} bg-${kind.kind}/15 text-${kind.kind}Dark bg-${kind.kind}Dark/15" title="${kind.title}">${kind.char}</div>`;
     }).join("");
 
     html += `<li class="block">
-<a href="${pathToRoot}${result.file}/~/${result.name}.html" class="flex rounded-lg gap-4 items-center justify-between py-2 px-3 hover:bg-stone-100">
+<a href="${pathToRoot}${result.file}/~/${result.name}.html" class="flex rounded-lg gap-4 items-center justify-between py-2 px-3 hover:bg-stone-100 dark:hover:bg-stone-800">
     <div class="flex items-center gap-2.5">
       <div class="docNodeKindIcon">
         ${kind}

src/html/templates/pages/tailwind.config.ts

@@ -1,9 +1,15 @@
 import { type Config } from "npm:tailwindcss@3.4.3";
 
 export default {
+  theme: {
+    extend: {
+      colors: {
+        backgroundDark: "#121417",
+      },
+    },
+  },
   content: [
     "./src/html/templates/pages/*.hbs",
     "./src/html/templates/pages/search.js",
   ],
-  darkMode: "class",
 } as Config;

src/html/templates/pages/top_nav.hbs

@@ -1,4 +1,6 @@
-<nav class="top-0 sticky bg-white z-50 py-3 h-14" id="topnav">
+<nav
+  class="top-0 sticky z-50 py-3 h-14 bg-white/10 dark:bg-backgroundDark/90 dark:text-white/90 border-b border-gray-300 dark:border-gray-700"
+  id="topnav">
   <div class="h-full">
     <div>
       {{~> breadcrumbs breadcrumbs_ctx ~}}
@@ -9,7 +11,8 @@
         type="text"
         id="searchbar"
         style="display: none;"
-        class="py-2 px-2.5 rounded text-sm border border-gray-300 bg-transparent" />
+        class="py-2 px-2.5 mx-1 rounded text-sm border border-gray-300 bg-transparent dark:bg-gray-800 dark:border-gray-700"
+        />
     {{/if}}
   </div>
 </nav>

src/html/templates/section.hbs

@@ -26,7 +26,7 @@
           {{~> (lookup ../content "kind") this ~}}
 
           {{~#if (and (eq (lookup ../content "kind") "example") (not @last))~}}
-            <div class="border-b border-gray-300"></div>
+            <div class="border-b border-gray-300 dark:border-gray-700"></div>
           {{~/if~}}
         {{~/each~}}
       </div>