# Fumadocs UI (the default theme of Fumadocs): Root Provider
URL: /zh-TW/docs/ui/layouts/root-provider
Source: https://raw.githubusercontent.com/fuma-nama/fumadocs/refs/heads/main/apps/docs/content/docs/ui/layouts/root-provider.zh-TW.mdx
Fumadocs UI 的 Context Provider。
為所有元件提供 Context 的 Provider，其中包含 `next-themes` 與 [``](/docs/headless#installation)。請將它放在根版面配置中。
## 使用方式 [#usage]
請依您使用的 React.js 框架匯入：
```jsx tab="Next.js"
import { RootProvider } from 'fumadocs-ui/provider/next';
export default function Layout({ children }) {
return (
{children}
);
}
```
```jsx tab="React Router"
import { RootProvider } from 'fumadocs-ui/provider/react-router';
export function Layout({ children }) {
return (
{children}
);
}
```
```jsx tab="TanStack Start"
import {
HeadContent,
Scripts,
} from '@tanstack/react-router';
import { RootProvider } from 'fumadocs-ui/provider/tanstack';
function RootDocument({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
```jsx tab="Waku"
import { RootProvider } from 'fumadocs-ui/provider/waku';
export default function Layout({ children }) {
return (
{children}
);
}
```
```jsx tab="Astro"
import { navigate } from 'astro:transitions/client';
import { RootProvider } from 'fumadocs-ui/provider/astro';
// 此元件在 React island 中算繪，請從 Astro 頁面傳入 pathname 與 params。
export function Provider({ pathname, params, children }) {
return (
{children}
);
}
```
### 搜尋對話方塊 [#search-dialog]
您可以透過 `search` 選項自訂或停用搜尋對話方塊。
```jsx
{children}
```
詳情請參閱[搜尋](/docs/ui/search)。
### 主題 Provider [#theme-provider]
Fumadocs 透過 [`next-themes`](https://github.com/pacocoursey/next-themes) 支援淺色／深色模式。
您可以透過 `theme` 選項自訂或停用此功能。
```jsx
{children}
```
您也可以自行安裝 `next-themes`，並在程式碼中引用它來管理主題。
#### 快捷鍵 [#hotkey]
按下 D 即可切換淺色與深色模式。
當您正在可編輯的元素 (例如 ``) 中輸入內容，或已開啟對話方塊 (例如搜尋對話方塊) 時，此快捷鍵不會生效。
您可以將其他按鍵傳入 `theme.hotKey`，或傳入 `false` 來停用此快捷鍵。
```jsx
{children}
```
也可以傳入函式，以完全掌控要比對的按鍵組合。
```jsx
e.shiftKey && e.key === 'D',
}}
>
{children}
```