How to remove the light/dark mode toggle from the header?

[seangray-dev]

Docs dont mention anything about the theme toggle that I can find. Also don't see if its possible from reviewing the types.

Would also like to be able to style the header to my liking a bit more, such as removing the border on the bottom of the header

Any help would be appreciated thanks!

[fuma-nama]

You can’t customise/disable the theme toggle, and I want to keep the UI opinionated. You can’t disable it without replacing the default navbar with your own component.
To style the navbar, use CSS instead.

[sohail-313]

How can we do it, please help sir @fuma-nama?

[fuma-nama]

As stated, it's impossible unless you replace the default navbar component with the component prop on navbar. This is unlikely to be changed.

[sohail-313]

Thanks, @fuma-nama for replying. However, can I have only the light theme by default?

[fuma-nama]

You can disable next themes provider https://fumadocs.vercel.app/docs/ui/blocks/root-provider#usage.
And use your own provider here, you may install next-themes on your project and wrap the root provider to customise themes options.
But it's not recommended, all default settings are optimised for docs usages and they allow the good practices.

[sohail-313]

You are really an awesome person @fuma-nama . I have a few questions:

1. Can I have only the light theme by default? I tried wrapping it up, but no luck. The RootProvider is forcing the dark theme!
   
   2.How do we apply our own CSS to fix bugs? For instance, when we have our own navbar, in mobile view, it's leaving space equivalent to the navbar height when scrolled.
   

[fuma-nama]

See the configuration of Theme Provider, make sure you have the original theme provider disabled in root provider.

1. edit: By default, it follows the system default. With the newer version of UI, you can now customise next-themes options directly from Root Provider.
2. It's discouraged to have multiple navbars, consider Links API for navigation functionalities. Or completely remove the default navbar. All React contexts are exposed from root provider (note that they can be changed in major releases)

Styling the navbar is same as how you style an ordinary element in CSS.

header {

}

header nav { 
}