all repos — site @ ad9999a94c880abd7c68833d9a1023bdbdf4c911

source for my site, found at icyphox.sh 

templates: add dark mode css

Signed-off-by: Anirudh Oppiliappan <anirudh@tangled.sh>
Anirudh Oppiliappan anirudh@tangled.sh
Wed, 28 May 2025 19:13:43 +0300
commit

ad9999a94c880abd7c68833d9a1023bdbdf4c911

parent

49716987eca7ec959b04142d7be1de5d4491c4e7

9 files changed, 22 insertions(+), 21 deletions(-)

jump to
M input.css → input.css 
@@ -36,7 +36,7 @@
     h2 {
         @apply text-xl;
         @apply font-normal;
-        @apply text-darker;
+        @apply text-darker dark:text-dark-darker;
         @apply pt-4 pb-3;
     }
 

@@ -87,7 +87,7 @@ }
 
             .footnotes {
                 hr {
-                    @apply border-t border-light-gray pt-6 mt-6;
+                    @apply border-t dark:border-dark-light-gray border-light-gray pt-6 mt-6;
                 }
             }
 

@@ -102,7 +102,7 @@ @apply w-4 h-4 text-xs inline-block flex-shrink-0;
             }
 
             .footnote-ref a {
-                @apply no-underline text-light rounded-full text-center bg-cyan border-b-0;
+                @apply no-underline dark:text-dark-light text-light rounded-full text-center bg-cyan border-b-0;
                 @apply w-3 h-3 text-[0.6rem] leading-3 inline-block;
             }
 

