adds dark mode

assets/css/article.css

@@ -12,6 +12,10 @@
   font-size: 1.5em;
 }
 
+.article-title--list {
+  @apply text-2xl font-bold text-gray-900 group-hover:text-pine-900 underline underline-offset-5 decoration-sand-500 hover:decoration-pine-900
+  dark:text-sand-100 dark:group-hover:text-sand-500 dark:decoration-sand-900 dark:hover:decoration-sand-500;
+}
 .article-title--list .article-title__narrator::after {
   content: ":";
 }
@@ -27,7 +31,8 @@
 /* Narrator headshot */
 
 .narrator__container {
-  @apply relative w-48 mb-2 mx-auto md:mx-0 bg-white rounded-full border-4 border-white;
+  @apply relative w-48 mb-2 mx-auto md:mx-0 rounded-full border-4 bg-white border-white
+  dark:bg-gray-950 dark:border-gray-950;
 }
 
 .narrator__frame {
@@ -35,7 +40,8 @@
 }
 
 .narrator__frame img {
-  @apply w-full rounded-full object-cover relative z-10 bg-white text-center border-4 border-white grid place-items-center;
+  @apply w-full rounded-full object-cover relative z-10 bg-white text-center border-4 border-white grid place-items-center
+  dark:bg-gray-950 dark:border-gray-950;
   aspect-ratio: 1;
 }
 

assets/css/components/wompum.css

@@ -28,9 +28,19 @@
 }
 
 .wompum-cell {
+  @apply dark:opacity-70 brightness-100;
   width: 100%;
   height: 100%;
-  transition: background-color 0.3s ease;
+  transition: all 3s ease-in;
+}
+
+.wompum-cell:hover {
+  @apply dark:opacity-100 brightness-125;
+  transition: all .3s ease;
+}
+
+.wompum-cell[class*="900"]:hover {
+  @apply brightness-200;
 }
 
 .wompum-cell--narrator,

assets/css/main.css

@@ -3,49 +3,57 @@ body {
 }
 
 a:hover {
-  @apply text-pine-900;
+  @apply text-pine-900 dark:text-pine-100;
 }
 
 .tag {
-  @apply p-2 bg-sand-100 border border-transparent hover:border-sand-500 rounded-lg whitespace-nowrap hover:text-gray-900 hover:opacity-100 no-underline;
+  @apply p-2 bg-sand-100 border border-transparent rounded-lg whitespace-nowrap no-underline
+  hover:border-sand-500 hover:text-gray-900 hover:opacity-100 
+  dark:bg-gray-900 dark:text-sand-100 dark:border-gray-800 dark:hover:text-sand-100
+  transition-all duration-200 ease-in-out;
+  transition: border 2s ease-in;
+}
+
+.tag:hover {
+  transition: border 0.1s ease-out;
 }
 
 .tag-cloud .tag:nth-child(10n+1):hover {
-  @apply border-blue-500;
+  @apply border-blue-500 dark:border-blue-900;
 }
 
 .tag-cloud .tag:nth-child(10n+2):hover {
-  @apply border-clay-500;
+  @apply border-clay-500 dark:border-clay-900;
 }
 
 .tag-cloud .tag:nth-child(10n+3):hover {
-  @apply border-cyan-500;
+  @apply border-cyan-500 dark:border-cyan-900;
 }
 
 .tag-cloud .tag:nth-child(10n+4):hover {
-  @apply border-gold-500;
+  @apply border-gold-500 dark:border-gold-900;
 }
 
 .tag-cloud .tag:nth-child(10n+5):hover {
-  @apply border-red-500;
+  @apply border-red-500 dark:border-red-900;
 }
 
 .tag-cloud .tag:nth-child(10n+6):hover {
-  @apply border-pine-500;
+  @apply border-pine-500 dark:border-pine-900;
 }
 
 .tag-cloud .tag:nth-child(10n+7):hover {
-  @apply border-pink-500;
+  @apply border-pink-500 dark:border-pink-900;
 }
 
 .tag-cloud .tag:nth-child(10n+8):hover {
-  @apply border-moss-500;
+  @apply border-moss-500 dark:border-moss-900;
 }
 
 .tag-cloud .tag:nth-child(10n+9):hover {
-  @apply border-rust-500;
+  @apply border-rust-500 dark:border-rust-900;
 }
 
 .tag-cloud .tag:nth-child(10n):hover {
-  @apply border-sand-500;
+  @apply border-sand-500 dark:border-sand-900;
 }

assets/css/styles.css

@@ -1,6 +1,9 @@
 @import "tailwindcss";
 @plugin "@tailwindcss/typography";
 
+/* allows for toggling dark mode */
+@custom-variant dark (&:where(.dark, .dark *));
+
 /* Add safelist for all color variations */
 /* Wompum.js constructs class names dynamically and tailwind misses them */
 @source inline("{bg,text,border}-{blue,clay,cyan,gold,moss,pine,pink,red,rust,sand}-{100,500,900}");
@@ -41,7 +44,7 @@
 }
 
 body {
-  @apply antialiased bg-sand-100/50;
+  @apply antialiased bg-sand-100/50 dark:bg-gray-950 dark:text-gray-200 transition-colors duration-200;
 }
 
 @import "components/wompum.css";

assets/js/darkmode.js

@@ -0,0 +1,19 @@
+// Set initial theme on page load
+(function() {
+  const isDark = localStorage.theme === "dark" ||
+    (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches);
+  document.documentElement.classList.toggle("dark", isDark);
+
+  // Update label on load
+  const label = document.getElementById("darkmode-label");
+  if (label) label.textContent = !isDark ? "Dark" : "Light";
+})();
+
+// Toggle dark mode and update label/localStorage
+function toggleDarkMode() {
+  const html = document.documentElement;
+  const isDark = html.classList.toggle("dark");
+  localStorage.theme = isDark ? "dark" : "light";
+  const label = document.getElementById("darkmode-label");
+  if (label) label.textContent = !isDark ? "Dark" : "Light";
+}

