Force page to a theme with Next 13 app dir

[waraness99]

How can we force a specific page to a theme using Next 14 app dir?

Since there is no more _app file, how can i do this using layout?

/pages/awesome-page.js

const Page = () => { ... }
Page.theme = 'dark'
export default Page

_app

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider forcedTheme={Component.theme || null}>
      <Component {...pageProps} />
    </ThemeProvider>
  )
}

[KimboTodd]

Is this what you're looking for? https://github.com/pacocoursey/next-themes#with-app

[waraness99]

no i already have this implementation. i'm looking for a way to force dark mode on a specific page with this app dir implementation. the provided example only works with page dir, because inside layout we can only access children and not Component or pageProps

[subhamBharadwaz]

no i already have this implementation. i'm looking for a way to force dark mode on a specific page with this app dir implementation. the provided example only works with page dir, because inside layout we can only access children and not Component or pageProps

Did you find any solution?

[bradenhilton]

A decent (but imperfect) solution would be to check the pathname against known values. Something like this:

'use client';

import { usePathname } from 'next/navigation';
import { ThemeProvider } from 'next-themes';
import { ThemeProviderProps } from 'next-themes/dist/types';

const getPageTheme = (pathname: string): ThemeProviderProps['forcedTheme'] => {
  // Add pathnames without a '/' prefix here.
  // '' matches the homepage.
  const darkModePages = ['', 'test'];
  const lightModePages = ['test2'];

  // Exact matches, more strict
  if (
    darkModePages.some((name) => pathname === `/${name}`) &&
    lightModePages.some((name) => pathname === `/${name}`)
  ) {
    return;
  }
  if (darkModePages.some((name) => pathname === `/${name}`)) return 'dark';
  if (lightModePages.some((name) => pathname === `/${name}`)) return 'light';

  // Starts with, less strict
  if (
    darkModePages.some((name) => pathname.startsWith(`/${name}`)) &&
    lightModePages.some((name) => pathname.startsWith(`/${name}`))
  ) {
    return;
  }
  if (darkModePages.some((name) => pathname.startsWith(`/${name}`)))
    return 'dark';
  if (lightModePages.some((name) => pathname.startsWith(`/${name}`)))
    return 'light';

  return;
};

export function Providers({ children }: React.PropsWithChildren) {
  const pathname = usePathname();
  return (
    <>
      <ThemeProvider attribute='class' forcedTheme={getPageTheme(pathname)}>
        {children}
      </ThemeProvider>
    </>
  )
}

// "/" -> "dark"
// "/test" -> "dark"
// "/test2" -> "light"
// "/test3" -> "dark"
// "/testing" -> "dark"
// "/about" -> undefined (will use default/system if you have it enabled)

[subhamBharadwaz]

Thanks. I only wanted my home page to be dark, so :

export function Providers({ children }: ProviderProps) {
  const pathname = usePathname()
  return (
    <ThemeProvider
      forcedTheme={pathname === "/" ? "dark" : null}
      attribute="class"
      defaultTheme="dark"
      enableSystem
    >
    </ThemeProvider>
  )
}

[jamesvclements]

This solution works great, but what if I need my not-found.js route to force a theme? Should that be the default cause in the switch statement? But then I would need to hard-code every route in my site into the switch statement. Any thoughts?