Can I change the theme of navbar just for the homepage

[Gitstar-OC]

Dear @fuma-nama,

I have made a prototye here but I am facing a problem, what I want to do is I want to remove the theme changer just for the homepage and change the navbar to the dark one just for the homepage as it matches the theme. I have checked the docs but it is removing the whole theme from the website, which I don't want as people prefer both the dark and light theme for the docs, is there any thing, I can do to make this thing happen ?

Please go to the website and see how the navbar looks if it is in the light theme.

Thanks for your help in advanced.

[fuma-nama]

Hmm I see, you can:

1. hide the theme toggle with CSS
2. Create a new root provider, wrap the old root provider like:

'use client';
import { RootProvider } from 'fumadocs-ui/provider';
import type { ReactNode } from 'react';
 
export function Provider({ children }: { children: ReactNode }) {
  return (
    <RootProvider>
      {children}
    </RootProvider>
  );
}

So that you can invoke usePathname to get the pathname and disable/customise next-themes

[Gitstar-OC]

I tried using it but It is throwing an error,

Are you suggesting me to use this

* Wraps your components to specify the value of this context for all components inside.
     *
     * @see {@link https://react.dev/reference/react/createContext#provider React Docs}
     *
     * @example
     *
     * ```tsx
     * import { createContext } from 'react';
     *
     * const ThemeContext = createContext('light');
     *
     * function App() {
     *   return (
     *     <ThemeContext.Provider value="dark">
     *       <Toolbar />
     *     </ThemeContext.Provider>
     *   );
     * }
     * ```
     */

Or is there any way to modify just the theme of the navbar which is on the mainpage, in the modules, If I can do that then it will be easiest way for me to change the navbar,

I did not understand what you said after the code block, I have tried other things with it too.

[fuma-nama]

In provider.tsx:

'use client';
import { RootProvider } from 'fumadocs-ui/provider';
import { usePathname } from 'next/navigation';
import type { ReactNode } from 'react';
 
export function Provider({ children }: { children: ReactNode }) {
  const pathname = usePathname()

  return (
    <RootProvider theme={{ enabled: pathname !== '/' }}>
      {children}
    </RootProvider>
  );
}

And replace the root provider from root layout with your new one