layouts/_default/single.html

@@ -4,7 +4,7 @@
         <div class="wompum-grid" data-text="{{ .Params.wompum | default .Title }}" data-columns="7" data-rows="5"></div>
       </header>
 
-      <div class="prose lg:prose-xl p-4 mx-auto mt-8">
+      <div class="prose lg:prose-xl dark:prose-invert p-4 mx-auto mt-8">
         <p class="font-bold text-6xl">{{ .Title }}</p>
         {{ .Content }}
         

layouts/articles/single.html

@@ -19,7 +19,7 @@
           {{ end }}
           <div class="md:block hidden">{{ partial "article-metadata.html" . }}</div>
         </aside>
-        <div class="prose lg:prose-xl lg:w-2/3 p-4 mx-auto md:mx-0">
+        <div class="prose lg:prose-xl dark:prose-invert lg:w-2/3 p-4 mx-auto md:mx-0">
           <p class="font-bold text-4xl article-title article-title--single">{{ partial "article-title" . }}</p>
           {{ .Content }}
         </div>

layouts/partials/article-list.html

@@ -7,16 +7,16 @@
 <li class="group flex md:flex-row flex-col md:gap-4 gap-2 md:items-center">
   <div class="flex-1 min-w-0 flex gap-2 items-center h-full">
     <a class="wompum-container h-full aspect-7/2 md:aspect-auto" href="{{ $page.RelPermalink }}">{{ partial "article-wompum.html" $page }}</a>
-    <time class="text-gray-800 font-iosevka w-12 flex-shrink-0" datetime="{{ $page.Date.Format "2006-01-02" }}">
+    <time class="text-gray-800 dark:text-sand-500 font-iosevka w-12 flex-shrink-0" datetime="{{ $page.Date.Format "2006-01-02" }}">
       <p>{{ $page.Date.Format "Jan" }}</p>
       <p>{{ $page.Date.Format "02" }}</p>
       <p>{{ $page.Date.Format "2006" }}</p>
     </time>
   </div>
   <div class="flex flex-col gap-2 md:w-3/5 flex-shrink-0 md:py-8">
-    <a class="article-title article-title--list text-2xl font-bold text-gray-900 group-hover:text-pine-900 underline underline-offset-5 decoration-sand-500 hover:decoration-pine-900" href="{{ $page.RelPermalink }}">{{ partial "article-title" $page }}</a>
+    <a class="article-title article-title--list" href="{{ $page.RelPermalink }}">{{ partial "article-title" $page }}</a>
     {{ if $page.Params.location }}
-    <p class="text-gray-800 italic">{{ $page.Params.location }}</p>
+    <p class="light:text-gray-800 dark:text-sand-100 italic">{{ $page.Params.location }}</p>
     {{ end }}
     <p class="max-w-prose">{{ $page.Params.summary }}</p>
     {{ partial "topics.html" $page }}

layouts/partials/footer.html

@@ -1,4 +1,4 @@
-<footer class="bg-sand-500 text-amber-900 mt-16">
+<footer class="bg-sand-500 text-amber-900 mt-16 dark:bg-gray-800 dark:text-sand-500">
   <div class="wompum-container wompum-container--no-gap h-1">
     <div class="wompum-grid" data-text="{{ .Site.Title }}" data-columns="7" data-rows="1">
     </div>

layouts/partials/header.html

@@ -5,13 +5,30 @@
       <a href="/">{{ .Site.Title }}</a>
     </h1>
     <nav class="font-iosevka">
-      <ul class="flex gap-4">
+      <ul class="flex flex-col flex-wrap relative sm:flex-row sm:gap-4 justify-center pr-8 sm:pr-0">
         <li>
           <a href="/">Home</a>
         </li>
         <li>
           <a href="/about">About</a>
         </li>
+        <li class="sm:relative absolute -right-1 top-1/2 sm:right-[unset] sm:top-[unset] transform -translate-y-1/2 sm:transform-none sm:translate-y-0">
+          <button id="darkmode-toggle" onclick="toggleDarkMode()" aria-label="Toggle dark mode" 
+                  class="flex group p-1 relative -mt-1 cursor-pointer hover:bg-gray-950 hover:text-gray-100 dark:hover:bg-sand-100 dark:hover:text-gray-900 rounded-full">
+            <!-- Lightbulb SVG icon -->
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 dark:inline hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round"
+                d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z">
+              </path>
+            </svg>
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 dark:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round"
+                d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z">
+              </path>
+            </svg>
+            <p class="tooltip transition-opacity duration-500 absolute mr-5 -bottom-5 right-0 w-sm text-sm text-right hidden group-hover:block opacity-0 group-hover:opacity-100 group-hover:text-gray-600 dark:group-hover:text-gray-400">Turn on <span id="darkmode-label"></span> Mode</p>
+          </button>
+        </li>
       </ul>
     </nav>
   </div>

layouts/partials/wompum-demo.html

@@ -6,7 +6,7 @@
   <div class="mb-8">
     <label class="block mb-2">Enter text to generate a grid:</label>
     <input type="text" 
-           class="w-full p-2 border rounded font-iosevka bg-sand-100"
+           class="w-full p-2 border rounded font-iosevka bg-sand-100 dark:bg-gray-800"
            placeholder="Type something..."
            value="{{ .Site.Title}}"
            oninput="updateWompumDemoGrid(this.value)">