Skip to content

[BUG] 404 Page Text Color Not changing in Light Mode #407

@DevVivekk

Description

@DevVivekk

Description

When a user visits any 404 page when his system is in light mode then the text color and the background color both are dark which looks very unpleasant and bad experience for the user.

Steps to Reproduce

  1. Go to any 404 page. Example: https://opensox.ai/abc
  2. Make sure you are on light mode by browser settings
  3. Then you can see the background is dark and the text is also dark which makes difficult for the user to read.

Expected Behavior

The text-color should be changed when the user is in light mode. Though the website's preferred color theme is dark. Let the background be in dark but the text color needs to be changed to white styling in light mode.

  • You will notice that it doesn't includes text-foreground in the body class list adding this will fix it. But there's a catch the divider still remains in dark mode. To solve this, we can just override the default Next.js 404 class styling color through globals.css
  • Though there are multiple fixes of this. We can create a custom 404 page with same Next.js 404 styling and toggle it accordingly.
  • The current proposed fix is with least possible code changes keeping the current functionality as it is.

Watch: DEMO

Actual Behavior

Actual Behaviour

Version

No response

Environment

Browser

Additional Context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions