Add dark mode support

emanote/default/templates/components/body.tpl

@@ -1,4 +1,4 @@
-<div class="flex-1 w-full bg-white">
+<div class="flex-1 w-full dark:bg-slate-800 dark:text-white">
   <main class="px-4 py-4">
     <apply template="note-title" />
     <ema:has:toc>

emanote/default/templates/components/pandoc.tpl

@@ -1,7 +1,7 @@
 <bind tag="clickable-icon">
   <a href="${ema:note:url}#${header:id}" class="--ema-anchor">
     <span
-      class="hover:text-${theme}-400 group-hover:visible invisible cursor-pointer text-sm align-middle"
+      class="hover:text-${theme}-400 dark:text-slate-200 group-hover:visible invisible cursor-pointer text-sm align-middle"
       aria-label="Copy link"><svg class="inline w-4" xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
         stroke-linecap="round" stroke-linejoin="round">
@@ -16,7 +16,7 @@
   <clickable-icon />
 </bind>
 
-<bind tag="header-class">group mt-6 mb-4 font-bold text-gray-700</bind>
+<bind tag="header-class">group mt-6 mb-4 font-bold text-gray-700 dark:text-slate-200</bind>
 
 <ema:note:pandoc>
   <Para>
@@ -66,14 +66,15 @@
   </DefinitionList>
   <Note:Ref>
     <sup class="px-0.5">
-      <a class="text-${theme}-600 hover:underline" href="${ema:note:url}#fn${footnote:idx}">
+      <a class="text-${theme}-600 dark:text-${theme}-200 hover:underline"
+        href="${ema:note:url}#fn${footnote:idx}">
         <footnote:idx />
       </a>
     </sup>
   </Note:Ref>
   <Note:List>
     <div title="Footnotes"
-      class="pt-2 mt-8 space-y-1 text-gray-500 transform scale-x-90 border-t-2">
+      class="pt-2 mt-8 space-y-1 text-gray-500 dark:text-slate-300 transform scale-x-90 border-t-2">
       <header class="font-semibold">Footnotes</header>
       <footnote>
         <div id="fn${footnote:idx}">
@@ -110,12 +111,12 @@
     <hr class="mb-3" />
   </HorizontalRule>
   <!-- TODO: Expand the above kind of overriding (full DOM control) to other AST nodes (below) -->
-  <PandocLink class="text-${theme}-600">
+  <PandocLink class="text-${theme}-600 dark:text-${theme}-300">
     <Internal class="mavenLinkBold hover:underline" />
     <External class="hover:underline" target="_blank" rel="noopener" />
   </PandocLink>
   <CodeBlock class="py-0.5 mb-3 text-sm" />
-  <Code class="py-0.5 px-0.5 bg-gray-100" />
+  <Code class="py-0.5 px-0.5 bg-gray-100 dark:bg-slate-200 dark:text-black" />
 
   <Header:1>
     <h1 id="${header:id}" class="${header-class} text-5xl">

emanote/default/templates/components/sidebar-tree.tpl

@@ -1,11 +1,13 @@
 <!-- Variable bindings for this tree-->
-<bind tag="link-class">hover:bg-${theme}-200</bind>
+<bind tag="link-class">hover:bg-${theme}-200 dark:hover:bg-${theme}-300 dark:hover:text-black</bind>
 <node:active>
-  <bind tag="link-class">mavenLinkBold bg-${theme}-100 hover:bg-${theme}-200</bind>
+  <bind tag="link-class">mavenLinkBold bg-${theme}-100 hover:bg-${theme}-200
+    dark:hover:bg-${theme}-300 dark:hover:text-black dark:bg-${theme}-200 dark:text-black</bind>
   <else />
   <node:activeTree>
     <has-current-route>
-      <bind tag="link-class">mavenLinkBold hover:bg-${theme}-200</bind>
+      <bind tag="link-class">mavenLinkBold hover:bg-${theme}-200 dark:hover:bg-${theme}-300
+        dark:hover:text-black</bind>
     </has-current-route>
   </node:activeTree>
 </node:active>
@@ -14,14 +16,15 @@
   <bind tag="icon">
     <tree:open>
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
-        class="${iconSize} inline text-gray-700" fill="currentColor">
+        class="${iconSize} inline text-gray-700 dark:text-slate-300" fill="currentColor">
         <path fill-rule="evenodd"
           d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm3 10.5a.75.75 0 0 0 0-1.5H9a.75.75 0 0 0 0 1.5h6Z"
           clip-rule="evenodd" />
       </svg>
       <else />
-      <svg xmlns="http://www.w3.org/2000/svg" class="${iconSize} inline text-gray-500"
-        viewBox="0 0 24 24" fill="currentColor">
+      <svg xmlns="http://www.w3.org/2000/svg"
+        class="${iconSize} inline text-gray-500 dark:text-slate-300" viewBox="0 0 24 24"
+        fill="currentColor">
         <path fill-rule="evenodd"
           d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25ZM12.75 9a.75.75 0 0 0-1.5 0v2.25H9a.75.75 0 0 0 0 1.5h2.25V15a.75.75 0 0 0 1.5 0v-2.25H15a.75.75 0 0 0 0-1.5h-2.25V9Z"
           clip-rule="evenodd" />

emanote/default/templates/components/sidebar.tpl

@@ -1,7 +1,8 @@
 <nav id="sidebar"
   class="flex-shrink hidden leading-relaxed md:block md:sticky md:top-0 md:max-h-screen md:overflow-y-auto md:w-48 xl:w-64">
-  <div class="px-2 py-2 text-gray-800">
-    <div id="indexing-links" class="flex flex-row float-right p-2 space-x-2 text-gray-500">
+  <div class="px-2 py-2 text-gray-800 dark:text-white">
+    <div id="indexing-links"
+      class="flex flex-row float-right p-2 space-x-2 text-gray-500 dark:text-slate-200">
       <a href="${ema:tagIndexUrl}" title="View tags">
         <svg style="width: 1rem;" class="hover:text-${theme}-700" fill="none" stroke="currentColor"
           viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

emanote/default/templates/layouts/default.tpl

@@ -47,7 +47,7 @@
 
       <ema:has:sidebar>
         <div id="container"
-          class="flex flex-nowrap flex-col md:flex-row bg-gray-50 md:shadow-2xl md:mb-8">
+          class="flex flex-nowrap flex-col md:flex-row bg-gray-50 dark:bg-slate-600 md:shadow-2xl md:mb-8">
           <!-- Sidebar column -->
           <apply template="components/sidebar" />
           <!-- Main body column -->
@@ -63,4 +63,4 @@
       <apply template="components/footer" />
     </div>
   </bind>
-</apply>
+</apply>