Root Provider

為所有元件提供 Context 的 Provider，其中包含 next-themes 與 <FrameworkProvider />。請將它放在根版面配置中。

使用方式複製錨點連結

請依您使用的 React.js 框架匯入：

import { RootProvider } from 'fumadocs-ui/provider/next';

export default function Layout({ children }) {
  return (
    <html lang="en">
      <body>
        <RootProvider>{children}</RootProvider>
      </body>
    </html>
  );
}

搜尋對話方塊複製錨點連結

您可以透過 search 選項自訂或停用搜尋對話方塊。

<RootProvider
  search={{
    enabled: false,
  }}
>
  {children}
</RootProvider>

詳情請參閱搜尋。

主題 Provider複製錨點連結

Fumadocs 透過 next-themes 支援淺色／深色模式。 您可以透過 theme 選項自訂或停用此功能。

<RootProvider
  theme={{
    enabled: false,
  }}
>
  {children}
</RootProvider>

您也可以自行安裝 next-themes，並在程式碼中引用它來管理主題。

快捷鍵複製錨點連結

按下 D 即可切換淺色與深色模式。 當您正在可編輯的元素 (例如 <input />) 中輸入內容，或已開啟對話方塊 (例如搜尋對話方塊) 時，此快捷鍵不會生效。

您可以將其他按鍵傳入 theme.hotKey，或傳入 false 來停用此快捷鍵。

<RootProvider
  theme={{
    hotKey: false,
  }}
>
  {children}
</RootProvider>

也可以傳入函式，以完全掌控要比對的按鍵組合。

<RootProvider
  theme={{
    hotKey: (e) => e.shiftKey && e.key === 'D',
  }}
>
  {children}
</RootProvider>