Skip to content

fix(docs): add custom 404 page with theme-aware styling#5787

Closed
ghost wants to merge 1 commit intomainfrom
unknown repository
Closed

fix(docs): add custom 404 page with theme-aware styling#5787
ghost wants to merge 1 commit intomainfrom
unknown repository

Conversation

@ghost
Copy link
Copy Markdown

@ghost ghost commented Mar 17, 2026

Problem

The 404 page on zod.dev uses Next.js's default error page, which:

  • Has a hardcoded black background that doesn't respect the Fumadocs theme
  • Makes the banner text invisible in light mode (white on white)
  • Doesn't center the 404 message
  • Shows a verbose tab title

Fix

Added a custom not-found.tsx in packages/docs/app/ that:

  • Uses Fumadocs theme tokens (text-fd-muted-foreground, text-fd-primary) for proper light/dark mode support
  • Centers the message vertically and horizontally
  • Includes a "Go back home" link
  • Sets tab title to "Page not found | Zod"

Fixes #5778

Next.js falls back to its default error page which uses a hardcoded
black background with color-scheme: dark, ignoring the Fumadocs theme.
This makes the banner text invisible in light mode and leaves the 404
message off-center.

Added a custom not-found.tsx that uses Fumadocs theme tokens for
colors and centers the message properly. Also sets a concise page
title ("Page not found | Zod").

Fixes #5778
@ghost ghost closed this by deleting the head repository Mar 26, 2026
This pull request was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

docs: 404 page has broken styling in light mode and is not centered

0 participants