theme: Fix some dark mode accessibility as reported by Axe core

Tested with the Chrome extension.

assets/css/components/content.css

@@ -22,8 +22,8 @@
   /* lead */
   @apply prose-lead:text-slate-500 prose-lead:text-xl prose-lead:mt-2 sm:prose-lead:mt-4 prose-lead:leading-relaxed dark:prose-lead:text-slate-400;
   /* links */
-  @apply prose-a:text-primary prose-a:hover:text-primary/70 prose-a:underline;
+  @apply prose-a:text-primary dark:prose-a:text-blue-500 prose-a:hover:text-blue-500 dark:prose-a:hover:text-blue-400 prose-a:underline;
-  @apply prose-a:prose-code:underline prose-a:prose-code:hover:text-primary/70 prose-a:prose-code:hover:underline;
+  @apply prose-a:prose-code:underline prose-a:prose-code:hover:text-blue-500 prose-a:prose-code:hover:underline;
   /* pre */
   @apply prose-pre:text-gray-800 prose-pre:border-1 prose-pre:border-gray-100 prose-pre:bg-light dark:prose-pre:bg-dark dark:prose-pre:ring-1 dark:prose-pre:ring-slate-300/10;
   /* code */

layouts/partials/layouts/breadcrumbs.html

@@ -15,7 +15,7 @@
         {{ $isLast := eq $i (sub (len $ancestors) 1) }}
         <a
           href="{{ $p.RelPermalink }}"
-          class="truncate text-blue-600 hover:text-blue-500 {{ if $isCurrentSection }}
+          class="truncate text-blue-600 hover:text-blue-500 dark:text-blue-500 dark:hover:text-blue-400 {{ if $isCurrentSection }}
             current-section
           {{ end }}"
           >{{ $p.LinkTitle }}</a

layouts/partials/layouts/home/opensource.html

@@ -17,7 +17,7 @@
           <div class="relative pl-9">
             <dt class="inline font-bold text-gray-900 dark:text-gray-300">
               <svg
-                class="absolute top-1 left-1 size-5 text-blue-600"
+                class="absolute top-1 left-1 size-5 text-blue-500"
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
                 viewBox="0 0 24 24"
@@ -36,7 +36,7 @@
               {{ $githubInfo.stargazers_count }}
               stars on GitHub. Join the crowd and hit the
               <a
-                class="text-blue-600 hover:text-blue-700 font-semibold"
+                class="text-blue-500 hover:text-blue-500 font-semibold"
                 href="https://github.com/gohugoio/hugo"
                 >Star button</a
               >.
@@ -45,7 +45,7 @@
           <div class="relative pl-9">
             <dt class="inline font-bold text-gray-900 dark:text-gray-300">
               <svg
-                class="absolute top-1 left-1 size-5 text-blue-600"
+                class="absolute top-1 left-1 size-5 text-blue-500"
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
                 viewBox="0 0 24 24"
@@ -63,7 +63,7 @@
               Hugo has a large and active community. If you have questions or
               need help, you can ask in the
               <a
-                class="text-blue-600 hover:text-blue-700 font-semibold"
+                class="text-blue-500 hover:text-blue-500 font-semibold"
                 href="https://discourse.gohugo.io"
                 >Hugo forums</a
               >.
@@ -72,7 +72,7 @@
           <div class="relative pl-9">
             <dt class="inline font-bold text-gray-900 dark:text-gray-300">
               <svg
-                class="absolute top-1 left-1 size-5 text-blue-600"
+                class="absolute top-1 left-1 size-5 text-blue-500"
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
                 viewBox="0 0 24 24"
@@ -89,7 +89,7 @@
             <dd class="inline ml-1">
               Hugo has a fast
               <a
-                class="text-blue-600 hover:text-blue-700 font-semibold"
+                class="text-blue-500 hover:text-blue-500 font-semibold"
                 href="https://github.com/gohugoio/hugo/releases"
                 >release</a
               >

layouts/partials/layouts/in-this-section.html

@@ -17,10 +17,12 @@
         <li>
           <a
             class="text-sm {{ if eq . $ }}
-              font-bold text-blue-600 focus:font-bold dark:text-blue-200
+              font-bold text-blue-600 hover:text-blue-600
-              hover:text-blue-600 scroll-active
+              dark:hover:text-blue-200 dark:text-blue-200 focus:font-bold
+              scroll-active
             {{ else }}
-              text-blue-600 hover:text-blue-500
+              text-blue-600 hover:text-blue-500 dark:text-blue-500
+              dark:hover:text-blue-400
             {{ end }}"
             href="{{ .RelPermalink }}"
             >{{ .LinkTitle }}</a

layouts/partials/layouts/related.html

@@ -27,7 +27,7 @@
     {{- range . }}
       <li>
         <a
-          class="text-sm text-blue-600 hover:text-blue-500"
+          class="text-sm text-blue-600 hover:text-blue-500 dark:text-blue-500 dark:hover:text-blue-400"
           href="{{ .RelPermalink }}"
           >{{ .LinkTitle }}</a
         >

layouts/partials/layouts/search/button.html

@@ -3,7 +3,7 @@
     x-data @click="$dispatch('search-toggle')"
   {{ end }}
   type="button"
-  class="grid cursor-pointer w-full text-gray-500 lg:w-56 grid-cols-[auto_1fr_auto] items-center rounded-md px-2 sm:px-4 py-2 text-left text-xs/6 lg:text-sm/6 outline-0 sm:outline-1 -outline-offset-1 outline-gray-600">
+  class="grid cursor-pointer w-full text-gray-300 lg:w-56 grid-cols-[auto_1fr_auto] items-center rounded-md px-2 sm:px-4 py-2 text-left text-xs/6 lg:text-sm/6 outline-0 sm:outline-1 -outline-offset-1 outline-gray-600">
   <svg
     class="pointer-events-none -ml-0.5 mr-2 size-5 sm:size-4 fill-slate-400 dark:fill-slate-500">
     <use href="#icon--search"></use>

layouts/partials/layouts/toc.html

@@ -23,7 +23,7 @@
           href="#{{ .ID }}"
           x-ref="{{ .ID }}"
           @click.stop="setActive('{{ .ID }}')"
-          class="block pb-1 text-blue-600 hover:text-blue-500{{ if gt .Level 2 }}
+          class="block pb-1 text-blue-600 hover:text-blue-500 dark:text-blue-500 dark:hover:text-blue-400{{ if gt .Level 2 }}
             ml-2 lg:ml-3 text-sm
           {{ else }}
             text-sm