Text on 404 page isn't legible in Safari dark mode

Open Beginner friendly
#112 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
62/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Stale
Tech stack
nextjs, tailwindcss
Domain
accessibility, frontend

Research direction

Start in app/(docs)/not-found.tsx, where the 404 page markup and proposed class changes are shown. Reproduce the page in Safari with dark mode enabled, then validate the suggested styling or identify the needed adjustment. Done means the 404 heading, message, and return-home link are legible in that environment.

Written by the indexing model from the issue text.

Description

Originally mentioned on Discord.

https://github.com/user-attachments/assets/499ddd4a-a67b-47cf-87df-c6c477704f2f

This is a patch that I didn't validate, AI generated, maybe it's close to an actual fix.

diff --git a/app/(docs)/not-found.tsx b/app/(docs)/not-found.tsx
index 634dc43..16c9bf2 100644
--- a/app/(docs)/not-found.tsx
+++ b/app/(docs)/not-found.tsx
@@ -5,11 +5,11 @@ export default function NotFound() {
     <div className="grid w-full min-w-0 max-w-[var(--fd-page-width)] flex-col place-items-center md:transition-[max-width]">
       <div className="prose flex flex-col gap-4 lg:flex-row">
         <div className="flex flex-col justify-center">
-          <h2 className="text-3xl font-bold">Page Not Found</h2>
-          <p>
+          <h2 className="text-3xl font-bold text-foreground">Page Not Found</h2>
+          <p className="text-muted-foreground">
             Could not find requested resource, please
             <br />
-            try again later or <Link href="/">return home</Link>.
+            try again later or <Link href="/" className="text-primary hover:text-primary/80">return home</Link>.
           </p>
         </div>

CC @PavelLaptev

Dominant language
MDX
Stars
40
Forks
40
Avg merge
11h 6m
Merged PRs (30d)
4

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from gitbutlerapp/gitbutler-docs

All issues in gitbutlerapp/gitbutler-docs

Similar issues

More Accessibility issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.