From a5a74f8028a52cdf0cbf5d7980a14d2a6858d948 Mon Sep 17 00:00:00 2001
From: Daniel Haven <49914607+danielh-official@users.noreply.github.com>
Date: Sat, 13 Dec 2025 13:58:54 -0500
Subject: [PATCH] Add dark styling for system theme

Issue: https://github.com/tighten/jigsaw-blog-template/issues/100
---
 source/404.blade.php                             |  2 +-
 source/_assets/css/base.css                      |  7 +++++++
 source/_assets/css/main.css                      |  4 +++-
 source/_components/newsletter-signup.blade.php   |  8 ++++----
 source/_components/post-preview-inline.blade.php |  4 ++--
 source/_components/search.blade.php              | 14 +++++++-------
 source/_layouts/main.blade.php                   |  8 ++++----
 source/_layouts/post.blade.php                   |  4 ++--
 source/_nav/menu-responsive.blade.php            |  2 +-
 source/_nav/menu.blade.php                       |  6 +++---
 source/blog.blade.php                            |  6 +++---
 source/contact.blade.php                         | 14 +++++++-------
 source/index.blade.php                           |  4 ++--
 13 files changed, 46 insertions(+), 37 deletions(-)

diff --git a/source/404.blade.php b/source/404.blade.php
index 01192fb..1e56084 100644
--- a/source/404.blade.php
+++ b/source/404.blade.php
@@ -1,7 +1,7 @@
 @extends('_layouts.main')
 
 @section('body')
-    <div class="flex flex-col items-center text-gray-700 mt-32">
+    <div class="flex flex-col items-center mt-32">
         <h1 class="text-6xl font-light leading-none mb-2">404</h1>
 
         <h2 class="text-3xl">Page not found.</h2>
