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