Forcing light mode on Vercel (NextJS?) defaults

[shadowlion]

Summary

Is there a way to force light mode (overriding System Settings and Dark Mode) for (app) pages that don't have a custom "Not Found" fallback? Using NextJS with Vercel deployments, and for dynamic routes that I attempt to access, but doesn't exist, it should give me the default 404 Not Found page. Also using TailwindCSS, but didn't know which configuration I should be attempting to refactor.

Additional information

No response

Example

No response

[icyJoseph]

I'd say, maybe it is best to define your own global-not-found.tsx file, if you have the latest version https://nextjs.org/docs/app/api-reference/file-conventions/not-found#global-not-foundjs-experimental - and there you can use the Error from next/error IIRC, which has a withDarkMode prop.

// src/components/CustomNotFound.tsx
'use client'
import Error from 'next/error'

export default function CustomNotFound() {
  return <Error withDarkMode={false} statusCode={404} />
}

Then define:

// src/app/global-not-found.tsx
import { CustomNotFound } from '../components/CustomNotFound'

export default function GlobalNotFound() {
  return <CustomNotFound />
}

And make sure the flag is activated:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  htmlLimitedBots: /.*/,
  experimental: {
    globalNotFound: true
  }
};

export default nextConfig;

And that'd should do the trick, you can see it here on this example I deployed:

• light mode 404: https://echo-ua-as-og.vercel.app/foo-bar
• dark mdoe regular page https://echo-ua-as-og.vercel.app/