diff --git a/source/_assets/css/base.css b/source/_assets/css/base.css
index 17a75f0..2d8a7c0 100644
--- a/source/_assets/css/base.css
+++ b/source/_assets/css/base.css
@@ -7,6 +7,8 @@ a {
     @apply no-underline;
     @apply text-blue-500;
     @apply hover:text-blue-700;
+    @apply dark:text-blue-300;
+    @apply dark:hover:text-blue-500;
 }
 
 blockquote {
@@ -18,6 +20,8 @@ blockquote {
     @apply text-gray-800;
     @apply border-l-4;
     @apply border-blue-400;
+    @apply dark:text-gray-300;
+    @apply dark:border-blue-400;
 }
 
 code {
@@ -26,6 +30,7 @@ code {
     @apply text-sm;
     @apply bg-gray-300;
     @apply rounded-sm;
+    @apply dark:bg-gray-700;
 }
 
 code.hljs {
@@ -50,6 +55,7 @@ h6 {
     @apply mb-4;
     @apply text-gray-900;
     @apply leading-tight;
+    @apply dark:text-gray-300;
 
     &:first-child {
         @apply mt-0;
@@ -127,6 +133,7 @@ pre {
     @apply my-6;
     @apply text-base;
     @apply bg-gray-200;
+    @apply dark:bg-gray-800;
     @apply leading-loose;
     @apply rounded-sm;
     @apply shadow-sm;
diff --git a/source/_assets/css/main.css b/source/_assets/css/main.css
index 81506f8..89b9622 100644
--- a/source/_assets/css/main.css
+++ b/source/_assets/css/main.css
@@ -38,7 +38,9 @@
 
 :not(pre) > code[class*="language-"],
 pre[class*="language-"] {
-  background: #e5e7eb;
+  @apply bg-[#e5e7eb];
+  @apply dark:bg-[#1f2937];
+  @apply dark:text-white;
 }
 
 .token.operator,
diff --git a/source/_components/newsletter-signup.blade.php b/source/_components/newsletter-signup.blade.php
index 00d6c50..9f87ff6 100644
--- a/source/_components/newsletter-signup.blade.php
+++ b/source/_components/newsletter-signup.blade.php
@@ -1,10 +1,10 @@
-<div class="flex justify-center items-center bg-gray-200 border border-gray-400 rounded-lg p-4 md:p-8 md:px-12 my-12 shadow-sm lg:-mx-12">
+<div class="flex justify-center items-center border border-gray-400 rounded-lg p-4 md:p-8 md:px-12 my-12 shadow-sm lg:-mx-12">
     <form action="" method="post" class="w-full max-w-3xl">
         <div class="flex flex-col items-center w-full gap-3 md:gap-4">
-            <div class="text-xl md:text-2xl font-bold text-gray-900 text-center">Sign up for our newsletter</div>
+            <div class="text-xl md:text-2xl font-bold text-center">Sign up for our newsletter</div>
             <div class="flex w-full max-w-lg">
-                <input type="email" required name="email" placeholder="Email address" class="text-sm flex-1 rounded-l-md px-3 py-3 border-none focus:ring-2 focus:ring-blue-400 focus:outline-none bg-white text-gray-700 placeholder-gray-400">
-                <button type="submit" class="text-sm rounded-r-md px-4 md:px-8 py-3 font-medium bg-blue-400 text-white hover:bg-blue-500 transition-colors duration-150">Subscribe</button>
+                <input type="email" required name="email" placeholder="Email address" class="text-sm flex-1 rounded-l-md px-3 py-3 border-gray-400 border-2 focus:ring-2 focus:ring-blue-400 focus:outline-none placeholder-gray-400">
+                <button type="submit" class="text-sm rounded-r-md px-4 md:px-8 py-3 font-medium bg-blue-400 hover:bg-blue-500 transition-colors duration-150">Subscribe</button>
             </div>
             <div class="text-sm">Need forms? Try <a href="https://fieldgoal.io/" class="underline" target="_blank">FieldGoal</a></div>
         </div>
diff --git a/source/_components/post-preview-inline.blade.php b/source/_components/post-preview-inline.blade.php
index 2b18bd8..3a08f01 100644
--- a/source/_components/post-preview-inline.blade.php
+++ b/source/_components/post-preview-inline.blade.php
@@ -1,5 +1,5 @@
 <div class="flex flex-col mb-4">
-    <p class="text-gray-700 font-medium my-2">
+    <p class="font-medium my-2">
         {{ $post->getDate()->format('F j, Y') }}
     </p>
 
@@ -7,7 +7,7 @@
         <a
             href="{{ $post->getUrl() }}"
             title="Read more - {{ $post->title }}"
-            class="text-gray-900 font-extrabold"
+            class="font-extrabold"
         >{{ $post->title }}</a>
     </h2>
 
diff --git a/source/_components/search.blade.php b/source/_components/search.blade.php
index dc6dfb9..d25d720 100644
--- a/source/_components/search.blade.php
+++ b/source/_components/search.blade.php
@@ -33,7 +33,7 @@
     class="flex flex-1 justify-end items-center text-right px-4"
 >
     <div
-        class="absolute md:relative w-full justify-end bg-white left-0 top-0 z-10 mt-7 md:mt-0 px-4 md:px-0"
+        class="absolute md:relative w-full justify-end left-0 top-0 z-10 mt-7 md:mt-0 px-4 md:px-0"
         :class="{'hidden md:flex': ! searching}"
     >
         <label for="search" class="hidden">Search</label>
@@ -42,7 +42,7 @@ class="absolute md:relative w-full justify-end bg-white left-0 top-0 z-10 mt-7 m
             id="search"
             x-model="query"
             x-ref="search"
-            class="relative block h-10 w-full lg:w-1/2 lg:focus:w-3/4 bg-gray-100 border border-gray-500 focus:border-blue-400 outline-none cursor-pointer text-gray-700 px-4 pb-0 pt-px transition-all duration-200 ease-out bg-no-repeat bg-[0.8rem] indent-[1.2em]"
+            class="relative block h-10 w-full lg:w-1/2 lg:focus:w-3/4 border border-gray-500 focus:border-blue-400 outline-none cursor-pointer px-4 pb-0 pt-px transition-all duration-200 ease-out bg-no-repeat bg-position-[0.8rem] indent-[1.2em]"
             :class="{ 'rounded-b-none rounded-t-lg': query, 'rounded-3xl': !query }"
             style="background-image: url('/assets/img/magnifying-glass.svg')"
             autocomplete="off"
@@ -70,10 +70,10 @@ class="absolute top-0 right-0 leading-snug font-400 text-3xl text-blue-500 hover
             x-transition:leave-end="opacity-0"
             class="absolute left-0 right-0 md:inset-auto w-full lg:w-3/4 text-left mb-4 md:mt-10"
         >
-            <div class="flex flex-col bg-white border border-b-0 border-t-0 border-blue-400 rounded-b-lg shadow-search mx-4 md:mx-0">
+            <div class="flex flex-col border border-b-0 border-t-0 border-blue-400 rounded-b-lg shadow-search mx-4 md:mx-0 bg-gray-300 dark:bg-gray-700">
                 <template x-for="(result, index) in results">
                     <a
-                        class="bg-white hover:bg-blue-100 border-b border-blue-400 text-xl cursor-pointer p-4"
+                        class="hover:bg-blue-100 dark:hover:bg-gray-600 border-b border-blue-400 text-xl cursor-pointer p-4"
                         :class="{ 'rounded-b-lg': (index === results.length - 1) }"
                         :href="result.item.link"
                         :title="result.item.title"
@@ -82,12 +82,12 @@ class="bg-white hover:bg-blue-100 border-b border-blue-400 text-xl cursor-pointe
                     >
                         <span x-html="result.item.title"></span>
 
-                        <span class="block font-normal text-gray-700 text-sm my-1" x-html="result.item.snippet"></span>
+                        <span class="block font-normal text-sm my-1" x-html="result.item.snippet"></span>
                     </a>
                 </template>
                 <div
                     x-show="! results.length"
-                    class="bg-white w-full hover:bg-blue-100 border-b border-blue-400 rounded-b-lg shadow cursor-pointer p-4"
+                    class="w-full hover:bg-blue-100 dark:hover:bg-gray-600 border-b border-blue-400 rounded-b-lg shadow cursor-pointer p-4"
                 >
                     <p class="my-0">No results for <strong x-html="query"></strong></p>
                 </div>
@@ -98,7 +98,7 @@ class="bg-white w-full hover:bg-blue-100 border-b border-blue-400 rounded-b-lg s
     <button
         title="Start searching"
         type="button"
-        class="flex md:hidden bg-gray-100 hover:bg-blue-100 justify-center items-center border border-gray-500 rounded-full focus:outline-none h-10 px-3"
+        class="flex md:hidden hover:bg-blue-100 justify-center items-center border border-gray-500 rounded-full focus:outline-none h-10 px-3"
         @click.prevent="showInput"
     >
         <img src="/assets/img/magnifying-glass.svg" alt="search icon" class="h-4 w-4 max-w-none">
diff --git a/source/_layouts/main.blade.php b/source/_layouts/main.blade.php
index 277c46e..4c2f304 100644
--- a/source/_layouts/main.blade.php
+++ b/source/_layouts/main.blade.php
@@ -29,14 +29,14 @@
         <script defer type="module" src="{{ vite('source/_assets/js/main.js') }}"></script>
     </head>
 
-    <body class="flex flex-col justify-between min-h-screen bg-gray-100 text-gray-800 leading-normal font-sans">
-        <header class="flex items-center shadow bg-white border-b h-24 py-4" role="banner">
+    <body class="flex flex-col justify-between min-h-screen bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-white leading-normal font-sans">
+        <header class="flex items-center shadow border-b h-24 py-4" role="banner">
             <div class="container flex items-center max-w-8xl mx-auto px-4 lg:px-8">
                 <div class="flex items-center">
                     <a href="/" title="{{ $page->siteName }} home" class="inline-flex items-center">
                         <img class="h-8 md:h-10 mr-3" src="/assets/img/logo.svg" alt="{{ $page->siteName }} logo" />
 
-                        <h1 class="text-lg md:text-2xl text-blue-800 font-semibold hover:text-blue-600 my-0">{{ $page->siteName }}</h1>
+                        <h1 class="text-lg md:text-2xl font-semibold hover:text-blue-600 my-0">{{ $page->siteName }}</h1>
                     </a>
                 </div>
 
@@ -56,7 +56,7 @@
             @yield('body')
         </main>
 
-        <footer class="bg-white text-center text-sm mt-12 py-4" role="contentinfo">
+        <footer class="text-center text-sm mt-12 py-4" role="contentinfo">
             <ul class="flex flex-col md:flex-row justify-center list-none">
                 <li class="md:mr-2">
                     &copy; <a href="https://tighten.co" title="Tighten website">Tighten</a> {{ date('Y') }}.
diff --git a/source/_layouts/post.blade.php b/source/_layouts/post.blade.php
index 994c1f7..05188b6 100644
--- a/source/_layouts/post.blade.php
+++ b/source/_layouts/post.blade.php
@@ -11,14 +11,14 @@
 
     <h1 class="leading-none mb-2">{{ $page->title }}</h1>
 
-    <p class="text-gray-700 text-xl md:mt-0">{{ $page->author }}  •  {{ date('F j, Y', $page->date) }}</p>
+    <p class="text-gray-700 dark:text-gray-300 text-xl md:mt-0">{{ $page->author }}  •  {{ date('F j, Y', $page->date) }}</p>
 
     @if ($page->categories)
         @foreach ($page->categories as $i => $category)
             <a
                 href="{{ '/blog/categories/' . $category }}"
                 title="View posts in {{ $category }}"
-                class="inline-block bg-gray-300 hover:bg-blue-200 leading-loose tracking-wide text-gray-800 uppercase text-xs font-semibold rounded-sm mr-4 px-3 pt-px"
+                class="inline-block bg-gray-300 dark:bg-gray-500 hover:bg-blue-200 leading-loose tracking-wide uppercase text-xs font-semibold rounded-sm mr-4 px-3 pt-px"
             >{{ $category }}</a>
         @endforeach
     @endif
diff --git a/source/_nav/menu-responsive.blade.php b/source/_nav/menu-responsive.blade.php
index 56954ad..332249e 100644
--- a/source/_nav/menu-responsive.blade.php
+++ b/source/_nav/menu-responsive.blade.php
@@ -1,4 +1,4 @@
-<nav id="js-nav-menu" class="w-auto px-2 pt-6 pb-2 bg-gray-200 shadow hidden lg:hidden">
+<nav id="js-nav-menu" class="w-auto px-2 pt-6 pb-2 shadow hidden lg:hidden">
     <ul class="my-0">
         <li class="pl-4">
             <a
diff --git a/source/_nav/menu.blade.php b/source/_nav/menu.blade.php
index b8708d8..0c60d1f 100644
--- a/source/_nav/menu.blade.php
+++ b/source/_nav/menu.blade.php
@@ -1,16 +1,16 @@
 <nav class="hidden lg:flex items-center justify-end text-lg">
     <a title="{{ $page->siteName }} Blog" href="/blog"
-        class="ml-6 text-gray-700 hover:text-blue-600 {{ $page->isActive('/blog') ? 'active text-blue-600' : '' }}">
+        class="ml-6  hover:text-blue-600 {{ $page->isActive('/blog') ? 'active text-blue-600' : '' }}">
         Blog
     </a>
 
     <a title="{{ $page->siteName }} About" href="/about"
-        class="ml-6 text-gray-700 hover:text-blue-600 {{ $page->isActive('/about') ? 'active text-blue-600' : '' }}">
+        class="ml-6  hover:text-blue-600 {{ $page->isActive('/about') ? 'active text-blue-600' : '' }}">
         About
     </a>
 
     <a title="{{ $page->siteName }} Contact" href="/contact"
-        class="ml-6 text-gray-700 hover:text-blue-600 {{ $page->isActive('/contact') ? 'active text-blue-600' : '' }}">
+        class="ml-6 hover:text-blue-600 {{ $page->isActive('/contact') ? 'active text-blue-600' : '' }}">
         Contact
     </a>
 </nav>
diff --git a/source/blog.blade.php b/source/blog.blade.php
index e43ac53..47cae06 100644
--- a/source/blog.blade.php
+++ b/source/blog.blade.php
@@ -26,7 +26,7 @@
                 <a
                     href="{{ $previous }}"
                     title="Previous Page"
-                    class="bg-gray-200 hover:bg-gray-400 rounded mr-3 px-5 py-3"
+                    class="bg-gray-200 hover:bg-gray-400 dark:bg-white dark:hover:bg-gray-200 rounded mr-3 px-5 py-3"
                 >&LeftArrow;</a>
             @endif
 
@@ -34,7 +34,7 @@ class="bg-gray-200 hover:bg-gray-400 rounded mr-3 px-5 py-3"
                 <a
                     href="{{ $path }}"
                     title="Go to Page {{ $pageNumber }}"
-                    class="bg-gray-200 hover:bg-gray-400 rounded mr-3 px-5 py-3 {{ $pagination->currentPage == $pageNumber ? 'text-blue-600' : 'text-blue-700' }}"
+                    class="bg-gray-200 hover:bg-gray-400 dark:bg-white dark:hover:bg-gray-200 rounded mr-3 px-5 py-3 {{ $pagination->currentPage == $pageNumber ? 'text-blue-600' : 'text-blue-700' }}"
                 >{{ $pageNumber }}</a>
             @endforeach
 
@@ -42,7 +42,7 @@ class="bg-gray-200 hover:bg-gray-400 rounded mr-3 px-5 py-3 {{ $pagination->curr
                 <a
                     href="{{ $next }}"
                     title="Next Page"
-                    class="bg-gray-200 hover:bg-gray-400 rounded mr-3 px-5 py-3"
+                    class="bg-gray-200 hover:bg-gray-400 dark:bg-white dark:hover:bg-gray-200 rounded mr-3 px-5 py-3"
                 >&RightArrow;</a>
             @endif
         </nav>
diff --git a/source/contact.blade.php b/source/contact.blade.php
index 4d4edab..abcb588 100644
--- a/source/contact.blade.php
+++ b/source/contact.blade.php
@@ -14,7 +14,7 @@
 <form action="/contact" class="mb-12">
     <div class="flex flex-wrap mb-6 -mx-3">
         <div class="w-full md:w-1/2 mb-6 md:mb-0 px-3">
-            <label class="block mb-2 text-gray-800 text-sm font-semibold" for="contact-name">
+            <label class="block mb-2 text-sm font-semibold" for="contact-name">
                 Name
             </label>
 
@@ -23,13 +23,13 @@
                 id="contact-name"
                 placeholder="Jane Doe"
                 name="name"
-                class="bg-white block w-full border shadow-sm rounded-lg outline-hidden mb-2 px-4 py-3"
+                class="block w-full border shadow-sm rounded-lg outline-hidden mb-2 px-4 py-3"
                 required
             >
         </div>
 
         <div class="w-full px-3 md:w-1/2">
-            <label class="block text-gray-800 text-sm font-semibold mb-2" for="contact-email">
+            <label class="block text-sm font-semibold mb-2" for="contact-email">
                 Email Address
             </label>
 
@@ -38,14 +38,14 @@ class="bg-white block w-full border shadow-sm rounded-lg outline-hidden mb-2 px-
                 id="contact-email"
                 placeholder="email@domain.com"
                 name="email"
-                class="bg-white block w-full border shadow-sm rounded-lg outline-hidden mb-2 px-4 py-3"
+                class="block w-full border shadow-sm rounded-lg outline-hidden mb-2 px-4 py-3"
                 required
             >
         </div>
     </div>
 
     <div class="w-full mb-12">
-        <label class="block text-gray-800 text-sm font-semibold mb-2" for="contact-message">
+        <label class="block text-sm font-semibold mb-2" for="contact-message">
             Message
         </label>
 
@@ -53,7 +53,7 @@ class="bg-white block w-full border shadow-sm rounded-lg outline-hidden mb-2 px-
             id="contact-message"
             rows="4"
             name="message"
-            class="bg-white block w-full border shadow-sm rounded-lg outline-hidden appearance-none mb-2 px-4 py-3"
+            class="block w-full border shadow-sm rounded-lg outline-hidden appearance-none mb-2 px-4 py-3"
             placeholder="A lovely message here."
             required
         ></textarea>
@@ -63,7 +63,7 @@ class="bg-white block w-full border shadow-sm rounded-lg outline-hidden appearan
         <input
             type="submit"
             value="Submit"
-            class="block bg-blue-500 hover:bg-blue-600 text-white text-sm font-semibold leading-snug tracking-wide uppercase shadow-sm rounded-lg cursor-pointer px-6 py-3"
+            class="block bg-blue-500 hover:bg-blue-600 text-sm font-semibold leading-snug tracking-wide uppercase shadow-sm rounded-lg cursor-pointer px-6 py-3"
         >
     </div>
 </form>
diff --git a/source/index.blade.php b/source/index.blade.php
index 6dad88c..0223c27 100644
--- a/source/index.blade.php
+++ b/source/index.blade.php
@@ -7,12 +7,12 @@
                 <img src="{{ $featuredPost->cover_image }}" alt="{{ $featuredPost->title }} cover image" class="mb-6">
             @endif
 
-            <p class="text-gray-700 font-medium my-2">
+            <p class="font-medium my-2">
                 {{ $featuredPost->getDate()->format('F j, Y') }}
             </p>
 
             <h2 class="text-3xl mt-0">
-                <a href="{{ $featuredPost->getUrl() }}" title="Read {{ $featuredPost->title }}" class="text-gray-900 font-extrabold">
+                <a href="{{ $featuredPost->getUrl() }}" title="Read {{ $featuredPost->title }}" class="font-extrabold">
                     {{ $featuredPost->title }}
                 </a>
             </h2>