@@ -131,8 +131,9 @@ @apply my-4 mx-auto;
     }
 
     a {
-        @apply text-darker dark:text-gray;
+        @apply text-darker dark:text-dark-darker;
         @apply border-b border-medium-gray hover:border-gray;
+        @apply dark:border-dark-medium-gray dark:hover:border-dark-gray;
     }
 
     img {
M templates/blog.html → templates/blog.html 
@@ -30,11 +30,11 @@ <a href=/{{ .Meta.slug }}>{{ .Meta.title }}</a>
                       {{ if .Meta.draft }}
                         (<span class="text-red-200">draft</span>)
                       {{ end }}
-                      <p class="text-gray">{{ .Meta.subtitle }}</p>
+                      <p class="text-gray dark:text-dark-gray">{{ .Meta.subtitle }}</p>
                     </div>
                     {{ $dateStr := .Meta.date }}
                     {{ $date := parsedate $dateStr }}
-                    <div class="index-date text-gray lowercase">{{ $date.Format "02 Jan, 2006" }}</div>
+                    <div class="index-date dark:text-dark-gray text-gray lowercase">{{ $date.Format "02 Jan, 2006" }}</div>
                   </div>
                 </li>
             {{ end }}
M templates/index.html → templates/index.html 
@@ -13,7 +13,7 @@ <div class="sidenav">
         {{ template "partials/nav.html" }}
       </div>
       <article>
-        <section class="my-12 py-12 border-b border-light-gray">
+        <section class="my-12 py-12 border-b dark:border-dark-light-gray border-light-gray">
         {{ .Body }}
         </section>
 

@@ -29,11 +29,11 @@ <a href=/{{ .Meta.slug }}>{{ .Meta.title }}</a>
                       {{ if .Meta.draft }}
                         (<span class="draft">draft</span>)
                       {{ end }}
-                      <p class="text-gray">{{ .Meta.subtitle }}</p>
+                      <p class="dark:text-dark-gray text-gray">{{ .Meta.subtitle }}</p>
                     </div>
                     {{ $dateStr := .Meta.date }}
                     {{ $date := parsedate $dateStr }}
-                    <div class="text-gray lowercase">{{ $date.Format "02 Jan, 2006" }}</div>
+                    <div class="dark:text-dark-gray text-gray lowercase">{{ $date.Format "02 Jan, 2006" }}</div>
                     </div>
                   </li>
               {{ end }}
M templates/partials/footer.html → templates/partials/footer.html 
@@ -1,5 +1,5 @@
-<div class="border-t border-light-gray pt-6 mt-6">
-    <p class="text-gray">
+<div class="border-t border-light-gray dark:border-dark-light-gray pt-6 mt-6">
+    <p class="dark:text-dark-gray text-gray">
         Follow via <a class="text-cyan border-b border-b-cyan" href="/blog/feed.xml">RSS</a>,
         <a class="border-b border-b-cyan text-cyan" href="https://bsky.app/profile/icyphox.sh">Bluesky</a>,
         <a class="border-b border-b-cyan text-cyan" href="https://x.com/icyphox">X</a>, and
M templates/partials/nav.html → templates/partials/nav.html 
@@ -2,7 +2,7 @@ <nav class="flex items-center justify-between w-full">
   <div class="flex-shrink-0">
     <a href="/">
         <svg
-            class="max-h-10 max-w-10 fill-fg"
+            class="max-h-10 max-w-10 fill-fg dark:fill-dark-fg"
             version="1.0"
             xmlns="http://www.w3.org/2000/svg"
             width="619.000000pt"
M templates/photoindex.html → templates/photoindex.html 
@@ -35,11 +35,11 @@ <li class="list-none py-2">
           <div class="flex md:flex-row flex-col justify-between">
           <div>
             <a href=/photos/{{ .Meta.slug }}>{{ .Meta.title }} &mdash; {{ .Meta.season }}</a>
-            <p class="text-gray">{{ .Meta.camera }} · {{ .Meta.lens }} · {{ .Meta.film }}</p>
+            <p class="dark:text-dark-gray text-gray">{{ .Meta.camera }} · {{ .Meta.lens }} · {{ .Meta.film }}</p>
           </div>
           {{ $dateStr := .Meta.date }}
           {{ $date := parsedate $dateStr }}
-          <div class="text-gray lowercase">{{ $date.Format "02 Jan, 2006" }}</div>
+          <div class="dark:text-dark-gray text-gray lowercase">{{ $date.Format "02 Jan, 2006" }}</div>
           </div>
         </li>
       {{ end }}
M templates/photos.html → templates/photos.html 
@@ -13,9 +13,9 @@ <div>
       {{ template "partials/nav.html" }}
     </div>
     <article align="left">
-      <h1>{{ .Meta.title }} &mdash; {{ .Meta.season }}</h1>
-      <h2 class="subtitle"> {{ .Meta.camera }} · {{ .Meta.lens }} · {{ .Meta.film }} </h2>
-      <div class="columns-1 md:columns-2">
+      <h1 class="-mb-4">{{ .Meta.title }} &mdash; {{ .Meta.season }}</h1>
+      <h2 class="text-gray dark:text-dark-gray"> {{ .Meta.camera }} · {{ .Meta.lens }} · {{ .Meta.film }} </h2>
+      <div class="columns-1 md:columns-2 mt-12">
       {{ $photos := .Yaml.photos }}
       {{ $d := .Yaml.defaults }}
       {{ range $photos }}
M templates/reading.html → templates/reading.html 
@@ -27,9 +27,9 @@ <li class="list-none py-2">
               <div class="flex md:flex-row flex-col justify-between">
                 <div>
                   <a href="{{ $book.link }}">{{ $book.name }}</a>
-                  <p class="text-gray">{{ $book.author }}</p>
+                  <p class="dark:text-dark-gray text-gray">{{ $book.author }}</p>
                 </div>
-                <span class="text-gray lowercase">{{ $book.status }}</span>
+                <span class="dark:text-dark-gray text-gray lowercase">{{ $book.status }}</span>
               </div>
             </li>
           {{- end }}
M templates/text.html → templates/text.html 
@@ -13,7 +13,7 @@ <div>
         {{ template "partials/nav.html" }}
       </div>
       <article>
-        <section class="text-gray lowercase">
+        <section class="dark:text-dark-gray text-gray lowercase">
         {{ $dateStr := index .Meta "date" }}
         {{ $date := parsedate $dateStr }}
         {{ $date.Format "02 Jan, 2006" }}

@@ -23,7 +23,7 @@ <section>
         <h1 class="-mb-4">{{ index .Meta "title" }} {{ if eq .Meta.draft "true" }}
             <span class="text-base text-red-400">[draft]</span>{{ end }}
         </h1>
-        <h2 class="text-gray">{{ index .Meta "subtitle" }}</h2>
+        <h2 class="text-gray dark:text-dark-gray">{{ index .Meta "subtitle" }}</h2>
         <div class="mt-12">
         {{ .Body }}
         </div>