From da4a6ea607f772f6512e6d868037d2cf327aee88 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Mon, 19 Jan 2026 09:50:13 +0000
Subject: [PATCH] fix: improve colour contrast + fix a few `alt` issues

---
 app/assets/main.css                           |  2 +-
 app/components/BlueskyComment.vue             | 32 +++++++++----------
 app/components/BlueskyComments.client.vue     |  8 ++---
 app/components/ExpandableTray.vue             |  2 +-
 app/components/TheHome.server.vue             | 16 +++++-----
 .../layout/TheSiteFooter.server.vue           |  4 +--
 app/components/layout/TheSiteHeader.vue       | 22 ++++++-------
 7 files changed, 43 insertions(+), 43 deletions(-)

diff --git a/app/assets/main.css b/app/assets/main.css
index 3193ca0e..daeaa353 100644
--- a/app/assets/main.css
+++ b/app/assets/main.css
@@ -9,7 +9,7 @@
   --background: theme('colors.gray.200');
   --accent: theme('colors.gray.100');
   --primary: theme('colors.gray.800');
-  --muted: 75 85 99;
+  --muted: 55 65 81;
 }
 
 :root {
diff --git a/app/components/BlueskyComment.vue b/app/components/BlueskyComment.vue
index 21026785..34ed84cf 100644
--- a/app/components/BlueskyComment.vue
+++ b/app/components/BlueskyComment.vue
@@ -74,7 +74,7 @@ const maxDepth = 4
       >
       <div
         v-else
-        class="rounded-full h-10 w-10 bg-gray-700 flex items-center justify-center text-sm"
+        class="rounded-full h-10 w-10 bg-gray-300 dark:bg-gray-700 flex items-center justify-center text-sm"
       >
         {{ (comment.author.displayName || comment.author.handle).charAt(0).toUpperCase() }}
       </div>
@@ -92,7 +92,7 @@ const maxDepth = 4
         </a>
         <span
           v-if="comment.author.displayName"
-          class="text-gray-500 text-sm truncate"
+          class="text-muted text-sm truncate"
         >
           @{{ comment.author.handle }}
         </span>
@@ -100,7 +100,7 @@ const maxDepth = 4
           :href="commentUrl"
           target="_blank"
           rel="noopener"
-          class="text-gray-500 text-sm hover:underline"
+          class="text-muted text-sm hover:underline"
         >
           <NuxtTime
             relative
@@ -119,7 +119,7 @@ const maxDepth = 4
             :href="getFeatureUrl(segment.features[0])"
             target="_blank"
             rel="noopener"
-            class="text-blue-400 hover:underline"
+            class="text-blue-600 dark:text-blue-400 hover:underline"
           >{{ segment.text }}</a>
           <template v-else>
             {{ segment.text }}
@@ -153,7 +153,7 @@ const maxDepth = 4
         :href="comment.embed.external.uri"
         target="_blank"
         rel="noopener"
-        class="mt-2 block border border-gray-700 rounded-lg overflow-hidden hover:border-gray-600 transition-colors"
+        class="mt-2 block border border-gray-300 dark:border-gray-700 rounded-lg overflow-hidden hover:border-gray-400 dark:hover:border-gray-600 transition-colors"
       >
         <div class="flex">
           <img
@@ -167,7 +167,7 @@ const maxDepth = 4
             <p class="text-sm font-medium truncate">
               {{ comment.embed.external.title }}
             </p>
-            <p class="text-xs text-gray-500 line-clamp-2 mt-1">
+            <p class="text-xs text-muted line-clamp-2 mt-1">
               {{ comment.embed.external.description }}
             </p>
           </div>
@@ -176,7 +176,7 @@ const maxDepth = 4
 
       <div
         v-if="comment.likeCount > 0 || comment.repostCount > 0"
-        class="flex items-center gap-4 mt-2 text-sm text-gray-500"
+        class="flex items-center gap-4 mt-2 text-sm text-muted"
       >
         <span v-if="comment.likeCount > 0">
           {{ comment.likeCount }} {{ comment.likeCount === 1 ? 'like' : 'likes' }}
@@ -188,7 +188,7 @@ const maxDepth = 4
 
       <div
         v-if="comment.replies.length > 0"
-        class="mt-4 flex flex-col gap-4 border-l border-gray-800"
+        class="mt-4 flex flex-col gap-4 border-l border-gray-300 dark:border-gray-800"
       >
         <BlueskyComment
           v-for="reply in comment.replies"
@@ -222,7 +222,7 @@ const maxDepth = 4
         >
         <div
           v-else
-          class="rounded-full h-5 w-5 bg-gray-700 flex items-center justify-center text-xs"
+          class="rounded-full h-5 w-5 bg-gray-300 dark:bg-gray-700 flex items-center justify-center text-xs"
         >
           {{ (comment.author.displayName || comment.author.handle).charAt(0).toUpperCase() }}
         </div>
@@ -237,7 +237,7 @@ const maxDepth = 4
       </a>
       <span
         v-if="comment.author.displayName"
-        class="text-gray-500 text-sm truncate"
+        class="text-muted text-sm truncate"
       >
         @{{ comment.author.handle }}
       </span>
@@ -245,7 +245,7 @@ const maxDepth = 4
         :href="commentUrl"
         target="_blank"
         rel="noopener"
-        class="text-gray-500 text-sm hover:underline"
+        class="text-muted text-sm hover:underline"
       >
         <NuxtTime
           relative
@@ -264,7 +264,7 @@ const maxDepth = 4
           :href="getFeatureUrl(segment.features[0])"
           target="_blank"
           rel="noopener"
-          class="text-blue-400 hover:underline"
+          class="text-blue-600 dark:text-blue-400 hover:underline"
         >{{ segment.text }}</a>
         <template v-else>
           {{ segment.text }}
@@ -298,7 +298,7 @@ const maxDepth = 4
       :href="comment.embed.external.uri"
       target="_blank"
       rel="noopener"
-      class="mt-2 block border border-gray-700 rounded-lg overflow-hidden hover:border-gray-600 transition-colors"
+      class="mt-2 block border border-gray-300 dark:border-gray-700 rounded-lg overflow-hidden hover:border-gray-400 dark:hover:border-gray-600 transition-colors"
     >
       <div class="flex">
         <img
@@ -312,7 +312,7 @@ const maxDepth = 4
           <p class="text-sm font-medium truncate">
             {{ comment.embed.external.title }}
           </p>
-          <p class="text-xs text-gray-500 line-clamp-2 mt-1">
+          <p class="text-xs text-muted line-clamp-2 mt-1">
             {{ comment.embed.external.description }}
           </p>
         </div>
@@ -322,7 +322,7 @@ const maxDepth = 4
     <template v-if="comment.replies.length > 0">
       <div
         v-if="depth < maxDepth"
-        class="flex flex-col border-l border-gray-800"
+        class="flex flex-col border-l border-gray-300 dark:border-gray-800"
       >
         <BlueskyComment
           v-for="reply in comment.replies"
@@ -336,7 +336,7 @@ const maxDepth = 4
         :href="getCommentUrl(comment.replies[0]!)"
         target="_blank"
         rel="noopener"
-        class="text-sm text-gray-500 hover:underline mt-2 block"
+        class="text-sm text-muted hover:underline mt-2 block"
       >
         {{ comment.replies.length }} more {{ comment.replies.length === 1 ? 'reply' : 'replies' }}...
       </a>
diff --git a/app/components/BlueskyComments.client.vue b/app/components/BlueskyComments.client.vue
index 5c75b1d2..0c8d24ed 100644
--- a/app/components/BlueskyComments.client.vue
+++ b/app/components/BlueskyComments.client.vue
@@ -125,7 +125,7 @@ const postUrl = computed(() => {
 
 <template>
   <div class="mt-12">
-    <hr class="block mx-auto my-8 content w-4 border-t-2 border-solid border-gray-700">
+    <hr class="block mx-auto my-8 content w-4 border-t-2 border-solid border-gray-300 dark:border-gray-700">
     <h2 class="text-xl mb-4">
       Comments
     </h2>
@@ -142,7 +142,7 @@ const postUrl = computed(() => {
     </div>
 
     <div v-else-if="error">
-      <p class="text-gray-500">
+      <p class="text-muted">
         Could not load comments.
         <a
           v-if="postUrl"
@@ -157,7 +157,7 @@ const postUrl = computed(() => {
     </div>
 
     <div v-else-if="!thread || thread.replies.length === 0">
-      <p class="text-gray-500 mb-4">
+      <p class="text-muted mb-4">
         No comments yet.
       </p>
       <a
@@ -175,7 +175,7 @@ const postUrl = computed(() => {
       v-else
       class="flex flex-col gap-6"
     >
-      <div class="flex items-center gap-4 text-sm text-gray-500">
+      <div class="flex items-center gap-4 text-sm text-muted">
         <span>{{ thread.replyCount }} {{ thread.replyCount === 1 ? 'reply' : 'replies' }}</span>
         <span>{{ thread.likeCount }} {{ thread.likeCount === 1 ? 'like' : 'likes' }}</span>
         <a
diff --git a/app/components/ExpandableTray.vue b/app/components/ExpandableTray.vue
index c03d440c..3acd5a3c 100644
--- a/app/components/ExpandableTray.vue
+++ b/app/components/ExpandableTray.vue
@@ -1,6 +1,6 @@
 <template>
   <span
-    class="gap-2 flex-shrink-0 self-start text-gray-500 inline-flex items-center flex-row leading-none rounded-full shadow bg-accent *:py-2 *:first:pl-4 *:last:pr-4 md:*:py-1 md:*:first:pl-2 md:*:last:pr-2"
+    class="gap-2 flex-shrink-0 self-start text-muted inline-flex items-center flex-row leading-none rounded-full shadow bg-accent *:py-2 *:first:pl-4 *:last:pr-4 md:*:py-1 md:*:first:pl-2 md:*:last:pr-2"
   >
     <slot />
   </span>
diff --git a/app/components/TheHome.server.vue b/app/components/TheHome.server.vue
index 23b5ef5d..ffd414d0 100644
--- a/app/components/TheHome.server.vue
+++ b/app/components/TheHome.server.vue
@@ -114,7 +114,7 @@ interface Talk {
       </p>
     </section>
     <template v-if="streams?.length">
-      <hr class="block mt-[5vw] my-8 content w-4 border-t-2 border-solid border-gray-700">
+      <hr class="block mt-[5vw] my-8 content w-4 border-t-2 border-solid border-gray-300 dark:border-gray-700">
       <section class="max-w-[37.50rem]">
         <h2 class="text-xl">
           some recent streams
@@ -133,7 +133,7 @@ interface Talk {
                 :to="video.link"
               >
                 <div
-                  class="relative flex flex-col justify-end bg-gray-900 w-[20rem] h-[8rem] overflow-hidden"
+                  class="relative flex flex-col justify-end bg-gray-100 dark:bg-gray-900 w-[20rem] h-[8rem] overflow-hidden"
                 >
                   <NuxtImg
                     class="aspect-[1.9] object-cover"
@@ -194,7 +194,7 @@ interface Talk {
       </section>
     </template>
     <template v-if="upcomingConferences?.length">
-      <hr class="block my-8 content w-4 border-t-2 border-solid border-gray-700">
+      <hr class="block my-8 content w-4 border-t-2 border-solid border-gray-300 dark:border-gray-700">
       <section
 
         class="max-w-[37.50rem]"
@@ -216,7 +216,7 @@ interface Talk {
                 class="bg-accent w-[20rem] justify-between flex flex-col"
               >
                 <div
-                  class="relative flex flex-col justify-center bg-gray-900 w-[20rem] h-[8rem] overflow-hidden"
+                  class="relative flex flex-col justify-center bg-gray-100 dark:bg-gray-900 w-[20rem] h-[8rem] overflow-hidden"
                 >
                   <NuxtImg
                     v-if="conference.image.url"
@@ -253,7 +253,7 @@ interface Talk {
         <!-- TODO: add link for conference organisers -->
       </section>
     </template>
-    <hr class="block my-8 content w-4 border-t-2 border-solid border-gray-700">
+    <hr class="block my-8 content w-4 border-t-2 border-solid border-gray-300 dark:border-gray-700">
     <section class="max-w-[37.50rem] overflow-visible">
       <h2 class="text-xl">
         recent talks
@@ -338,7 +338,7 @@ interface Talk {
         more talks &raquo;
       </NuxtLink>
     </section>
-    <hr class="block my-8 content w-4 border-t-2 border-solid border-gray-700">
+    <hr class="block my-8 content w-4 border-t-2 border-solid border-gray-300 dark:border-gray-700">
     <section class="max-w-[37.50rem] overflow-visible">
       <h2 class="text-xl">
         latest from the blog
@@ -374,7 +374,7 @@ interface Talk {
         more articles &raquo;
       </NuxtLink>
     </section>
-    <hr class="block my-8 content w-4 border-t-2 border-solid border-gray-700">
+    <hr class="block my-8 content w-4 border-t-2 border-solid border-gray-300 dark:border-gray-700">
     <section class="text-lg max-w-[50rem]">
       <h2 class="text-xl">
         contact me
@@ -430,7 +430,7 @@ interface Talk {
         </span>
       </p>
     </section>
-    <hr class="block my-8 content w-4 border-t-2 border-solid border-gray-700">
+    <hr class="block my-8 content w-4 border-t-2 border-solid border-gray-300 dark:border-gray-700">
     <section class="max-w-[75rem]">
       <header class="text-xl mb-4">
         special thanks to
diff --git a/app/components/layout/TheSiteFooter.server.vue b/app/components/layout/TheSiteFooter.server.vue
index 8ad5e2a8..587d3a5a 100644
--- a/app/components/layout/TheSiteFooter.server.vue
+++ b/app/components/layout/TheSiteFooter.server.vue
@@ -48,7 +48,7 @@ const year = new Date().getFullYear()
 <template>
   <div>
     <footer
-      class="before:content-empty before:block before:mx-auto before:my-4 before:content before:w-4 before:border-t-2 before:border-solid before:border-gray-700 relative text-center mx-auto px-4 py-2 max-w-[50rem]"
+      class="before:content-empty before:block before:mx-auto before:my-4 before:content before:w-4 before:border-t-2 before:border-solid before:border-gray-300 dark:before:border-gray-700 relative text-center mx-auto px-4 py-2 max-w-[50rem]"
     >
       <small>
         &copy; 2019-{{ year }} Daniel Roe.
@@ -72,7 +72,7 @@ const year = new Date().getFullYear()
             <span
               class="h-4 w-4 fill-current"
               :class="icon"
-              alt=""
+              aria-hidden="true"
             />
             <span class="sr-only">
               {{ name }}
diff --git a/app/components/layout/TheSiteHeader.vue b/app/components/layout/TheSiteHeader.vue
index 88ee587a..879f405c 100644
--- a/app/components/layout/TheSiteHeader.vue
+++ b/app/components/layout/TheSiteHeader.vue
@@ -90,11 +90,10 @@ function toggleMenu (input?: Event | boolean) {
       >
         <li>
           <NuxtLink
-            class="underlined-link hidden md:inline-block px-2 py-2 hover:opacity-100 active:opacity-100 focus:opacity-100 transition-opacity"
+            class="underlined-link hidden md:inline-block px-2 py-2 hover:text-primary active:text-primary focus:text-primary transition-colors"
             :class="{
-              'not-[:hover,:focus,:active]:after:border-transparent opacity-25':
+              'not-[:hover,:focus,:active]:after:border-transparent text-muted':
                 $route.path !== link.path,
-              'opacity-75': $route.path === link.path,
             }"
             :to="link.path"
           >
@@ -112,7 +111,7 @@ function toggleMenu (input?: Event | boolean) {
       >
         <span
           class="h-6 w-6 i-svg-spinners:90-ring-with-bg"
-          alt=""
+          aria-hidden="true"
         />
         <span class="sr-only"> Loading </span>
       </div>
@@ -124,7 +123,7 @@ function toggleMenu (input?: Event | boolean) {
       >
         <span
           class="h-5 w-5 i-ri:login-circle-line"
-          alt=""
+          aria-hidden="true"
         />
         <span class="sr-only"> Login </span>
       </NuxtLink>
@@ -136,15 +135,16 @@ function toggleMenu (input?: Event | boolean) {
       >
         <img
           class="h-8 w-8 md:h-6 md:w-6 rounded-full"
-          :class="{ 'border-[1px] border-yellow-400': $auth.user.sponsor }"
+          :class="{ 'border-[1px] border-amber-500 dark:border-yellow-400': $auth.user.sponsor }"
           :src="$auth.user.avatar"
+          :alt="`${$auth.user.name}'s avatar`"
         >
         <span
           v-if="$auth.user.sponsor"
-          class="absolute top-[-0.65rem] md:top-[-0.45rem] right-[-0.4rem] md:right-[-0.2rem] h-5 w-5 text-yellow-400"
-          alt=""
+          class="absolute top-[-0.65rem] md:top-[-0.45rem] right-[-0.4rem] md:right-[-0.2rem] h-5 w-5 text-amber-500 dark:text-yellow-400"
+          aria-hidden="true"
         >
-          <span class="i-ri:star-fill border border-solid border-gray-800" />
+          <span class="i-ri:star-fill border border-solid border-gray-200 dark:border-gray-800" />
         </span>
         <span class="sr-only"> Log out {{ $auth.user.name }} </span>
       </button>
@@ -157,7 +157,7 @@ function toggleMenu (input?: Event | boolean) {
           <span
             class="menu-icon h-8 w-8 md:h-6 md:w-6 i-ri:add-line"
             :style="{ viewTransitionName: showMenu ? undefined : 'menu' }"
-            alt=""
+            aria-hidden="true"
           />
           <span class="sr-only"> Open mobile navigation menu </span>
         </button>
@@ -176,7 +176,7 @@ function toggleMenu (input?: Event | boolean) {
               <span
                 class="menu-icon h-8 w-8 i-ri:close-fill"
                 :style="{ viewTransitionName: 'menu' }"
-                alt=""
+                aria-hidden="true"
               />
               <span class="sr-only"> Close mobile navigation menu </span>
             </button>
-- 
2.51.2