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

Tested with the Chrome extension.
This commit is contained in:
Bjørn Erik Pedersen 2025-02-13 18:01:47 +01:00
parent 02626ff921
commit 334ca06ac6
7 changed files with 17 additions and 15 deletions

View File

@ -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:prose-code:underline prose-a:prose-code:hover:text-primary/70 prose-a:prose-code:hover: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-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 */

View File

@ -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

View File

@ -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
>

View File

@ -17,10 +17,12 @@
<li>
<a
class="text-sm {{ if eq . $ }}
font-bold text-blue-600 focus:font-bold dark:text-blue-200
hover:text-blue-600 scroll-active
font-bold text-blue-600 hover:text-blue-600
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

View File

@ -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
>

View File

@ -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>

View File

@ -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