How can I programmatically toggle the theme outside of fumadocs?

[nktnet1]

I've consulted the documentation here:
https://fumadocs.vercel.app/docs/ui/theme

Essentially, I'd like the ability for users to toggle the theme outside of fumadocs (in other areas of my app).

Is the useTheme hook exposed? I'd like to do something like:

https://github.com/pacocoursey/next-themes?tab=readme-ov-file#usetheme

import { useTheme } from 'next-themes'

const ThemeChanger = () => {
  const { theme, setTheme } = useTheme()

  return (
    <div>
      The current theme is: {theme}
      <button onClick={() => setTheme('light')}>Light Mode</button>
      <button onClick={() => setTheme('dark')}>Dark Mode</button>
    </div>
  )
}

[fuma-nama]

You can use next themes on your side

[nktnet1]

Thank you for your response @fuma-nama.

I also saw your response here #390 (reply in thread)

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.

and wanted to follow the recommendation, but if this is the only way to get the hook, I'll look into that. Thanks!

[fuma-nama]

The recommendation is just install next themes on your project and use it. Fumadocs uses it under the hood so the same React context is shared.